layui 数据表格 table的一些技巧，及自定义模板的使用

table数据 有时总会有判断男女  类型之类的，所以通过下列方法即可轻松解决。

当然，这样在前台直接写死的 貌似不大好，没关系，我们可以通过自定义模板的方法 数据都来自后台，前台只做判断，如：

效果如下：

关于table表格时间格式的调整：

上图的方法，试过这么写，但有时候就不大好使，所以 下面推荐另一种方法， 

 上面是图片，代码如下：

<script>
    ..............其他代码逻辑

//这相当于一个方法
Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>

<script id="createTime" type="text/html">
    {{#
    var date = new Date();
    date.setTime(d.createTime);
    return date.Format("yyyy-MM-dd hh:mm:ss");
    }}
</script>

第二个方法，copy来的，不知哪位大佬写的 用到了，就一到总结在此吧。

关于自定义模板，再加一个小例子吧，如下

table.render({
            id: 'orderList',
            elem: '#orderList',
            url: 'orderList',
            cols: [[
                {type:'numbers',title:'序号',width:'5%',align:'centenr'},
                {field:'patientName',title:'患者姓名',width:'10%',templet:"#patientName"},
                {field:'orderCreateTime',title:'时间',width:'14%',templet:"#orderCreateTime"},
                {field:'longFlag',title:'是否长期',width:'10%',align:'centenr',templet:"#longFlag"},
                {field:'listOrder',title:'内容',width:'50%',templet:"#listOrder"},
            ]],
            page: true,
            // height: 'full-83',
            where : {
                patientId : patientId,
                visitId : visitId,
            }
        });

 这里的url返回来的数据与layui规定的数据有差异，是个嵌套的数据，上面demo中患者姓名，时间，是否长期，内容，皆为通过自定义模板取得，如下所示：

此模板为获取内容，d.listOrder 就是嵌套里面的一个list集合，通过模板传值，
然后通过jquery的方法遍历解析，返回遍历后且拼装好的数据

<script type="text/html" id="listOrder">
            {{#  if(d.listOrder == ""){ }}
            {{# } else if (d.listOrder==null){ }}
            {{#  } else { }}
            {{#
                var fn = function(list){
                var len =list.length;//传入的list的长度
                var strHred = '';
                var strEnd = '';
                var str = '';
                $.each(list, function(i,item){
                    if(len <= 1){ //小于等于则表示只有一条记录
                        str =item.orderText +'<br>';
                    }else{
                        //两条记录以上时，
                        if(i == 0){  //等于0表示第一条数据，加前缀
                        strHred = '┌'+item.orderText +'<br>';

                        }else if(i == len - 1 ){ //此为最后一条数据，加前缀
                        strEnd  = '└'+item.orderText +'<br>';
                        }else{
                        //拼接数据
                        str = str +'&nbsp;&nbsp;'+item.orderText +'<br>';
                        }
                    }
                });
                //返回拼接好的值
                return strHred+str+strEnd;
                    };
            }}
            <div>{{ fn(d.listOrder) }}</div>
            {{#  } }}
        </script>

如下图内容的最终效果 

 

 

 

//贴个短点的，listOrder集合中的都是同一个人，不同数据的，故只遍历一次，取出姓名即可
<script type="text/html" id="patientName">
            {{#
                var fn = function(list){
                var str = '';
                $.each(list, function(i,item){
                    if(i == 0){
                        str = item.patientName;
                    }
                });
                return str;
                };
            }}
            <div>{{ fn(d.listOrder) }}</div>
        </script>

前台接收的数据如下：

 

 因为都是从嵌套的list当中取  所以表格的field属性 我全都写成的listOrder，如下图所示；

虽然依然也能够取出来值，但是显示的时候却出现意外，宽度设置无效，所有通过模板遍历取值的列，他们的宽全都一样，无法更改，如：

 所以F12查看了下元素，发现

 他们都用了同一个样式，所以导致宽度也全都默认一样。解决办法：

根据从嵌套list中取值的字段的变量名 给予命名 field属性即可。