layui表格數據複選框回顯設置方法

今天小編就爲大家分享一篇layui表格數據複選框回顯設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

layui2.3版本，本身並不帶有複選框回顯功能，那麼需要從源頭解決此事，F12代碼調試，找到與複選框關聯的地方發現：

我們只需要在渲染數據回調時找到每個複選框根據數據的不同來設置回顯。

layui這裏有一個坑，設置class屬性後會造成二次點擊效果，千萬不要手動修改class屬性，那麼應該怎麼辦呢？

每次**點擊**其中一個複選框時都會增加一個class屬性，第二次點擊又會給刪除：

table.render({
 elem: '#LAY_table_topic',
 url: '/admin/topicHandle/getTopicList',
 height: 600,
 done:function(result,currPage,count){//數據回調方法
 var data = result.data;
 
 data.forEach(function(value, key) {
  //這裏必須選擇點擊方法，不知爲何添加layui-form-checked class屬性會造成二次點擊（即下次點擊必須點擊兩下才能生效）bug，
  //所有類似的手動修改class貌似都會造成二次效果
  if(value.read_total > 10){
  $("div[lay-id='topicList'] td .layui-form-checkbox").eq(key).click();
  }
 })
 },
 cols: [[
 { type:'checkbox'},
 { field:'id', title: '話題ID', width: 80 },
 { field:'image_url', title: '圖片', width: 100 , templet:"#showPic"},
 { field:'content', title: '話題內容', width: 260 },
 { field:'read_total', title: '閱讀次數', width: 100 , sort:true},
 ]],
 id: 'topicList',
 page: true
});

以上這篇layui表格數據複選框回顯設置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持神馬文庫。