注:① 第六点附上部分代码,请自行添加css和js以及模块加载脚本,自行动手会理解的更好,同时为自己做个使用记录!
② 特殊字段没有写<script>,因为和普通字段是一样的,就当是练习题咯。
③ 由于本人不太熟练JS,因此只能用笨方法写script渲染,下拉菜单只要在判断正确时,标签中添加 selected 即是默认选中状态还不会更改下拉菜单的顺序,(你可以试试不添加,对比下结果)
这是效果图:
1、先定义表格, lay-filter——过滤器,能够准确定位是哪个页面标签触发事件,在表格渲染 JS中会使用
<table class="layui-hide" id="door-status" lay-filter="demoEvent"></table>
2、嵌套时间 id="dateTpl" 对应表格cols中的 field: 's_time', title: '状态起始时间', width: 230, templet: "#dateTpl",
,目的是为了告诉表格,此字段用户使用自定义模板渲染数据
<script type="text/html" id="dateTpl">
{
{# if(d.s_time !=''){ }}
<input type="text" class="layui-input layui-input-date" value="{
{d.s_time}}">
{
{# } else { }}
<input type="text" class="layui-input layui-input-date" placeholder="HH:mm">
{
{# } }}
</script>
3、嵌套下拉菜单
<script type="text/html" id="selectTpl">
<!--<div class="layui-input-block">-->
<select name="interest" id="s_status">
{
{# if(d.status == 1){ }}
<option value=0>无效</option>
<option value={
{d.status}} selected>无状态
</option>
<option value=2>打开</option>
<option value=3>加密</option>
<option value=4>关闭</option>
{
{# } else if(d.status == 2) { }}
<option value=0>无效</option>
<option value=1>无状态</option>
<option value={
{d.status}} selected>打开</option>
<option value=3>加密</option>
<option value=4>关闭</option>
{
{# } else if(d.status == 3) { }}
<option value=0>无效</option>
<option value=1>无状态</option>
<option value=2>打开</option>
<option value={
{d.status}} selected>加密</option>
<option value=4>关闭</option>
{
{# } else if(d.status == 4) { }}
<option value=0>无效</option>
<option value=1>无状态</option>
<option value=2>打开</option>
<option value=3>加密</option>
<option value={
{d.status}} selected>关闭</option>
{
{# } else { }}
<option value={
{d.status}} selected>无效</option>
<option value=1>无状态</option>
<option value=2>打开</option>
<option value=3>加密</option>
<option value=4>关闭</option>
{
{# } }}
</select>
</script>
4、嵌套徽章(1、解释下为什么看起来代码很冗余,因为本人并不熟练js,只能根据data做判断;
2、若字段值=0则不变色,字段值=1则是选中状态,同时更改class)
<script type="text/html" id="weekend">
{
{# if(d.nomal_w6 == 0){ }}
<span class="layui-badge sel-dategrp layui-bg-gray"
lay-event="set_select" value={
{d.nomal_w6}}>日</span>
{
{# } else { }}
<span class="layui-badge sel-dategrp layui-bg-blue"
lay-event="set_select" value={
{d.nomal_w6}}>日</span>
{
{# } }}
{
{# if(d.nomal_w0 == 0){ }}
<span class="layui-badge sel-dategrp layui-bg-gray"
lay-event="set_select" lay-href="data" value={
{d.nomal_w0}}>一</span>