layUI数据表格-后台返回的数据格式非layui默认格式 + 数据表格中显示客制化内容 + 多选批量获取数据表格中数据

返回的数据格式：

{
    "msg": "操作成功",
    "status": 1,
    "data": {
        "total": 155,
        "per_page": 10,
        "current_page": 1,
        "last_page": 16,
        "data": [
            {
                "id": 496011,
                "client_name": "陈加笔",
                "client_phone": "18267803553",
                "import_day": "2021-09-03",
              	...
            },
           ...
        ]
    }
}

HTML：

<table class="layui-hide" id="test-table-resetPage" lay-filter="data_table"></table>

JS

parseData return code属性 必须赋0，否则不渲染数据

layui.use(['index', 'table'], function () {
        var admin = layui.admin
            , table = layui.table
            , $ = layui.$
            , router = layui.router();

        var token = localStorage.getItem("token");

        var tableIns = table.render({
            id: 'user_list'
            , elem: '#test-table-resetPage'
            , url: 'http://cgame.com/indi/contact/getCotList'
            , method: 'post'
            , where: {
                , token: token
                ,type:1
            }
            , request: {
                limitName: 'page_size' //每页数据量的参数名，默认：limit
            }
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res)
                var data = res.data.data;
                var data_list = [];
                for (var i = 0; i < data.length; i++) {
                	//替换手机号中间四位
                	data[i].client_phone = data[i].client_phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                	//根据条件渲染数据
                    if (data[i].is_from == 1) {
                        data[i].is_from = '抖音'
                    }
                    if (data[i].is_from == 2) {
                        data[i].is_from = '抖音招商帮'
                    }
                    if (data[i].is_from == 3) {
                        data[i].is_from = '快手'
                    }
                    data_list.push(data[i])
                }
                console.log("dataList", data_list)
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , cols: [[
	            {type:'checkbox'}
                ,{field: 'id', title: 'Id',hide:true}
                ,{field: 'client_name', title: '客户姓名',event:'viewNameDetail',style:'cursor:pointer;'}
                , {field: 'client_phone', title: '手机号', sort: true}
                , {field: 'accept_money', title: '已收款'}
                , {field: 'cost', title: '成本'}
                , {field: 'is_from', title: '来源'}
                , {field: 'import_day', title: '导入时间', sort: true}
                , {title: '操作', templet: '#residualStressListBar', fixed: 'right', align: 'center', minWidth: 200}
            ]]
            ,done:function (res) {

            }
        });

        /**
         * 行工具栏监听事件
         table.on('tool(数据表格的lay-filter属性值)', function (data) {

         });
         */
        table.on('tool(data_table)',function (data){
            console.log('tool',data)
            if (data.event == 'ziliao') {
                //console.log(data.data.id)
                //window.location.href='./user_detail.html?id='+data.data.id;
                //top.layui.index.openTabsPage('./customer_mamage/user_detail.html?id='+data.data.id,'修改信息')
                openUpdatePage(data.data.id);
            } else if (data.event == 'transfer') {
                //top.layui.index.openTabsPage('./customer_mamage/transfer.html?id='+data.data.id,'转移')
                openTransferPage(data.data.id);
            } else if (data.event == 'receive') {
                //top.layui.index.openTabsPage('./customer_mamage/receive.html?id='+data.data.id,'收款')
                openReceivePage(data.data.id);
            } else if (data.event = 'viewNameDetail') {
                openViewNameDetailPage(data.data.id);
            }
        })

       
        function openReceivePage(idss) {
            // 弹出层的标题
            var title = "<h3>收款</h3>";
            var url = './receive.html?id='+idss;

            // iframe层
            layui.layer.open({
                // 类型
                type: 2,
                // 标题
                title: title,
                // 宽高
                area: ['1000px', '400px'],
                // url地址
                content: url,
                // 可以最大化与最小化
                maxmin:true
            });
        }

		//监听多选的checkBox
		var idsArray;
        table.on('checkbox(data_table)', function(obj){
            idsArray=[];
            //checkStatus中参数为js渲染时的id，而非html中绑定的id
            var checkStatus = table.checkStatus('user_list');
            var data = checkStatus.data;
            //console.log("data",data)
            for (var i=0;i<data.length;i++) {
                idsArray.push(data[i].id)
            }
            /*console.log('checked',obj.data.id);
            idsArray.push(obj.data.id);*/
        });
		//监听全选提交按钮
		$('#get_batch').click(function (){
			//id数组转为字符串
            if (idsArray.length > 0) {
                var idstr = '';
                for (var i=0;i<idsArray.length;i++) {
                    idstr += (idsArray[i]+',')
                }
                //console.log(idstr)
                $.post("http://game.com/ini/contt/getContaea",
                    {
                        uid:uid,
                        token:token,
                        id:idstr
                    },function (data) {
                        if (data.status == 1) {
                            layer.msg(data.msg, {
                                offset: '15px'
                                ,icon: 1
                                ,time: 1000
                            });
                            tableIns.reload({
                                // 设置需要传递给后端的参数
                                where: { //设定异步数据接口的额外参数，任意设
                                    // 通过文本框/下拉框的值，设置传递的参数
                                    uid: uid
                                    , token: token
                                    ,type:2
                                }
                                , page: {
                                    curr: 1 // 重新从第 1 页开始
                                }
                            });
                        }
                    },'json');
            } else {
                layui.layer.alert("请至少选择一行");
            }
        });
       
        $("#clear").click(function () {
            $("#type_name").val("");
            $("#type_tel").val("");
        })

        $("#search_btn").click(function () {
            /**
             * 表格重载
             *  多条件查询
             */
            tableIns.reload({
                // 设置需要传递给后端的参数
                where: { //设定异步数据接口的额外参数，任意设
                    // 通过文本框/下拉框的值，设置传递的参数
                    name: $("#type_name").val(),
                    mobile: $("#type_tel").val(),
                    uid: uid
                    , token: token
                    ,type:1
                }
                , page: {
                    curr: 1 // 重新从第 1 页开始
                }
            });

        });
    });
</script>