大作业 选取指定列导出到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
                    //,width: 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
                    //,width: 150 //定义宽度
                    ,height: 450 //定义高度
                    ,id: 'import_select_data'
                 })
             }
         });