layui.tree组件的使用以及搜索节点功能的实现组件的使用以及搜索节点功能的实现
今天小编就为大家分享一篇layui.tree组件的使用以及搜索节点功能的实现,具有很好的参考价值,希望对大家
有所帮助。一起跟随小编过来看看吧
由于项目树形节点比较多需要增加节点搜索功能,所以研究了一下加上社区伙伴的支持,目前功能可以简单实现但细节还需要
修改,添加上了组件的基本使用方法和属性,现在分享出来~
HTML::
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" type="button" lay-demo="getChecked">获取选中节点数据</button>
<button class="layui-btn layui-btn-sm" type="button" lay-demo="setChecked">勾选指定节点</button>
<button class="layui-btn layui-btn-sm" type="button" lay-demo="reload">重载实例</button>
</div>
<div class="demoTable">
<div class="layui-inline">
<input type="text" class="layui-input" id="tree_name" autocomplete="off" />
</div>
<button class="layui-btn" id="btn_query">搜索</button>
</div>
<div id="test1" class="demo-tree demo-tree-box"></div>
JavaScript::
layui.use(['tree', 'util'], function(){
var $ = layui.$;
var tree = layui.tree
,layer = layui.layer
,util = layui.util
//模拟数据
,data1 = [{
title: '江西'
,id: 1
,children: [{
title: '南昌'
,id: 1000
,children: [{
title: '青山湖区'
,id: 10001
},{
title: '高新区'
,id: 10002
}]
},{
title: '九江'
,id: 1001
},{
title: '赣州'
,id: 1002
}]
},{
title: '广西'
,id: 2
,children: [{
title: '南宁'
,id: 2000
},{
title: '桂林'
,id: 2001
}]
},{
title: '陕西'
,id: 3
,children: [{
title: '西安'
,id: 3000
},{
title: '延安'
,id: 3001
}]
},{
title: '四川(可跳转)'
,id: 4
,href: 'https://www.layui.com/'
,children: [{
title: '成都'
,id: 3000