datatables 可隐藏移动列

最新推荐文章于 2024-08-01 16:19:22 发布

chichetui1569

最新推荐文章于 2024-08-01 16:19:22 发布

阅读量169

点赞数

文章标签： json javascript ViewUI

原文链接：https://my.oschina.net/ziyou118/blog/1936087

版权

1.table

<div id="showColmuns" style="display:none">

   <div id="div_clos">

      <form class="layui-form">

         <div class="layui-block">

            <label >表头配置</label>

            <div class="layui-input-inline" id="selColmuns">

            </div>

            <a id="rebulidTable" href="#" οnclick="rebulidTable()" class="btn btn-success-outline radius" ><i class="Hui-iconfont">&#xe6a7;</i> 保存配置</a>

         </div>

      </form>

   </div>

</div>

<table id="tableMain" cellspacing="0" class="table table-border table-bordered table-bg table-hover nowrap" style="width:100%">

   <tbody>



   </tbody>

</table>

2.columns && url

var columns=[

       { "sTitle" :"日期","data": "add_date" },

       { "sTitle" :"商品编码","data": "p_code" },

       { "sTitle" :"商品名称","data": "p_name" }

       { "sTitle" :"部门名称","data": "add_organ" }

  ];

   /*需要判断的在上边data后边加

   ,render:function(data, type, row, meta) {

   var dataTitle;

   if(data==1){

      dataTitle="<span class=\"label label-success radius\">启用</span>"

   }else if(data==0){

      dataTitle="<span class=\"label label-warning radius\">禁用</span>"

   }else{

      dataTitle=data;

   }

   return dataTitle;

}

   * */

var url="${basePath}/admin/product/data/${mClassId!}";

3.checkboxlist

//是否有checkbox列,""为没有，其他传主键ID

var checklistId="p_id";

4.pageName

var pageName = "product";

5.js

<script type="text/javascript" src="${basePath}/lib/datatables/media/js/jquery.dataTables.js"></script>

<script type="text/javascript" src="${basePath}/lib/datatables/media/js/buttons.colVis.min.js"></script>

<script type="text/javascript" src="${basePath}/lib/datatables/media/js/dataTables.buttons.js"></script>

<script type="text/javascript" src="${basePath}/lib/datatables/media/js/dataTables.colReorder.min.js"></script>

<script type="text/javascript" src="${basePath}/lib/datatables/table.js"></script>

6.后台和原来一样获得json

{"data":[{"add_date":"2018-08-18","add_organ":"销售部","add_organ_code":"ORGAN0002","add_user_id":412,"b_name":"Ⅱ类6805","buy_price":560,"buy_user_id":413,"buy_user_name":"葛二蛋","buy_user_opinion":"日常需要","cankao_rate":0,"code":"CP002","final_state":1,"group_code":"SRX_87","jiliang_spec":"纸箱","manufacturing_enterprise":"SUP1808188002","origin":"","p_class_id":1330,"p_code":"CP002","p_id":101,"p_name":"血液细胞分析仪","p_spec":"五分类","performance":"","price_approval":"","product_packaging":"纸箱","quality_standard":"","rate":0.01,"record_certificate_number":"","record_certificate_validity":"","registration_number":"第2400967号","registration_validity":"2021-08-18","sale_price":880,"specification":"","state":2,"storage":"常温","storage_condition":"4974","type":"6805","unit":"纸箱","youxiaoqi_yue":36},{"add_date":"2018-08-18","add_organ":"销售部","add_organ_code":"ORGAN0002","add_user_id":412,"b_name":"Ⅰ类","buy_price":3,"buy_user_id":413,"buy_user_name":"葛二蛋","buy_user_opinion":"","cankao_rate":0,"code":"CP001","final_state":1,"group_code":"SRX_87","jiliang_spec":"2.4ml","manufacturing_enterprise":"SUP1808188002","origin":"石家庄","p_class_id":1307,"p_code":"CP001","p_id":100,"p_name":"采血管","p_spec":"8*120mm","performance":"广泛","price_approval":"","product_packaging":"包装","quality_standard":"","rate":0.99,"record_certificate_number":"","record_certificate_validity":"","registration_number":"第2410084号","registration_validity":"2020-08-18","sale_price":5,"specification":"","state":2,"storage":"冷藏","storage_condition":"4975","type":"6800","unit":"支","youxiaoqi_yue":36}],"draw":1,"recordsDisplay":2,"recordsFiltered":2,"recordsTotal":2}
7.table.js

var intWindowHeight = window.document.body.clientHeight;

var columnArr;
var columnStrIn = "";
var colArray = [];
$(document).ready(function() {

    //点击按钮显示列头集合
    $('#showcolumnsSet').click(function(){
        if($("#showColmuns").is(":visible")){
            $("#showColmuns").hide('slow');
        }else{
            $("#showColmuns").show('fast');
        }
    });
    initColumns();

});
//点击事件
function rebulidTable () {
    columnArr= $("#allColumns").val();
    // console.log(columnArr[0]);
    //设置列表
    setColumns(columnArr);
// alert(columnStrIn);
    // //保存列
    setAllColumns(columnStrIn);

}
//columnArr 选中列
function setColumns(columnArr){
    var columnsArray = [];
    colArray = [];
    columnStrIn="";

    //动态组装列
    $(columnArr).each(function (i, o) {
        var json = {data: null, title: null,render:null};
//         o = $(o);
        json.data = o.split("@")[0];
        json.title = o.split("@")[1];
        json.render =setRenders(o.split("@")[0]);
        columnsArray.push(json);

    });

    //按现有表格顺序排序
    dt.columns().dataSrc().each(function (i, o) {
        for(var c=0;c<=columnArr.length;c++){
            if(columnArr[c]!=undefined) {
                if (columnArr[c].split("@")[0] === i) {
//                                alert(c+"======111111======="+columnArr[c].value);
                    colArray.push(columnsArray[c]);
                }
            }
        }
    });

    //回填列
    $(columnArr).each(function (i, o) {
        // o = $(o);
        if (in_array(o.split("@")[0], dt.columns().dataSrc()) === -1) {
            var json = {data: null, title: null,render:null};
            json.data = o.split("@")[0];
            json.title = o.split("@")[1];
            json.render =setRenders(o.split("@")[0]);
            colArray.splice(i, 0, json);
        }
    });
    getAllColumnsName(columnArr);
    if(checklistId!=""){
        var json = {data: checklistId, title: "<input type=\"checkbox\" name=\"\" id=\"chkAll\" value=\"\" >",class:"text-c",render:function(data, type, row, meta) {
            return '<input type="checkbox" value="'+data+'" name="chkId" class="is_checked">';
        }};
        colArray.splice(0, 0, json);
    }

    //获取最后保存列头信息
    $(colArray).each(function (i, o) {
        if(o.title!=undefined){
            if(o.title.indexOf("chkAll")!=-1){
                return true;
            }
        }
        columnStrIn += o.data+"@"+o.title;
        if (i != colArray.length - 1) {
            columnStrIn += ",";
        }
    });
    //改变列的结构，先销毁前面的实例
    dt.destroy();
    // 列改变了，需要清空table
    $("#tableMain").empty();
    dt = createTable(colArray);

//            alert(JSON.stringify(colArray));
}
function setRenders(data){
    var render ;
    $.each(columns, function (n, value) {

        if(value["data"]===data ){
            if(value["render"]!=undefined ){
//                                alert(value["sTitle"]+"========="+value["render"]);
                render=value["render"];
            }
        }
    });

    return render;
}
//判断字符串是否在数组中，-1不在，其他在。
function in_array(stringToSearch, arrayToSearch) {
    var x=-1;
    for (var s = 0; s < arrayToSearch.length; s++) {
        var thisEntry ;
        if(arrayToSearch[s].value!=undefined){
            thisEntry=arrayToSearch[s].value.toString();
        }else if(arrayToSearch[s].indexOf("@")!=-1){
            thisEntry=arrayToSearch[s].split("@")[0].toString();
        }else{
            thisEntry=arrayToSearch[s].toString();
        }
        if (thisEntry == stringToSearch) {
            x=s;
            return x;
        }
    }
    return x;
}
//设置 checkbox html
function getAllColumnsName(columnArr){
    // $('#div_clos').empty();
    var div_clos="" +
        "<select name=\"allColumns\" id=\"allColumns\" multiple lay-omit>";

    $.each(columns, function (n, value) {
        var ischecked="selected";
        if(value["title"]!=undefined){
            return true;
        }

        if(columnArr!=undefined){
            if(columnArr[0]!=""){

                if(in_array(value["data"],columnArr)===-1){
                    ischecked="";
                }
            }
        }
        div_clos+="<option "+ischecked+" value=\""+value["data"]+"@"+value["sTitle"]+"\">"+value["sTitle"]+"</option>";
        // $('#div_clos').append("<div style=\"float:left;padding-left: 4px\" ><input name=\"allColumns\" type=\"checkbox\" " +ischecked+ " value=\""+value["data"]+"\"><span>"+value["sTitle"]+"</span></div>");
    });
    div_clos+="</select>" +

        "<script>\n" +
        "    layui.use(['form'], function () {})" +
        "</script>";
    $('#selColmuns').append(div_clos);
}
function createTable(columns) {
    dt=$('#tableMain').DataTable({
        "scrollX": true,
        'scrollY': (intWindowHeight - 280) + 'px',
        "ordering": false,
        "searching": false,
        "bLengthChange":false,//改变每页显示数据数量
        "language": {
            "url": "/lib/datatables/media/js/zh-cn.json"
        },
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "lengthMenu": [15],
        "ajax": {
            "url": url,
            "type": "POST",
        },
        "colReorder": true,
        "columns": columns,
        "destroy": true,
        //其他渲染
        "drawCallback":function(s){
            $("#chkAll").click(function() {
                $('input[name="chkId"]').prop("checked",this.checked);
            });
            $('#tableMain tbody tr').dblclick(
                function() {
                    edit(dt.row(this).data().code);
                }
            );

            var is_sum=false;
            var sumColumnsHtml="<tr>";
            var sumProperty=JSON.parse(s.json.sumProperty);
            $(columns).each(function (i, o) {
                var sum="";
                for(var item in sumProperty){

                    if(o.data==item){
                        sum=sumProperty[item];
                        is_sum=true;
                    }
                }
                sumColumnsHtml+="<td>"+(sum==null?"0":sum)+"</td>"
            });
            sumColumnsHtml+="</tr>";
            if(is_sum){
                $('#tableMain tbody').append(sumColumnsHtml);
            }
            //设置列头宽度不变
            this.fnAdjustColumnSizing(false);
        }
    });
    return dt;
}
//保存列头
function  setAllColumns(columns){
    $.ajax( {
        url : "/admin/productrx/setColumns",
        type: "post",
        dataType:"json",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        data:{pagename:pageName,columns:columns},
        success : function(data) {
            if(data.success>0){
                layer.msg(data.message,{icon:1,time:1000});
            }else{
                layer.msg(data.message,{icon:2,time:1000});
            }
        }
    });
}
function initColumns(){
    $.ajax( {
        url : "/admin/productrx/getColumns",
        type: "post",
        dataType:"json",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        data:{pagename:pageName},
        success : function(data) {
            if(data.success>0){
                var cols =data.message.split(",");
                var columnsArray = [];
                //动态组装列
                $(cols).each(function (i, o) {
                    var json = {data: null, title: null,render:null};
                    json.data = o.split("@")[0];
                    json.title = o.split("@")[1];
                    json.render =setRenders(o.split("@")[0]);
                    columnsArray.push(json);
                });

                if(data.message.trim()==""){
                    columnsArray=columns;
                }
                getAllColumnsName(cols);
                if(checklistId!=""){
                    var json = {data: checklistId, title: "<input type=\"checkbox\" name=\"\" id=\"chkAll\" value=\"\" >",class:"text-c",render:function(data, type, row, meta) {
                        return '<input type="checkbox" value="'+data+'" name="chkId" class="is_checked">';
                    }};
                    columnsArray.splice(0, 0, json);
                }
                dt=$('#tableMain').DataTable({
                    "scrollX": true,
                    'scrollY': (intWindowHeight - 280) + 'px',
                    "ordering": false,
                    "searching": false,
                    "bLengthChange":false,//改变每页显示数据数量
                    "language": {
                        "url": "/lib/datatables/media/js/zh-cn.json"
                    },
                    "processing": true,
                    "serverSide": true,
                    "deferRender": true,
                    "lengthMenu": [15],
                    "ajax": {
                        "url": url,
                        "type": "POST",
                    },
                    "colReorder": true,
                    "columns": columnsArray,
                    "destroy": true,
                    //其他渲染
                    "drawCallback":function(s){

                        $("#chkAll").click(function() {
                            $('input[name="chkId"]').prop("checked",this.checked);
                        });
                        $('#tableMain tbody tr').dblclick(
                            function() {
                                edit(dt.row(this).data().code);
                            }
                        );

                        var is_sum=false;
                        var sumColumnsHtml="<tr>";
                        var sumProperty=JSON.parse(s.json.sumProperty);
                        $(columnsArray).each(function (i, o) {
                            var sum="";
                            for(var item in sumProperty){

                                if(o.data==item){
                                    sum=sumProperty[item];
                                    is_sum=true;
                                }
                            }
                            sumColumnsHtml+="<td>"+(sum==null?"0":sum)+"</td>"
                        });
                        sumColumnsHtml+="</tr>";
                        if(is_sum){
                            $('#tableMain tbody').append(sumColumnsHtml);
                        }
                        //设置列头宽度不变
                        this.fnAdjustColumnSizing(false);
                    }
                });


            }
        }
    });
}

8 数据表

CREATE TABLE `t_user_columns` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL COMMENT '用户id',
`pagename` varchar(20) DEFAULT NULL COMMENT '每个用户不同列表只存一条',
`columns` varchar(5000) DEFAULT NULL COMMENT '列的内容',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8mb4;

转载于:https://my.oschina.net/ziyou118/blog/1936087

chichetui1569

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datatables 可隐藏移动列

1.table <div id="showColmuns" style="display:none"> <div id="div_clos"> <form class="layui-form"> &lt...
复制链接

扫一扫