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 = 0;
        var SelectedPersons = new Array();

         function displayCheckedPersons() {
            var checkedPersons = new Array();
            var j;
            j = 0;
               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 + 1;
                   }
               });

               SelectedPersonNum = checkedPersons.length;
               if (checkedPersons.length < 1) {
                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(',')[0]).Substring(0, 0);
            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 ? 0 : dp.id;
            var hid = dp.id;
            foreach (var d in db.ClassInfo.Where(c => c.classnum.Substring(0, dhid.Length) == dhid & c.classnum.Length == dhid.Length + 3).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的建立了，这里就不做多演示了，相信不会难。希望能帮到大家，有不足的望指出。