LayUI⑷：模板语法

　　打算快快使用LayUI开发一个程序熟悉一下LayUI，后面的开发使用Element+Vue。

　　使用LayUI+PHP开发了一个资产清查的小程序，大概1个星期，还可以，主要是LayUI功能完备、使用方便。

　　经过一段时间使用后，发现LayUI真的很好，对付一些中小型程序的确是方便快速。这有点像被淘汰的PowerBuilder，功能强大，对开发者做到足够的友好。

　　今天用到表格里的字段显示，就是视图与数据的关系，数据是可以有多种样式的，类似于PowerBuilder的数据窗口中样式多样化，数据库也是一样的，数据表与视图。

　　LayUI也使用模板语法即可完成。

　　比如c06字段是编码字段，数据类似于01、02、03、04......，想让它显示不同的结果，可以这样来写：

<script type="text/html" id="convertType1">
    {{#       if(d.c06=='01'){         }}
			<div>经理党委办公室</div>
    {{#       }     }}
    {{#       if(d.c06=='04'){         }}
			<div>财务科</div>
    {{#       }     }}
    {{#       if(d.c06=='03'){         }}
			<div>人事（组织）科</div>
    {{#       }     }}	
</script>

　　表格中，添加引用：

        table.render({
            elem: '#currentTableId',
            url: 'ZTBUser.php',
			method:'POST',
			where:{"OP":"列表"},			
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports'],
            cols: [[
                {type: "checkbox", width: 40},
                {field: 'c01', width: 160, title: '数据库ID', sort: true},
                {field: 'c02', width: 120, title: '用户名'},
                {field: 'c03', width: 120, title: '密码'},
                {field: 'c04', width: 120, title: '类型'},
                {field: 'c05', width: 160, title: '单位名'},
                {field: 'c06', width: 400, title: '编码',align:'left',templet:'#convertType1' },	//引用			
                {field: 'c07', width: 120, title: '岗位'},
                {field: 'c08', width: 160, title: '邮件帐号'},				
                {title: '操作',width: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5,10],
            limit: 15,
            page: true,
            skin: 'line',
			done: function (res, curr, count) {
				//渲染
				//setTimeout(function(){	element.render(); },1000);				
				$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
			}						
        });

　　这么写有点别扭，可以替换为：

<script type="text/html" id="convertType1">
    {{#    if(d.c06=='01'){	return '<div>经理党委办公室</div>'	}	}}
    {{#    if(d.c06=='03'){	return '<div>人事（组织）科</div>'	}	}}
    {{#    if(d.c06=='04'){	return '<div>财务科</div>'	}	}}
</script>

　　更进一步，这里返回的HTML元素（可以包涵样式），可以替换为：

<script type="text/html" id="convertType3">
    {{#    if(d.c05=='经理（党委）办公室'){	return "<div class='layui-input-inline'><input type='text' name='Dc02' id='Dc02'  lay-verify='required' lay-reqtext='用户名称不能为空'  value='' class='layui-input'></div>";	}	}}
    {{#    if(d.c05=='人事（组织）科'){	return "<div class='layui-input-inline'><select lay-filter='C26_List' id='C26' name='C26'><option value='' >请选择状态</option><option value='计算机'>计算机</option><option value='打印机'>打印机</option><option value='网络设备'>网络设备</option><option value='自动化设备'>自动化设备</option><option value='其他设备'>其他设备</option></select></div>";	}	}}
    {{#    if(d.c05=='财务科'){	return "<div class='layui-input-inline' id='UserType'><input type='radio' name='Dc04' value='管理员' title='管理员' ><input type='radio' name='Dc04' value='文件审核' title='文件审核' checked='true'><input type='radio' name='Dc04' value='普通用户' title='普通用户'></div>";	}	}}
    {{#    if(d.c05=='计划经营科'){	return "<div class='layui-input-inline'><input type='checkbox' id='EC08' lay-skin='primary' ></div>";	}	}}		
    {{#    if(d.c05=='生产科'){	return "<div class='layui-form-item'><div class='layui-input-block'><div id='EC11'></div></div></div>";	}	}}			
</script>

　　这样根据同一行中不同的数据，编码字段就显示不同的HTML元素，有下拉框、输入框、单选框等等，可以有很多种选择去实现不一样的想法。

 　　很多开发工具的原理、功能以及使用方式都有相近之处，基于用户（开发者）友好体验的好想法肯定是被继承的，随着技术的发展通过重构和迭代有了更丰富和完整的实现。这很大程序上降低了我们的学习成本，可以很快地上手。

　　当然，可以实现表格的在线编辑了，这个我还没有去试验，应该是可以的。

　　模板语法还有很多其他的用处，后面再更新。

　　①　2022年3月26日