layui table 上面的switch開關切換，並獲取表格裡所有資料

場景需求：

在layui.table上面渲染後的列表上面加一個switch開關，監聽switch開關的動作，實現本列資料的狀態切換！

配圖：

資料表格配置引數 layui.table.options.cols 配置如下、重點看state那一行

table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //資料介面
    ,page: true //開啟分頁
    ,cols: [[ //表頭
      {field: 'id', title: 'ID', width:80, sort: true
 
, fixed: 'left'}
      ,{field: 'username', title: '使用者名稱', width:80}
      ,{field: 'sex', title: '性別', width:80, sort: true}
      ,{field:'state', title:'啟用狀態', width:80,templet:"#switchTpl"}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '簽名', width: 177}
      ,{field: 
 
'experience', title: '積分', width: 80, sort: true}
      ,{field: 'score', title: '評分', width: 80, sort: true}
      ,{field: 'classify', title: '職業', width: 80}
      ,{field: 'wealth', title: '財富', width: 135, sort: true}
    ]]
  });

switchTpl程式碼段：

<script id="switchTpl" type="text/html">
    <input type="checkbox"  name="state"  value = {{d.state}} lay-skin="switch" lay-text="開啟|關閉" lay-filter="state" {{ d.state == '0' ? 'checked' : '' }}>
</script>

再寫一段JS，監聽switch的選中事件

  form.on('switch(state)', function(obj){
    //根據業務判斷是開啟還是關閉
    var state = obj.elem.checked?0:1;
    //方法一取資料（根據相對位置取）
    var id = obj.othis.parents('tr').find("td :first").text();
    //方法二取資料 （根據索引table.cache裡面的行資料）
    var index  = obj.othis.parents('tr').attr("data-index");
    var id = tableData[index].id;
        
    $.get("/demo/table/user/",{"id":id,"state":state},function (res) {
        if(res.code != '0'){
            layer.msg(res.msg);
        }
    });
  });

如果需要的資料在列表上顯示，可以直接用方法一，如果不在則可以用方法二取資料；

上面程式碼中的tableData為事先定義好的物件

var tableData;

該引數在 table.render 的時候賦值（在上面的table.render方法引數裡面，再加上這兩句賦值）：

,id:"tableIns"
,done:function(){
    tableData = table.cache.tableIns;
}