layui 数据表格将字段值的value换为label显示 tabAdd

要点:

1,templet:'<div>{{lxlabel(d.lxlabel) }}</div>'
2,element.tabAdd('tab', {
      title: title,
      content: "<iframe class='iframecont' style='border-width: 0px;border-color: #ffffff;border-style: solid;' id='iframeAll' width='99%' src='/MetadataAPI/topage?id="+id1+"'></iframe>", //支持传入html,
      id: id
            });
   element.tabChange('tab', id);

完整代码:

 function searchgn(data) {
        var table = layui.table;
        //第2个实例
        table.render({
            elem: '#tab2_js',
            height: "full-70",
            width: CLIENTWIDTH ,
            size: 'sm' //小尺寸的表格
            ,
            url: '' //数据接口
            ,
            page: false //开启分页
            ,
            cols: [
                [ //表头
                    {field: 'id', title: 'id', width: '10%'},
                    {field: 'xh', title: '序号', width: '5%'},
                    {field: 'mc', title: '名称', sort: true, width: '10%'},
                    {field: 'dm', title: '代码', sort: true, width: '10%',},
                    {field: 'lxlabel', title: '类型', width: '10%',templet:'<div>{{lxlabel(d.lxlabel) }}</div>'},
                    // {field: 'mainid', title: '分类', sort: true, width: '10%'},
                    {field: 'datalx', title: '结果类型', sort: true, width: '10%',templet:'<div>{{datalx(d.datalx) }}</div>'},
                    {field: 'cacheflag', title: '缓存', width: '10%',templet:'<div>{{isYes(d.cacheflag) }}</div>'},
                    {field: 'maxcachetime', title: '缓存时长', width: '10%'},
                    {field: 'sqltype', title: 'sql模式', width: '10%',templet:'<div>{{sqltype(d.sqltype) }}</div>'},
                    {field: 'created', title: '创建日期', sort: true, width: '10%', templet : "<div>{{layui.util.toDateString(d.ordertime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
                    {field: 'right',  title: '操作', align:'center',  width: '10%',toolbar: '#barDemo'}
                    // {field: 'username', title: '操作', sort: true, width: '20%'},
                    // {field: 'sex', title: '小数位数', sort: true, width: '10%',}
                ]
            ],
            data: data? data : [],
            done: function () {
                $("[data-field='id']").css('display','none');
            }
        });


        //监听工具条
        table.on('tool(tab2_js)', function(obj){
        
            var data = obj.data;
            var subid=data.id;
         
            if(obj.event === 'del'){
                layer.confirm('确定删除么?', function(index){
                    var postdata={id:subid};
                    $.getJSON("/Metadatafl/deletegn",postdata, function (obj) {
                        if (obj.success) {
                            alert(obj.msg)
                            searchgndata()
                        }else{
                            alert(obj.msg)
                            searchgndata()
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '日志管理',
                    area: ['1000px', '700px'],
                    content: '/Metadatafl/todetaillog?id='+subid //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });

//双击数据表格的数据,添加tabb 【tabAdd】
        table.on('rowDouble(tab2_js)', function(obj) {
            //新增tab
            var id = obj.data.xh
            var title = obj.data.mc
            var element = layui.element;
            var id1 = obj.data.id;
            element.tabAdd('tab', {
                title: title,
                content: "<iframe class='iframecont' style='border-width: 0px;border-color: #ffffff;border-style: solid;' id='iframeAll' width='99%' src='/MetadataAPI/topage?id="+id1+"'></iframe>", //支持传入html,
                id: id
            });
            element.tabChange('tab', id);
            /*动态设置iframe高度*/
            var h = document.body.clientHeight
            $('.iframecont').height(h - 45)
        });

    }


  function isYes(yes) {
        if (yes == 1 || yes == true) {
            return "是";
        } else {
            return "否";
        }
    }
    
  function lxlabel(yes) {
        switch (yes)
            {
                case "1":return "删除";
                case "2":return "审核";
                case "3":return "验收";
                case "4":return "修改";
                case "5":return "数据集";
                default:return"";

            }
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 在数据表格中添加复选框列: 在数据表格的列配置中添加一列,指定类型为“checkbox”,并设置LAY_CHECKED为false即可: ```javascript cols: [ {type: 'checkbox', fixed: 'left'}, {field: 'id', title: 'ID', width: 80, sort: true}, {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', minWidth: 150}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', minWidth: 160}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', minWidth: 100}, {field: 'wealth', title: '财富', width: 135, sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ] ``` 2. 获取选中行的数据: 在数据表格的配置中,添加一个layEvent事件监听,监听checkbox操作事件,获取选中的数据: ```javascript table.on('checkbox(test)', function(obj){ var checkStatus = table.checkStatus('test'); console.log(checkStatus.data); //获取选中行的数据 }); ``` 3. 获取选中行的某一字段: 在获取选中行的数据后,我们可以循环遍历选中的数据,获取每一行数据的指定字段: ```javascript table.on('checkbox(test)', function(obj){ var checkStatus = table.checkStatus('test'); var ids = []; //存储选中行的id layui.each(checkStatus.data, function(index, item){ ids.push(item.id); //获取选中行的id }); console.log(ids); }); ``` 以上代码中,我们定义了一个ids数组,用来存储选中行的id。然后,我们使用layui.each()方法循环遍历选中的数据,并将每一行数据的id存储到ids数组中。最后,我们打印出ids数组,即可查看选中行的id了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值