layui拓展组件Eletree的使用
第一步:
引入css、js
<link rel="stylesheet" href="../../layui/css/eleTree.css">
<script src="../../layui/layui.js" charset="utf-8"></script>
第二步:
html:
<div class="eleTree ele1" lay-filter="data1"></div>
js:
<script>
layui.config({
base: "lay/mymodules/" //模块的所在路径
}).use([ 'eleTree', 'code', 'form'], function() {
var $ = eleTree = layui.eleTree,
code = layui.code,
form = layui.form;
//var Treedata= [
// {
// id: 1,
// label: "安徽省",
// children: [
// {
// id: 2,
// label: "马鞍山市",
// children: [
// {
// id: 3,
// label: "和县",
// },
// {
// id: 4,
// label: "花山区",
// }
// ]
// }
// ]
// },
// {
// id: 5,
// label: "河南省",
// children: [
// {
// id: 6,
// label: "郑州市"
// }
// ]
// }
//];
var el = eleTree.render({
elem: '.ele1', //指定原始 table 容器的选择器或 DOM
url: 'http://192.168.1.146/hsdhasj', // 异步数据接口
//url:‘tree.json’ //或者模拟数据
// data: Treedata,//本地的数据,写在layui.config
//contextmenuList: ["copy", "add", "edit", "remove"], // 启用右键菜单,支持的操作有:"copy","add","edit","remove"
highlightCurrent: true, // 是否高亮当前选中节点,默认值是 false。
accordion: false, //是否每次只打开一个同级树节点展开(手风琴效果)
renderAfterExpand: true, //是否在第一次展开某个树节点后才渲染其子节点
emptText: "暂无数据", // 内容为空的时候展示的文本
expandOnClickNode: false,
// showCheckbox: true,
method: "POST",
where: {
token: token
},
defaultExpandedKeys: [
2 //id
], // 默认展开的节点的 key 的数组
request: { //对于后台数据重新定义名字
name: "label",
key: "id",
children: "children",
checked: "checked",
disabled: "disabled"
// isLeaf: "isLeaf"
},
response: { //对后台返回的数据格式重新定义
statusName: "status",
statusCode: 1,
dataName: "data"
},
done: function(res) { //数据请求完成的回调函数,只有异步请求才会有
// res即为你接口返回的信息。
console.log(res);
},
});
// 节点点击事件
eleTree.on("nodeClick(data1)", function(d) {
console.log(d.data.currentData.id); // 点击节点对应的数据
console.log(d.event); // event对象
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
},
where: {
token: token,
groupId: d.data.currentData.id //设定异步数据接口的额外参数
}
});
});```