Layui树形组件文档 - layui.tree

layuiAdmin 管理员 iframe 框

layui.config({

base: '../layuiadmin/' //静态资源所在路径

}).extend({

index: 'lib/index' //主入口模块

}).use(['index', 'form','tree'], function(){

var $ = layui.$,

form = layui.form;

var tree = layui.tree;

//渲染

var inst1 = tree.render({

id:'demoId',//设定实例唯一索引，用于基础方法传参使用。

showCheckbox:true,//是否显示复选框

// edit:['add', 'update', 'del'],//是否开启节点的操作图标。默认 false。若为 true，则默认显示“改删”图标 若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如： edit: ['add', 'update', 'del']

accordion:false,//是否开启手风琴模式，默认 false

onlyIconControl:false,//是否仅允许节点左侧图标控制展开收缩。默认 false(即点击节点本身也可控制)。若为 true，则只能通过节点左侧图标来展开收缩

isJump:false,//是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数(值为 url 格式)

showLine:tree,//是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。

elem: '#test1' //绑定元素

,data: [{

id:1,//节点唯一索引值，用于对指定节点进行各类操作

title: '江西', //一级菜单

href:'www.baidu.com',

spread:true

,children: [{

id:12,

title: '南昌' //二级菜单

,children: [{

id:121,

title: '高新区', //三级菜单

checked:false,//节点是否初始为选中状态(如果开启复选框的话)，默认 false

disabled:false//节点是否为禁用状态。默认 false

}]

}]

}]

,click: function(obj){//在节点被点击后触发，返回的参数如下：

console.log('得到当前点击的节点数据；'+obj.data); //得到当前点击的节点数据

console.log('得到当前节点的展开状态；'+obj.state); //得到当前节点的展开状态：open、close、normal

console.log('得到当前节点元素；'+ obj.elem); //得到当前节点元素

console.log('当前节点下是否有子节点；'+obj.data.children); //当前节点下是否有子节点

},

oncheck: function(obj){//点击复选框时触发，返回的参数如下：

console.log(obj.data); //得到当前点击的节点数据

console.log(obj.checked); //得到当前节点的展开状态：open、close、normal

console.log(obj.elem); //得到当前节点元素

},

operate: function(obj){//通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点

var type = obj.type; //得到操作类型：add、edit、del

var data = obj.data; //得到当前节点的数据

var elem = obj.elem; //得到当前节点元素

console.log('operate函数实现：'+type);

//Ajax 操作

var id = data.id; //得到节点索引

if(type === 'add'){ //增加节点

//返回 key 值

return 123;

} else if(type === 'update'){ //修改节点

console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容

} else if(type === 'del'){ //删除节点

};

}

});

//获得选中的节点

var checkData = tree.getChecked('demoId');

console.log("--选中的节点："+checkData);

//执行节点勾选

tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点

tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

//可以重载所有基础参数

tree.reload('demoId', {

//新的参数

showCheckbox:false

});

});

文档：https://www.layui.com/doc/modules/tree.html#data