• 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;

            }

  • 相关阅读:
    第十四节:Web爬虫之Ajax数据爬取
    第十三节:web爬虫之Redis数据存储
    第十二节:Web爬虫之MongoDB数据库安装与数据存储
    第十一节:Web爬虫之数据存储(数据更新、删除、查询)
    第十节:Web爬虫之数据存储与MySQL8.0数据库安装和数据插入
    第九节:web爬虫之urllib(五)
    第八节:web爬虫之urllib(四)
    第七节:web爬虫之urllib(三)
    第六节:web爬虫之urllib(二)
    第五节:web爬虫之urllib(一)
  • 原文地址:https://www.cnblogs.com/lgx5/p/6189062.html
Copyright © 2020-2023  润新知