018-树形组件
1. 模塊加載名稱: tree。
2. 核心方法
2.1. 通過tree.render(options)方法指定一個元素, 便可快速創建一個tree實例。
3. 基礎參數
3.1. 目前tree組件提供以下基礎參數, 可根據需要進行相應的設置:
4. 數據源屬性選項
4.1. 我們將data參數稱之為數據源, 其內部支持設定以下選項:
5. 節點被點擊的回調 - click
5.1. 在節點被點擊后觸發, 返回的參數如下:
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器 ,click: function(obj) {console.log(obj.data); // 得到當前點擊的節點數據console.log(obj.state); // 得到當前節點的展開狀態: open、close、normalconsole.log(obj.elem); // 得到當前節點元素console.log(obj.data.children); // 當前節點下是否有子節點}});}); </script>6. 復選框被點擊的回調 - oncheck
6.1. 點擊復選框時觸發, 返回的參數如下:
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器 ,oncheck: function(obj) {console.log(obj.data); // 得到當前點擊的節點數據console.log(obj.checked); // 得到當前節點的展開狀態: open、close、normalconsole.log(obj.elem); // 得到當前節點元素}});}); </script>7. 操作節點的回調 - operate
7.1. 通過operate實現函數, 對節點進行增刪改等操作時, 返回操作類型及操作節點:
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器 ,operate: function(obj){var type = obj.type; // 得到操作類型: add、edit、delvar data = obj.data; // 得到當前節點的數據var elem = obj.elem; // 得到當前節點元素// Ajax操作var id = data.id; // 得到節點索引if (type === 'add') { // 增加節點} else if (type === 'update') { // 修改節點console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的內容} else if (type === 'del') { // 刪除節點}}});}); </script>8. 返回選中的節點數據
8.1. 很多時候tree可能不僅僅只是一個樹菜單, 它還用于各種權限控制等場景, 這個時候你需要獲得選中的節點。
8.2. 語法: tree.getChecked(id)
8.3. 實例
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器,id: 'address' // 設定實例唯一索引, 用于基礎方法傳參使用});// 獲得選中的節點var checkData = tree.getChecked('address');}); </script>9. 設置節點勾選
9.1. 除了通過checked參數對節點進行初始勾選之外, 你還可以通過方法動態對節點執行勾選。
9.2. 語法: tree.setChecked(id, checkedId), 參數checkedId: 代表的是數據源中的節點id。?
9.3. 實例
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器,id: 'address' // 設定實例唯一索引, 用于基礎方法傳參使用});// 執行節點勾選tree.setChecked('address', 10000103); // 單個勾選id為10000103的節點tree.setChecked('address', [10000104, 10000105]); // 批量勾選id為10000104, 10000105的節點}); </script>10. 實例重載
10.1. 重載一個已經創建的組件實例, 被覆蓋新的基礎屬性:
<script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器,id: 'address' // 設定實例唯一索引, 用于基礎方法傳參使用});// 可以重載所有基礎參數tree.reload('address', {// 新的參數});}); </script>11. 例子
11.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>樹形 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div><script type="text/javascript">layui.use(['tree'], function() {var tree = layui.tree;// 渲染tree.render({elem: '#test1' // 指向容器選擇器,id: 'address' // 設定實例唯一索引, 用于基礎方法傳參使用,showCheckbox: true // 是否顯示復選框,edit: ['add', 'update', 'del'] // 是否開啟節點的操作圖標,accordion: true // 是否開啟手風琴模式,onlyIconControl: false // 是否僅允許節點左側圖標控制展開收縮,isJump: true // 是否允許點擊節點時彈出新窗口跳轉,showLine: true // 是否開啟連接線,text: { // 自定義各類默認文本defaultNodeName: '未命名' // 節點默認名稱,none: '無數據' // 數據為空時的提示文本} ,click: function(obj) {console.log(obj.data); // 得到當前點擊的節點數據console.log(obj.state); // 得到當前節點的展開狀態: open、close、normalconsole.log(obj.elem); // 得到當前節點元素console.log(obj.data.children); // 當前節點下是否有子節點},oncheck: function(obj) {console.log(obj.data); // 得到當前點擊的節點數據console.log(obj.checked); // 得到當前節點的展開狀態: open、close、normalconsole.log(obj.elem); // 得到當前節點元素},operate: function(obj){var type = obj.type; // 得到操作類型: add、edit、delvar data = obj.data; // 得到當前節點的數據var elem = obj.elem; // 得到當前節點元素// Ajax操作var id = data.id; // 得到節點索引if (type === 'add') { // 增加節點} else if (type === 'update') { // 修改節點console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的內容} else if (type === 'del') { // 刪除節點}},data: [{title: '河南省' // 一級菜單,id: 1000,children: [{title: '鄭州市' // 二級菜單,id: 100001,children: [{title: '二七區' // 三級菜單,id: 10000101,field: 'area',href: 'https://www.baidu.com',spread: true,checked: true,children: [{title: '城區',id: 1000010101},{title: '大學路街道',id: 1000010102}]},{title: '鄭州經濟技術開發區' // 三級菜單,id: 10000102,href: 'https://www.baidu.com'},{title: '鄭州航空港經濟綜合實驗區' // 三級菜單,id: 10000103,href: 'https://www.baidu.com'},{title: '鄭東新區' // 三級菜單,id: 10000104,href: 'https://www.baidu.com'},{title: '中原區' // 三級菜單,id: 10000105,href: 'https://www.baidu.com'},{title: '鄭州高新技術產業開發區' // 三級菜單,id: 10000106,href: 'https://www.baidu.com',disabled: true}]}]},{title: '陜西省' // 一級菜單,children: [{title: '西安市' // 二級菜單}]}]});// 獲得選中的節點var checkData = tree.getChecked('address');// 執行節點勾選tree.setChecked('address', 10000103); // 單個勾選id為10000103的節點tree.setChecked('address', [10000104, 10000105]); // 批量勾選id為10000104, 10000105的節點}); </script></body> </html>11.2. 效果圖
總結
