layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
layui2.3版本,本身并不帶有復(fù)選框回顯功能,那么需要從源頭解決此事,F(xiàn)12代碼調(diào)試,找到與復(fù)選框關(guān)聯(lián)的地方發(fā)現(xiàn):
我們只需要在渲染數(shù)據(jù)回調(diào)時找到每個復(fù)選框根據(jù)數(shù)據(jù)的不同來設(shè)置回顯。
layui這里有一個坑,設(shè)置class屬性后會造成二次點擊效果,千萬不要手動修改class屬性,那么應(yīng)該怎么辦呢?
每次**點擊**其中一個復(fù)選框時都會增加一個class屬性,第二次點擊又會給刪除:
table.render({ elem: '#LAY_table_topic', url: '/admin/topicHandle/getTopicList', height: 600, done:function(result,currPage,count){//數(shù)據(jù)回調(diào)方法 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: '話題內(nèi)容', width: 260 }, { field:'read_total', title: '閱讀次數(shù)', width: 100 , sort:true}, ]], id: 'topicList', page: true });
以上這篇layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- layui實現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)
- 解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題
- 解決element ui select下拉框不回顯數(shù)據(jù)問題的解決
- vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼
- 詳解SpringMVC如何進行數(shù)據(jù)回顯
- Android開發(fā)之完成登陸界面的數(shù)據(jù)保存回顯操作實例
- Android TableLayout數(shù)據(jù)列表的回顯清空實現(xiàn)思路及代碼
- Springmvc數(shù)據(jù)回顯實現(xiàn)原理實例解析
相關(guān)文章
JavaScript導(dǎo)出CSV文件不完整的問題解決方法
在JavaScript中處理CSV文件時,需要特別注意一些特殊字符,例如逗號、雙引號、換行符等,這些字符可能會影響CSV文件的解析,導(dǎo)致數(shù)據(jù)錯亂,所以本文給大家介紹了如何解決JavaScript導(dǎo)出CSV文件不完整的問題,需要的朋友可以參考下2024-06-06js獲取URL的參數(shù)的方法(getQueryString)示例
getQueryString方法默認(rèn)返回的是 string如果是int類型,則JS使用的時候,要進行轉(zhuǎn)換一下,下面有個不錯的示例,大家可以參考下2013-09-09Ajax實現(xiàn)省市區(qū)三級聯(lián)動實例代碼
這篇文章介紹了Ajax實現(xiàn)省市區(qū)三級聯(lián)動的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04js中的面向?qū)ο笾畬ο蟪R妱?chuàng)建方法詳解
這篇文章主要介紹了js中的面向?qū)ο笾畬ο蟪R妱?chuàng)建方法,結(jié)合實例形式較為詳細(xì)的分析了JavaScript創(chuàng)建對象的四種常用方式,需要的朋友可以參考下2019-12-12