先实现个基本用法
1 - 引入js和css
2 - html
<div id="list_left" class="col-md-2 pre-scrollable"> <div class="list_wrap"> <p class="lead">数据列表</p> <div id="jstree"> </div> </div> </div>
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 } } }); };
4 - cs
public JsonResult GetTreeData() { IBaseBll<TableInfo> tableBll = new BaseBll<TableInfo>(); 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); }
5 - 说明
- js中themes是选择的皮肤
- 后台代码中的treeNodes 是封装符合jstree中的