layui数据表格table的⼀些技巧，及⾃定义模板的使⽤table数据 有时总会有判断男⼥  类型之类的，所以通过下列⽅法即可轻松解决。
当然，这样在前台直接写死的 貌似不⼤好，没关系，我们可以通过⾃定义模板的⽅法 数据都来⾃后台，前台只做判断，如：
效果如下：
关于table表格时间格式的调整：
上图的⽅法，试过这么写，但有时候就不⼤好使，所以 下⾯推荐另⼀种⽅法，  上⾯是图⽚，代码如下：
<script>
..............其他代码逻辑
//这相当于⼀个⽅法
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": Month() + 1,                //⽉份
"d+": Date(),                    //⽇
"h+": Hours(),                  //⼩时
"m+": Minutes(),                //分
"s+": Seconds(),                //秒
"q+": Math.floor((Month() + 3) / 3), //季度
"S": Milliseconds()            //毫秒
};
if (/(y+)/.test(fmt))
fmt = place(RegExp.$1, (FullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = place(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.ateTime);
return date.Format("yyyy-MM-dd hh:mm:ss");
}}
</script>
第⼆个⽅法，copy来的，不知哪位⼤佬写的 ⽤到了，就⼀到总结在此吧。
关于⾃定义模板，再加⼀个⼩例⼦吧，如下
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 =derText +'<br>';
}else{
//两条记录以上时，
if(i == 0){  //等于0表⽰第⼀条数据，加前缀
strHred = '┌'+derText +'<br>';
}else if(i == len - 1 ){ //此为最后⼀条数据，加前缀
strEnd  = '└'+derText +'<br>';
}else{
//拼接数据
str = str +'  '+derText +'<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查看了下元素，发现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。