layui實(shí)現(xiàn)checkbox的目錄樹tree的例子
更新時(shí)間：2019年09月12日 09:59:01 作者：weixin_39703044
今天小編就為大家分享一篇layui實(shí)現(xiàn)checkbox的目錄樹tree的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
廢話不多說(shuō)啦，我就直接上代碼吧，需要的朋友可以過來(lái)參考下
layui.use([ 'tree' ], function() {
$ = layui.jquery;
form = layui.form;
//獲取節(jié)點(diǎn)數(shù)據(jù)
getTreeData();
});
function getTreeData()
{
$.ajax({
url : path+"/RoleController/getResourceTree.do",
type : "post",
dataType : "json",
data :{
"roleId":roleId,
"id":null,
"t":Math.random()
} ,
error : function() {
},
success : function(data) {
treeData = JSON.stringify(data);
initMenuTree();
}
});
}
// 加載列表
function initMenuTree() {
//json數(shù)姐轉(zhuǎn)換成對(duì)象
treeData = eval( "(" + treeData + ")" );
//console.log(treeData);
// 執(zhí)行渲染
treeIns = layui.tree({
elem: '#demo', //指定元素，生成的樹放到哪個(gè)元素上
check: 'checkbox', //勾選風(fēng)格
skin: 'as', //設(shè)定皮膚
drag: true,//點(diǎn)擊每一項(xiàng)時(shí)是否生成提示信息
checkboxName: 'aa[]',//復(fù)選框的name屬性值
checkboxStyle: "",//設(shè)置復(fù)選框的樣式，必須為字符串，css樣式怎么寫就怎么寫
click: function(item) { //點(diǎn)擊節(jié)點(diǎn)回調(diào)
//alert(item);
},
change: function (item){//當(dāng)當(dāng)前input發(fā)生變化后所執(zhí)行的回調(diào)
//console.log(item);
resourceIds=item;
},
data: {//為元素添加額外數(shù)據(jù)，即在元素上添加data-xxx="yyy"，可選
hasChild: true
},
nodes:treeData
});
return treeIns;
}
以上這篇layui實(shí)現(xiàn)checkbox的目錄樹tree的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼
這篇文章主要介紹了javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JS 替換和時(shí)間插件的結(jié)合使用代碼，需要的朋友可以參考下2013-07-07
這篇文章主要介紹了javascript框架設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2021-09-09
js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串
這篇文章主要介紹了javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串,涉及Math.random()和Math.floor()兩個(gè)函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了兩種方法在前端實(shí)現(xiàn)本地表格導(dǎo)出功能,分別是插件方式和本地直接導(dǎo)出,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
uniapp 如何設(shè)置 tabbar 的 midButton 按鈕
在UniApp開發(fā)中,設(shè)置TabBar的midButton按鈕可以增加用戶交互的便利性,本文介紹了在App.vue中監(jiān)聽事件的方法,并提供了官方文檔鏈接作為參考,通過這種方式可以實(shí)現(xiàn)TabBar中的特殊按鈕功能,提升應(yīng)用的用戶體驗(yàn)2024-10-10
前端TypeScript時(shí)間格式化函數(shù)舉例詳解
這篇文章主要介紹了前端TypeScript時(shí)間格式化函數(shù)的相關(guān)資料,包括日期格式化formatDate、獲取周數(shù)getWeek、相對(duì)時(shí)間格式化formatPast、時(shí)間問候語(yǔ)formatAxis以及日期時(shí)間格式化parseTime和parseDate,每個(gè)方法都有詳細(xì)的參數(shù)說(shuō)明和示例,需要的朋友可以參考下2025-02-02
在使用ECharts繪制折線圖時(shí),為了豐富圖表的視覺表達(dá),設(shè)計(jì)師們常常會(huì)為視圖搭配上不同的圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Echarts自定義圖形的方法參考,需要的朋友可以參考下2023-02-02
JavaScript組合模式Composite Pattern
這篇文章主要介紹了學(xué)習(xí)理解JavaScript組合模式，組合模式及Composite Pattern又叫部分整體模式，是用于把一組相似的對(duì)象當(dāng)作一個(gè)單一的對(duì)象2022-04-04