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

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

首先看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的建立了,这里就不做多演示了,相信不会难。希望能帮到大家,有不足的望指出。

JS树型菜单的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. oracle使用connect by进行级联查询 树型菜单

    Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥 ...

  3. js, 树状菜单隐藏显示

    js写的不是很严谨~~~嘿嘿   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. php实现无限级树型菜单(函数递归算法)

    首先到数据库取数据,放到一个数组,然后把数据转化为一个树型状的数组,最后把这个树型状的数组转为html代码.也可以将第二步和第三步合为一步. 详细如下:1.数据库设计:脚本如下:CREATE TABL ...

  5. php通用的树型类创建无限级树型菜单

    生成树型结构所需要的2维数组,var $arr = array()数组格式如下: array( 1 => array('id'=>'1','parentID'=>0,'name'=& ...

  6. JavaScript:使用递归构建树型菜单

    使用递归函数将扁平数据转为树型结构,并渲染到页面 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  7. 强大的Js树型控件Dtree使用详解

    http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...

  8. Js树型控件Dtree使用

    dtree地址:http://destroydrop.com/javascripts/tree/ Key features Unlimited number of levels 无限级 Can be ...

  9. jQuery 树型菜单插件(Treeview)

    jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单.试用于一些菜单的导航,支持基于 cookie 的持久性菜单

随机推荐

  1. 雅居乐在核心产品 &quot;决策&quot;

    2015.6.2 在武汉-- 这是一支谦卑且认真学习,又实实在在做产品的 "产品级敏捷团队". "产品级敏捷团队"--在产品版本号开发的生命周期中.均能共同高效 ...

  2. WeakReference and WeakHashMap

    弱引用通过WeakReference类实现,弱引用和软引用很像,但弱引用的引用级别更低.对于只有弱引用的对象而言,当系统垃圾回收机制运行时,不管系统北村是否足够,总会回收该对象所占用的内存.当然,并不 ...

  3. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  4. android ndk通过遍历和删除文件

           在做移动开发过程,难免有些本地文件管理操作.例如,很常见app随着微博.微信要清除缓存功能,此功能是走app文件夹.然后删除所有缓存文件.使用java的File类能够实现本地文件遍历及删 ...

  5. MVC提交时验证

    第一种 @using (Html.BeginForm("ProdPromotionEdit", "Product", FormMethod.Post, new ...

  6. C#函数式编程-序列

    C#函数式编程之序列 过了许久的时间,终于趁闲暇的时间来继续将函数式编程这个专辑连载下去,这段时间开头是为IOS这个新方向做准备,将OC的教程写成了SWIFT版,当然我个人是支持Xamarin,但是我 ...

  7. asp.net [AjaxMethod]

    AjaxPro.2.dll cs 代码 using AjaxPro; Utility.RegisterTypeForAjax(typeof(BOMdr_KT)); [Ajax.AjaxMethod() ...

  8. Python超级明星WEB框架Flask

    Flask简介 Flask是一个相对于Django而言轻量级的Web框架. 和Django大包大揽不同,Flask建立于一系列的开源软件包之上,这其中 最主要的是WSGI应用开发库Werkzeug和模 ...

  9. 关于Android开发中导出jar包后的资源使用问题解决

    我们经常遇到一个需求,就是给别人使用我们工程的时候,为了能够屏蔽代码,把代码封装成jar包提供给第三方使用,但是这样我们的资源文件怎么给对方用呢? 其实并不用这么的复杂,下面就介绍一下具体的方法 一, ...

  10. Java Persistence with MyBatis 3(中国版) 第五章 与Spring集成

    MyBatis-Spring它是MyBatis子模块框.它用来提供流行的依赖注入框架Spring无缝集成. Spring框架是一个基于依赖注入(Dependency Injection)和面向切面编程 ...