<script>
    //添加列点击事件
    var tplCompanyName = function (d) {
        var html = '<a style="color:#1E9FFF" href="javascript:;" lay-event="showRec"  >'+d.completeSchemeNum+'</a>';
        return html;
    }
    layui.use('table', function () {
        var table = layui.table;


        table.render({

            elem: '#test'
            , id: 'test'
            // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['exports', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , url: '/cellinfo/list'    //'../json/jsondata.json'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , totalRow: true
            , cols: [[
                //sort是否开启排序,fixed是否固定列值位置只有left和right,totalRow合计,unresize是否禁用拖拽列宽,minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                {field: 'index',width: 100, title: '排序',align: 'center',  type: 'numbers',totalRowText: '合计'}
                // , {field: 'id', width: 120, title: 'ID',  unresize: true,  totalRowText: '合计',align: 'center'}
                , {field: 'city', width: 180, title: '城市',align: 'center'}
                , {field: 'cellNum', width: 180, title: '小区数量',align: 'center'}
                , {field: 'completeSchemeNum', width: 180, title: '已完成方案数量',templet:tplCompanyName,align: 'center',totalRow: true}
                , {field: 'incompleteScheme', title: '未完成方案数量', width: 180,align: 'center',totalRow: true }
            ]]
            , page: false
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听排序事件
        var orderBy = {};
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象
            orderBy[obj.field] = obj.type;
            var a = JSON.stringify(orderBy);
            a = encodeURIComponent(a, 'utf-8');
            console.log(a);
            //orderBy.push("{"+obj.field+":"+obj.type+"}");
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('test', {
                initSort: orderBy //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                    , orderBy: a //组合排序
                }
            });
        });
//头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'save':
                    layer.msg(checkStatus.save ? '全选' : '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        table.on('tool(test)', function(obj){
            switch(obj.event){
                case 'showRec':
                    // console.log(obj.data.username);
                    // console.log(obj.data.id);
                    // var uid = obj.data.username;
                    //
                    // //iframe层
                    // layer.open({
                    //     type: 2,
                    //     title: '完成方案明细',
                    //     shadeClose: true,
                    //     shade: 0.6,
                    //     area: ['780px', '580px'],
                    //     // content: 'money_log?uid=' + uid + '&utype=3'
                    //     content: 'assessmentDetail.html'
                    // });
                    // break;
                    var id = obj.data.city;
                    var exist=parent.getTab(id);
                    if(exist == 0){
                        window.parent.layui.element.tabAdd('demo', {
                            title: id+'完成方案详情',
                            content: '<iframe lay-id="' + id + '" src="selectDetail" frameborder="0" class="admin-iframe" style="width: 100%;height: 100%"></iframe>' //支持传入html
                            , id: id
                        });
                    }

                    window.parent.layui.element.tabChange('demo', id);
            }
        });
    });

</script>

//第一步,列中添加templet事件
//sort是否开启排序,fixed是否固定列值位置只有left和right,totalRow合计,unresize是否禁用拖拽列宽,minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
 {field: 'completeSchemeNum', width: 180, title: '已完成方案数量',templet:tplCompanyName,align: 'center',totalRow: true}

//第二步,绑定列中添加的a标签事件,且添加lay-event="showRec"
    var tplCompanyName = function (d) {
        var html = '<a style="color:#1E9FFF" href="javascript:;" lay-event="showRec"  >'+d.completeSchemeNum+'</a>';
        return html;
    }
//第三步,添加showRec事件监听,
table.on('tool(test)', function(obj){
            switch(obj.event){
                case 'showRec':
                    //定义tab的id方便跳转
                    var id= obj.data.city;
                    //获取父类中是否有这个id
                    var exist=parent.getTab(id);
                    //判断是否有这个id的tab页面已经打开,如果没有则新增tab(demo参数为父页面的lay-filter="demo")
                    if(exist == 0){
                        window.parent.layui.element.tabAdd('demo', {
                            title: id+'完成方案详情',
                            content: '<iframe lay-id="' + id + '" src="selectDetail" frameborder="0" class="admin-iframe" style="width: 100%;height: 100%"></iframe>' //支持传入html
                            , id: id
                        });
                    }
                    //如果已经有已打开的tab页面则跳转此tab
                    window.parent.layui.element.tabChange('demo', id);
            }
        });






//这个方法放在这个tab的父类页面,此方法用于子页面进行调用
//这个方法放在这个tab的父类页面,此方法用于子页面进行调用
//这个方法放在这个tab的父类页面,此方法用于子页面进行调用
        window.getTab=function(id)
        {
            return $("li[lay-id='"+url+"']").length;
        }
        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

 demo参数: