JQ ztree树形菜单筛选插件


JQ ztree树形菜单筛选插件
JQ ztree树形菜单筛选插件以及ztree、树形菜单筛选等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script src="js/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js"></script>
<script src="MtrSearchZTree.js" type="text/javascript"></script>

3. HTML代码

<div class="row" style="margin: 50px;">
	<ul id="tree" class="ztree"></ul>
	<ul id="stree" class="ztree"></ul>
</div>
<script>
	// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
	var setting = {};
	// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
	var zNodes = [{
			name: "test1",
			open: true,
			children: [{
				name: "test1_1"
			}, {
				name: "test1_2"
			}, {
				name: "test1",
				open: true,
				children: [{
					name: "asdf"
				}, {
					name: "vrsa"
				}]
			}]
		},
		{
			name: "test2",
			open: true,
			children: [{
				name: "test2_1"
			}, {
				name: "test2_2"
			}]
		}
	];
	$.fn.zTree.init($("#tree"), setting, zNodes);
	$.fn.zTree.init($("#stree"), setting, zNodes);
	new  MtrSearchZTree();
</script>

相关推荐

发表评论

相关文章