zoukankan      html  css  js  c++  java
  • MVC4中EasyUI Tree异步加载JSON数据生成树

     

    1,首先构造tree接受的格式化数据结构MODEL

         /// <summary>

         /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递

         /// </summary>

         // [DataContract]

        [Serializable]

        public class EasyTreeData

        {

            /// <summary>

            /// ID

            /// </summary>

           //  [DataMember]

            public string id { get; set; }

     

            /// <summary>

            /// 节点名称

            /// </summary>

           // [DataMember]

            public string text { get; set; }

           

            /// <summary>

            /// 是否展开

            /// </summary>

            //[DataMember]

            public string state  { get; set; }

     

            /// <summary>

            /// 图标样式

            /// </summary>

           // [DataMember]

            public string iconCls { get; set; }

     

     

            /// <summary>

            /// 子节点集合

            /// </summary>

          //  [DataMember]

            public List<EasyTreeData> children { get; set; }

           

            /// <summary>

            /// 默认构造函数

            /// </summary>

            public EasyTreeData()

            {

                this.children = new List<EasyTreeData>();

                this.state = "open";

            }

     

            /// <summary>

            /// 常用构造函数

            /// </summary>

            public EasyTreeData(string id, string text, string iconCls = "", string state = "open")

                : this()

            {

                this.id = id;

                this.text = text;

                this.state = state;

                this.iconCls = iconCls;

            }

     

            /// <summary>

            /// 常用构造函数

            /// </summary>

            public EasyTreeData(int id, string text, string iconCls = "", string state = "open", List<EasyTreeData> children=null )

                : this()

            {

                this.id = id.ToString();

                this.text = text;

                this.state = state;

                this.iconCls = iconCls;

                this.children = children;

            }

        }

    2,前台代码

    2.1,前台代码html代码

         <ul id="tt"></ul>

    2.2,前台代码脚本

        <script type="text/javascript">

             $(function () {

                $('#tt').tree({

                    checkbox: false,

                    url: '/Cultivate/GetUserTreeJson',

                    onClick: function (node) {

                         alert(node.id);

                    }

                });

            });

       </script>

    3,控制器(Cultivate)的方法GetUserTreeJson'

    3.1,控制器(Cultivate)的方法GetUserTreeJson代码

           [HttpPost]

            public ActionResult GetUserTreeJson()

            {

                int PID = -1;

                List<EasyTreeData> treeList = new List<EasyTreeData>();

                if (PID == -1)

                {

                    var list = (from p in db.cultivates

                                where p.NodePID == PID

                                orderby p.NodeID

                                select p).ToList();

                    foreach (cultivate info in list)

                    { var child = (from p in db.cultivates

                                   where p.NodePID == info.NodeID

                                   orderby p.NodeID

                                   select p).ToList();

                    if (child.Count ==0)

                    {

                        treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));

                    }

                    else

                    {

                        treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user","open", GetUserTreeJson2(info.NodeID)));

                    

                    }

                    }

                }    

                string json = ToJson(treeList);

                return Content(json);

            }

    3.2,如果有N级菜单循环代码

            private List<EasyTreeData> GetUserTreeJson2( int PID)

              {

                 List<EasyTreeData> treeList = new List<EasyTreeData>();

                  var list = (from p in db.cultivates

                              where p.NodePID == PID

                              orderby p.NodeID

                              select p).ToList();

                  foreach (cultivate info in list)

                  {

                      var child = (from p in db.cultivates

                                   where p.NodePID == info.NodeID

                                   orderby p.NodeID

                                   select p).ToList(); ;

                      if (child.Count == 0)

                      {

                          treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));

                      }

                      else

                      {

                          treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user", "closed", GetUserTreeJson2(info.NodeID)));

                      }

                  }

                  return treeList;

              }

          

    3.3,Json代码生成。

           protected string ToJson(object obj)

            {

                string jsonData = (new JavaScriptSerializer()).Serialize(obj);

                return jsonData;

            }

  • 相关阅读:
    在Eclipse/STS里添加代码反编译器(.class)步骤
    关于页面添加字段
    关于jeesite Date和时间戳问题
    关于前端ajax通过实体类向后端传参报不存在问题
    引入字典
    关于添加主键
    简单的前后端分离项目 部署到 centos7
    Cenost7 Mysql5.7 安装 并打开远程访问
    npm install vue-cli -g 报错
    docker 笔记 docker 基础 docker 常用命令
  • 原文地址:https://www.cnblogs.com/lgx5/p/6189062.html
Copyright © 2011-2022 走看看