zoukankan      html  css  js  c++  java
  • asp.net mvc easyui tree

    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);
            }
  • 相关阅读:
    sql
    Java 反射
    Java 泛型
    Java 数组小记
    Java 实现二叉树
    Maven的环境配置
    用于解决easui 保存时候,前台传参是空字符串不null
    SpringMVC
    SpringMVC
    解决MySql varchar类型的数字排序
  • 原文地址:https://www.cnblogs.com/qk2014/p/9073673.html
Copyright © 2011-2022 走看看