本树型菜单主要实现功能有：基本的树型菜单，可勾选进行多选项操作。
本树型菜单适合最初级的学者学习，涉及内容不难，下面看代码。
首先看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的建立了，这里就不做多演示了，相信不会难。希望能帮到大家，有不足的望指出。