JS树型菜单

本树型菜单主要实现功能有：基本的树型菜单，可勾选进行多选项操作。

本树型菜单适合最初级的学者学习，涉及内容不难，下面看代码。

首先看View的代码，第一个<div>用来定义树显示的位置和id

 <div id="PersonTree"></div>
 </div>
 <div  style=" margin-left:230px;" id="result"></div>
 <button class="t-button t-state-default" id="PersonSelectSubmit" onclick="displayCheckedPersons ()">选择人员</button>

接下来看JS代码：

         $(document).ready(function () {
             $("#PersonSequenceSubmit").attr('disabled', true);
             });
             $("#PersonTree").jstree({
                 json_data: {
                     ajax: {
                         url: '<%= Url.Action("GetPersonTreeDataAll", "Home")%>',
                         data: '{did:3}',
                         type: 'POST',
                         dataType: 'json',
                         contentType: 'application/json charset=utf-8'
                     }
                 },

                 "themes": { "theme": "default", "dots": true, "icons": true },
                 "plugins": ["themes", "json_data", "ui", "checkbox"]
             });
         });

         var SelectedPersonNum = ;
         var SelectedPersons = new Array();

          function displayCheckedPersons() {
             var checkedPersons = new Array();
             var j;
             j = ;
                var nodes = $("#PersonTree").jstree("get_checked",null,true);  //使用get_checked方法
                $.each(nodes, function (i, element) {
                    if ($(element).attr("ifPerson") == "Y") {
                        checkedPersons[j] = $(element).attr("id");
                        j = j + ;
                    }
                });

                SelectedPersonNum = checkedPersons.length;
                if (checkedPersons.length < ) {
                 alert('请首先选择要管理的工作人员.');
                 return;
             }
             SelectedPersons = checkedPersons;
             $.ajax({
                 type: "POST",
                 url: '<%= Url.Action("DisplayCheckedPersons", "Home") %>',
                 data: { checkedRecords: checkedPersons },
                 dataType: "html",
                 success: function (request) {
                     $("#result").html(request);
                 },
                 traditional: true
             });
             return;
         }

上半部分，是用于显示树的，下面的function是用于勾选目标项目进行操作的。这里使用的是ajax形式，不太了解的朋友可以搜搜资料了解下，还是蛮好掌握的。

接下来看后台控制器代码：

  [HttpPost]
         public JsonResult GetPersonTreeDataAll(string did)//没用到地点值，显示全部人员，只是保留
         {

             string classnum = (HttpContext.User.Identity.Name.Split(',')[]).Substring(, );
             jstreeDataContext db = new jstreeDataContext();
             var d = db.ClassInfo.FirstOrDefault(c => c.classnum == classnum);
             if (d != null)
             {
                 JsTreeModel rootNode = new JsTreeModel();
                 rootNode.attr = new JsTreeAttribute();
                 rootNode.data = d.classname;
                 rootNode.attr.id = d.classnum;
                 rootNode.state = "open"; //根节点设定为初始打开状态
                 new JsTreeRepository().PopulateTree(classnum, rootNode);
                 return Json(rootNode);
             }
             else
             {
                 return null;
             }
         }

这是用于根节点的选取，由第五行获得登录用户的身份并获取该类用户可选操作的根节点，

         public void PopulateTree(string dhid, JsTreeModel node)
         {
             jstreeDataContext db = new jstreeDataContext();
             if (node.children == null)
             {
                 node.children = new List<JsTreeModel>();
             }

             var dp = db.ClassInfo.Where(c => c.classnum == dhid).FirstOrDefault();
             var dpid = dp == null ?  : dp.id;
             var hid = dp.id;
             foreach (var d in db.ClassInfo.Where(c => c.classnum.Substring(, dhid.Length) == dhid & c.classnum.Length == dhid.Length + ).ToList())
             {
                 // create a new node
                 JsTreeModel t = new JsTreeModel();
                 t.attr = new JsTreeAttribute();
                 t.attr.id = d.classnum;
                 t.data = d.classname;
                 // populate the new node recursively
                 PopulateTree(d.classnum, t);
                 node.children.Add(t); // add the node to the "master" node
             }
              //lastly, loop through each file in the directory, and add these as nodes
             foreach (var p in db.UsersInfo.Where(e => e.classID == hid).OrderBy(e => e.username).ToList())
             {
                 // create a new node
                 JsTreeModel t = new JsTreeModel();
                 t.attr = new JsTreeAttribute();
                 t.attr.id = p.usernum;
                 t.attr.ifPerson = "Y"; //表明是人员节点
                 t.data = p.username;
                 t.state = "close";
                 t.children = null;
                 // add it to the "master"
                 node.children.Add(t);
             }
         }

这里，有2个遍历，第一个用于遍历之前传过来的根节点下的所有节点，第二个用于遍历每个节点的叶子。

这里的Model需要注意的一点事：

     public class JsTreeModel
     {
         public string data;
         public JsTreeAttribute attr;
         public string state ;
         public List<JsTreeModel> children;
     }

     public class JsTreeAttribute
     {
         public string id;
         public string ifPerson = "N"; //初始化都标识不是人员节点
     }

     public class JsTreeLeafModel
     {
         public string data;
         public JsTreeAttribute attr;
     }

这是树型菜单需要的一个Model。

好了，剩下的就是数据库和数据元素的Model的建立了，这里就不做多演示了，相信不会难。希望能帮到大家，有不足的望指出。