關於layui表格渲染templet解析單元格的問題

關於layui表格渲染templet解析單元格的問題

然后我簡單說一下 templet - 自定義列模板 我在項目中遇到的解析問題：
在解析單元格的時候自定義列為這樣：

{field: 'tpye', title: '所屬類別', align:"center",templet:'#typeBar'}

我們通常這樣簡單的解析像這樣也沒什么毛病：

<script type="text/html" id="typeBar">
     {{#  if(d.tpye == 1){ }}
     系統優化
     {{#  }else if(d.tpye==2){ }}
     使用中問題
     {{# }else { }}
     使用中問題
     {{# } }}
 </script>

 

但是如果你的解析類別只有兩類的話還可以直接在行內簡單一點寫：

{field: 'ordertype', title: '訂單類型', align:'center',templet:function(d){
     return d.ordertype == "elvan" ? "代購" : "私有";
}},

 

昨天我遇到的情況比較特殊，不僅是要顯示還需要在單元格上進行修改狀態：
效果如下圖：

　　

 

 

所以解析的時候需要在判斷的時候加入單選按鈕框然后還要為其添加不一樣的name值，代碼如下：

 <script type="text/html" id="stateBar">
        {{#  if(d.state == '0'){ }}
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0 ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已處理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
        {{#  } else if(d.state == '1') { }}
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0 ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已處理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
        {{#  } else  { }}
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0  ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1  ? 'checked' : '' }}>&nbsp;
        <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已處理" lay-filter="lockDemo" {{ d.state==2  ? 'checked' : '' }}>
        {{#  }
        }}
    </script>

一定要每一組的name值不一樣才可以達到單選和修改的效果哦~

 

操作里的是否啟用：

 

 

 <script type="text/html" id="tableBar">
        {{#  if(d.enabled == true){ }}
            <a class="layui-btn layui-btn-xs" lay-event="isEnter">停用</a>
        {{#  } else { }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="isEnter">啟用</a>
        {{#  } }}
        <a class="layui-btn layui-btn-xs" lay-event="dataTableEdit">編輯</a>
    </script>