jstree的简单实例最近使⽤到了jstree，感觉是⼀款灵活的、可多项定制的tree插件；
我这边使⽤过程记录下；
参考的jstree api⽹站，以及demo介绍：
js控制滚动条使⽤中的例⼦介绍：
html代码：
<!-- 搜索框 -->
<div class="search_input">
<input type="text" id="search_ay" />
<img src="/sfytj/dist/images/icon/ss_search.png" />
</div>
<!-- 案由列表 -->
<div class="reason_list">
<div id="treeview1" class="treeview">
</div>
</div>
js代码：
1）⽣成jstree：
$("#treeview1").jstree({
'core' : {
"multiple" : false,
'data' : ay_mssys,
'dblclick_toggle': false  //禁⽤tree的双击展开
},
"plugins" : ["search"]
});
var ay_mssys =
[
{
"id": "1",
"text": "民事案由(2008版)",
"state": {
"opened": true,  //展⽰第⼀个层级下⾯的node
"disabled": true  //该根节点不可点击
},
"children":
[
{
"id": "2",
"text": "⼈格权纠纷",
"children":
[
{
"id": "3",
"text": "⼈格权纠纷",
"children": [
{
"id": "4",
"text": "⽣命权、健康权、⾝体权纠纷",
"children":
[
{
"id": "5",
"text": "道路交通事故⼈⾝损害赔偿纠纷"
}
]
}
]
}
]
}
]
}
]
//core：整个jstree显⽰的核⼼，⾥⾯包括多种项配置：
//data：这⾥是使⽤json格式的数据；还可以使⽤html或者ajax请求等
//plugins：这个jstree引⽤了哪些插件
/
/multiple : false 不可多选
2）点击jstree的每个⼦项，获取该节点的text、id等信息：
//tree change时事件
$('#treeview1').on("changed.jstree", function (e, data) {
console.log("The selected nodes are:");
console.de.id);  //选择的node id
console.de.text);  //选择的node text
form_data.ay = ;
form_data.ay_id = de.id;
});
//changed.jstree,jstree改变时发⽣的事件，类似的还有select_node.jstree等，api中有。3）点击jstree⼦项，控制该节点展开、收缩等：
//jstree单击事件
$("#treeview1").bind("select_node.jstree", function (e, data) {
de.id !=1 ){    //排除第⼀个节点(2011民事案由)
le_de); //单击展开下⾯的节点
}
});
4）使⽤插件search搜索（jstree⾃带的插件）：
//输⼊框输⼊定时⾃动搜索
var to = false;
$('#search_ay').keyup(function () {
if(to) {
clearTimeout(to);
}
to = setTimeout(function () {
$('#treeview1').jstree(true).search($('#search_ay').val());
}, 250);
});
以上就是本⽂的全部内容，希望对⼤家有所帮助，同时也希望多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。