本树型菜单主要实现功能有：基本的树型菜单，可勾选进行多选项操作。
本树型菜单主要实现功能有：基本的树型菜单，可勾选进行多选项操作。
本树型菜单适合最初级的学者学习，涉及内容不难，下面看代码。
首先看View的代码，第一个<div>用来定义树显示的位置和id
1 <div id="PersonTree"></div>
2 </div>
3 <div style=" margin-left:230px;" id="result"></div>
4 <button class="t-button t-state-default" id="PersonSelectSubmit" onclick="displayCheckedPersons ()">选择人员</button>接下来看JS代码：
1 $(document).ready(function () {
2 $("#PersonSequenceSubmit").attr('disabled', true);
3 });
4 $("#PersonTree").jstree({
5 json_data: {
6 ajax: {
7 url: '<%= Url.Action("GetPersonTreeDataAll", "Home")%>',
8 data: '{did:3}',
9 type: 'POST',
10 dataType: 'json',
11 contentType: 'application/json charset=utf-8'
12 }
13 },
14
15 "themes": { "theme": "default", "dots": true, "icons": true },
16 "plugins": ["themes", "json_data", "ui", "checkbox"]
17 });
18 });
19
20 var SelectedPersonNum = 0;
21 var SelectedPersons = new Array();
22
23 function displayCheckedPersons() {
24 var checkedPersons = new Array();
25 var j;
26 j = 0;
27 var nodes = $("#PersonTree").jstree("get_checked",null,true); //使用get_checked方法
28 $.each(nodes, function (i, element) {
29 if ($(element).attr("ifPerson") == "Y") {
30 checkedPersons[j] = $(element).attr("id");
31 j = j + 1;
32 }
33 });
34
35 SelectedPersonNum = checkedPersons.length;
36 if (checkedPersons.length < 1) {
37 alert('请首先选择要管理的工作人员.');
38 return;
39 }
40 SelectedPersons = checkedPersons;
41 $.ajax({
42 type: "POST",
43 url: '<%= Url.Action("DisplayCheckedPersons", "Home") %>',
44 data: { checkedRecords: checkedPersons },
45 dataType: "html",
46 success: function (request) {
47 $("#result").html(request);
48 },
49 traditional: true
50 });
51 return;
52 }上半部分，是用于显示树的，下面的function是用于勾选目标项目进行操作的。这里使用的是ajax形式，不太了解的朋友可以搜搜资料了解下，还是蛮好掌握的。
接下来看后台控制器代码：
1 [HttpPost]
2 public JsonResult GetPersonTreeDataAll(string did)//没用到地点值，显示全部人员，只是保留
3 {
4
5 string classnum = (HttpContext.User.Identity.Name.Split(',')[0]).Substring(0, 0);
6 jstreeDataContext db = new jstreeDataContext();
7 var d = db.ClassInfo.FirstOrDefault(c => c.classnum == classnum);
8 if (d != null)
9 {
10 JsTreeModel rootNode = new JsTreeModel();
11 rootNode.attr = new JsTreeAttribute();
12 rootNode.data = d.classname;
13 rootNode.attr.id = d.classnum;
14 rootNode.state = "open"; //根节点设定为初始打开状态
15 new JsTreeRepository().PopulateTree(classnum, rootNode);
16 return Json(rootNode);
17 }
18 else
19 {
20 return null;
21 }
22 }这是用于根节点的选取，由第五行获得登录用户的身份并获取该类用户可选操作的根节点，
1 public void PopulateTree(string dhid, JsTreeModel node)
2 {
3 jstreeDataContext db = new jstreeDataContext();
4 if (node.children == null)
5 {
6 node.children = new List<JsTreeModel>();
7 }
8
9 var dp = db.ClassInfo.Where(c => c.classnum == dhid).FirstOrDefault();
10 var dpid = dp == null ? 0 : dp.id;
11 var hid = dp.id;
12 foreach (var d in db.ClassInfo.Where(c => c.classnum.Substring(0, dhid.Length) == dhid & c.classnum.Length == dhid.Length + 3).ToList())
13 {
14 // create a new node
15 JsTreeModel t = new JsTreeModel();
16 t.attr = new JsTreeAttribute();
17 t.attr.id = d.classnum;
18 t.data = d.classname;
19 // populate the new node recursively
20 PopulateTree(d.classnum, t);
21 node.children.Add(t); // add the node to the "master" node
22 }
23 //lastly, loop through each file in the directory, and add these as nodes
24 foreach (var p in db.UsersInfo.Where(e => e.classID == hid).OrderBy(e => e.username).ToList())
25 {
26 // create a new node
27 JsTreeModel t = new JsTreeModel();
28 t.attr = new JsTreeAttribute();
29 t.attr.id = p.usernum;
30 t.attr.ifPerson = "Y"; //表明是人员节点
31 t.data = p.username;
32 t.state = "close";
33 t.children = null;
34 // add it to the "master"
35 node.children.Add(t);
36 }
37 }这里，有2个遍历，第一个用于遍历之前传过来的根节点下的所有节点，第二个用于遍历每个节点的叶子。
这里的Model需要注意的一点事：
1 public class JsTreeModel
2 {
3 public string data;
4 public JsTreeAttribute attr;
5 public string state ;
6 public List<JsTreeModel> children;
7 }
8
9 public class JsTreeAttribute
10 {
11 public string id;
12 public string ifPerson = "N"; //初始化都标识不是人员节点
13 }
14
15 public class JsTreeLeafModel
16 {
17 public string data;
18 public JsTreeAttribute attr;
19 }这是树型菜单需要的一个Model。
好了，剩下的就是数据库和数据元素的Model的建立了，这里就不做多演示了，相信不会难。希望能帮到大家
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
