1、html页面代码:
<div class="easyui-panel" style="padding:5px" id="powerTree"> ???????????????????</div>
2、js代码:
需要返回数据格式如下:
[{"id":1,"parendId":0,"name":"123"},{"id":2,"parentId":1,"name":"456"},{"id":3,"parentId":1,"name":"789"},{"id":4,"parentId":2,"name":"444444"},]
代码如下:
$(‘#powerTree‘).tree({ ???????????url: ‘/Sys/GetRolePower‘, ???????????method: ‘post‘, ???????????checkbox: false,//定义是否在每个节点前边显示复选框 ???????????onBeforeLoad: function (node, param) { ???????????????param.id = id //传参数 ???????????}, ???????????loadFilter: function (rows) { ???????????????return convert(rows.data); ???????????}, ???????????onLoadError: function (ex) { ???????????????$.messager.alert(‘消息‘, "加载失败", ‘error‘); ???????????} ???????});function convert(rows) { ???????rows = JSON.parse(rows);//json转对象 ???????function exists(rows, parentId) { ???????????for (var i = 0; i < rows.length; i++) { ???????????????if (rows[i].id == parentId) return true; ???????????} ???????????return false; ???????} ???????var nodes = []; ???????for (var i = 0; i < rows.length; i++) { ???????????var row = rows[i]; ???????????if (!exists(rows, row.parentId)) { ???????????????nodes.push({ ???????????????????id: row.id, ???????????????????text: row.name ???????????????}); ???????????} ???????} ???????var toDo = []; ???????for (var i = 0; i < nodes.length; i++) { ???????????toDo.push(nodes[i]); ???????} ???????while (toDo.length) { ???????????var node = toDo.shift(); ???????????for (var i = 0; i < rows.length; i++) { ???????????????var row = rows[i]; ???????????????if (row.parentId == node.id) { ???????????????????var child = { id: row.id, text: row.name }; ???????????????????if (node.children) { ???????????????????????node.children.push(child); ???????????????????} else { ???????????????????????node.children = [child]; ???????????????????} ???????????????????toDo.push(child); ???????????????} ???????????} ???????} ???????return nodes; ???}
3、后端代码:
[HttpPost] ???????public JsonResult GetRolePower() ???????{ ???????????int roleId = Convert.ToInt32(HttpContext.Request.Form["id"]); ???????????var treeList = GetData(roleId); ???????????var roleTree = from item in treeList ???????????????????????????????select new ???????????????????????????????{ ???????????????????????????????????id = item.id, ???????????????????????????????????parentId = item.pId, ???????????????????????????????????name = item.Name ???????????????????????????????}; ???????????var data = JsonConvert.SerializeObject(roleTree); ???????????return Json(new { data }, JsonRequestBehavior.AllowGet); ???????}
asp.net mvc easyui tree
原文地址:https://www.cnblogs.com/qk2014/p/9073673.html