打算快快使用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日