原文鏈接:https://blog.csdn.net/wyp_comeon/article/details/81735951
關於表格解析自定義單元格的解析參數請先詳細查看官方文檔:http://www.layui.com/doc/modules/table.html#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' : '' }}> <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}> <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' : '' }}> <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}> <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' : '' }}> <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="處理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}> <input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已處理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}> {{# } }} </script>
一定要每一組的name值不一樣才可以達到單選和修改的效果哦~
最后通過監聽單元框的值變化就可以調用ajax異步請求將當前選中的行的id和狀態傳到后台達到修改的目的!