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

最新推荐文章于 2021-12-31 23:03:36 发布

Aimyone

最新推荐文章于 2021-12-31 23:03:36 发布

阅读量797

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/106386377

版权

layui 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

要点：

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"";

            }
        }