源碼下載:combotree: 基于layui及zTree的樹下拉框組件
鏈接中提供了組件的基本使用方法
框架修改內容
1.文件導入(路徑可更具自身情況自行設定)
解壓后將文件夾放在圖示路徑下,修改文件夾名稱為combotree
2.設置路徑(設置layui use組件的路徑,設置后可直接在use 中使用combotree進行組件調用)
修改文件:\WaterCloud.Web\wwwroot\js\lay-config.js 內容,增加圖示標記內容
3.修改組件源文件(解決組件重復引用錯誤)
修改文件:\WaterCloud.Web\wwwroot\js\lay-module\combotree\combotree.js 內容,按照以下方式
源文件內容(去除extend部分):
4.調用
html:
<div id="elementid"></div>
js:
組件加載
combotree.render({elem: '#elementid', placeholder: '請選擇', isMultiple: false // 是否多選,默認是單選, yChkboxType: 'ps' // 參考zTree該參數, nChkboxType: 'ps' // 參考zTree該參數, expandLevel: '2' // 默認展開的層級, ajaxUrl: '/your/treedata/apipath' // 取得樹數據的url, readonly: false // 是否只讀模式//, layVerify: 'required' // 是否是必選項目, initValue: ''//用于回顯
});
方法:
combotree.getValue('elementid')//獲取組件值
combotree.setValue('elementid',value)//設置組件值
注意:setValue時需要確保組件已初始化完成,否則會報找不到組件的錯誤,一般處理回顯在初始化同時處理數據,使用initValue,其他情況設置值的暫未研究