先实现个基本用法
1 - 引入js和css
2 - html
class="lead">数据列表
3 - js
//初始化jstree控件
function init_jstree() {
$("#jstree").jstree({
"core": {
'data': {
'url': '/Home/GetTreeData',
'dataType': 'json',
success: function () {
//alert('ok');
}
},
'themes': {
'name': 'proton',
'responsive': true,
"dots": true,
"icons": true
}
}
});
};
View Code
4 - cs
public JsonResult GetTreeData()
{
IBaseBll
var treeNodes = tableBll.QueryAll().Select(m => new
{
id = m.Id,
parent = m.ParentId.ToString() == "0" ? "#" : m.ParentId.ToString(),
text = m.NameCh,
icon = m.TreeIcon
});
return Json(treeNodes, JsonRequestBehavior.AllowGet);
}
View Code
5 - 说明
- js中themes是选择的皮肤
- 后台代码中的treeNodes 是封装符合jstree中的,还有其他属性 详见http://www.cnblogs.com/wuhuacong/p/4759564.html
- 表设计 详见 http://www.cnblogs.com/jeffwongishandsome/archive/2010/10/26/1861633.html 评论里有更加方案
jstree的两个基本事件
1 - changed.jstree
$('#jstree').on("changed.jstree", function (e, data) {
//data.node是点击的节点信息,点击节点之后的逻辑都在这里处理
init_TableInfo(data.node.id);
var param = { TableId: data.node.id }
table.settings()[0].ajax.data = param;
table.ajax.reload();
$(".introWrap").css("display", "none");
});
View Code
2 - ready.jstree
$("#jstree").on("ready.jstree", function (event, data) {
data.instance.open_node(1); // 展开root节点
//// 隐藏根节点 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree
$("#1_anchor").css("visibility", "hidden");
$("li#1").css("position", "relative");
$("li#1").css("top", "-20px");
$("li#1").css("left", "-20px");
$(".jstree-last .jstree-icon").first().hide();
});
View Code
3 - 说明
- changed中可以获取到所点击节点的所有信息,可以做逻辑判断
- ready是所有节点加载完成后触发的,在这里我隐藏了根目录
- jstree官网 https://www.jstree.com/
- 借鉴 https://www.cnblogs.com/ibgo/p/4025036.html