zoukankan      html  css  js  c++  java
  • 大作业 选取指定列导出到excel

    首先是利用layui的穿梭框来实现选择指定列

     然后点击导出按钮即可导出,不过现在还没完成。

    穿梭框主要代码:

     <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>文件导出</legend>
            </fieldset>
            <div id="import_select" class="demo-transfer"></div>
            <br><br>
            <form class="layui-form" action="">
                <button type="button" class="layui-btn" id="export" >开始导出</button>
            </form>
            <br>

    js

    layui.use(['transfer', 'layer', 'util'], function(){
            var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
            //获取穿梭框的值
            $.ajax({
                 type: "GET",
                 url: "/get_table_details_key?table_name={{ table_name }}&database_name={{ database_name }}",
                 dataType: "json",
                 success: function(data){
                     for (i=0;i<data.len;i++){
                         data_key_select[i]={value:data.data[i][0], title: data.data[i][1]+"("+data.data[i][0]+")", disabled: "", checked: ""}
                     }
                     //定义标题及数据源
                     transfer.render({
                        elem: '#import_select'
                        ,title: ['属性列', '导出列']  //自定义标题
                        ,data: data_key_select
                        //, 150 //定义宽度
                        ,height: 450 //定义高度
                        ,id: 'import_select_data'
                     })
                 }
             });
            $('#export').click(function(){
                //url="http://127.0.0.1:5000/export?table_name={{ table_name }}&database_name={{ database_name }}"
                //window.open(url)
                 var getData = transfer.getData('import_select_data');
                 alert(getData)
            });
        });

    首先遇到的问题是如何获取右侧的数据

    var getData = transfer.getData('import_select_data');

    接着就是如何获取穿梭框左侧的值,可以利用ajax请求后台返回数据。

    但要注意数据的格式:

    合法的数据格式code
    [
      {"value": "1", "title": "李白", "disabled": "", "checked": ""}
      ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
      ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
    ]

    ajax部分:

     $.ajax({
                 type: "GET",
                 url: "/get_table_details_key?table_name={{ table_name }}&database_name={{ database_name }}",
                 dataType: "json",
                 success: function(data){
                     for (i=0;i<data.len;i++){
                         data_key_select[i]={value:data.data[i][0], title: data.data[i][1]+"("+data.data[i][0]+")", disabled: "", checked: ""}
                     }
                     //定义标题及数据源
                     transfer.render({
                        elem: '#import_select'
                        ,title: ['属性列', '导出列']  //自定义标题
                        ,data: data_key_select
                        //, 150 //定义宽度
                        ,height: 450 //定义高度
                        ,id: 'import_select_data'
                     })
                 }
             });


  • 相关阅读:
    20182320《程序设计与数据结构》第八周学习总结
    20182320《程序设计与数据结构》第七周学习总结
    20182320 2019-2020-1 《数据结构与面向对象程序设计》实验6报告
    实验5
    20182320《程序设计与数据结构》第六周学习总结
    20182320 2019-2020-1 《数据结构与面向对象程序设计》第5周学习总结
    实验4
    20182320 2019-2020-1 《数据结构与面向对象程序设计》第4周学习总结
    实验3
    实验2报告
  • 原文地址:https://www.cnblogs.com/fengchuiguobanxia/p/15637225.html
Copyright © 2011-2022 走看看