本文主要是介绍jsTree的基本使用方法以及按需装载子节点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本文主要内容：
一、jsTree的基本使用方法；
二、按需装载子节点，即每次展开某节点时，才去服务器装载其子节点。
jsTree是基于jQuery的一个树形插件，该项目主页：http://www.jstree.com/
本文使用版本为 jsTree - v3.3.2 - 2016-08-15 - (MIT)，主要参考文档在下载包里的documentation.html文件。
jsTree的基本使用方法：
一、 在页面导入必要的库文件
基本的使用只需要jquery.js和jquery.tree.js两个文件，都在jsTree的下载包里，不同版本的jsTree需要导入的库文件可能不同。
<script type="text/javascript" src="/Content/javascript/jsTree/jquery.js"></script>
<script type="text/javascript" src="/Content/javascript/jsTree/jquery.tree.js"></script>
二、前端Html代码
<div id="myTree"></div>
三、 前端JS代码
<script type="text/javascript">
(function () {
$("#myTree").jstree({
'core': {
data: {
'url': '/mpa/PrivateFolder/GetFolder',
'data': function (node) {
return { 'id': node.id };
},
"success": function (data) {
folderTree.setUnitCount(data.length);
return data;
}
},
multiple: false,
check_callback: function (operation, node, node_parent, node_position, more) {
return true;
}
},
types: {
"default": {
"icon": "fa fa-folder tree-item-icon-color icon-lg"
},
"file": {
"icon": "fa fa-file tree-item-icon-color icon-lg"
}
},
plugins: [
'types',
'wholerow',
'json_data'
]
}).on('changed.jstree', function (e, data) {
if (data.selected.length != 1) {
folderTree.selectedFolder.set(null);
} else {
var selectedNode = data.instance.get_node(data.selected[0]);
}
});
})();
</script>
四、后台 controller 中的代码
public async Task<JsonResult> GetFolder(string id)
{
GetPrivateFoldersInput input = new GetPrivateFoldersInput();
if (id == "#")
{
input.ParentId = null;
}
else
{
input.ParentId = long.Parse(id);
}
JsonResult result = new JsonResult();
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
var list = await _folderAppService.GetPrivateFolders(input);
var items = list.Items.Select(o => new TreeNode()
{
id = o.Id.ToString(),
parent = o.ParentId == null ? "#" : o.ParentId.ToString(),
text = "<span title=\"" + o.DisplayName + "\" data-ou-id=\"" + o.Id.ToString() + "\">" + o.DisplayName + " (<span class=\"ou-text-member-count\">" + o.FileCount + "</span>) </span>",
children = o.ChildCount > 0 ? true : false
}).ToList();
result.Data = items;
return result;
}
五、JSTree 的节点发生变化后刷新节点
$("#myTree").jstree('refresh');
这篇关于jsTree的基本使用方法以及按需装载子节点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
