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;

            }

  • 相关阅读:
    详述@Responsebody和HTTP异步请求的关系
    利用synchronized解析死锁的一种形成方式
    初识Spring JdbcTemplate
    初识SpringIOC
    JasperReport框架使用教程(附带常见空白页问题说明)
    LeetCode~1033.移动石子直到连续
    LeetCode~941.有效的山脉数组
    LeetCode~344. 反转字符串
    Job for network.service failed because the control process exited with error code问题
    LeetCode~报数(简单)
  • 原文地址:https://www.cnblogs.com/lgx5/p/6189062.html
Copyright © 2011-2022 走看看