| 【ztree系列】完美实现复选框功能 | 您所在的位置：网站首页 › ztree复选框怎么写 › 【ztree系列】完美实现复选框功能 |
【ztree系列】完美实现复选框功能
|
在权限系统中，大多数的页面都用到了树形结构，其中最常用的便是树资源的加载和单击事件，除此之外ztree还可以实现很多功能。今天以实现复选框的添加功能为例，咱们再来深入的学习下ztree的应用。 一、实例描述 在用户管理模块中，需要给用户添加角色，而用户与角色的之间是一个多对多的关系。这里我们可以先加载两个角色树资源，通过两个树之间数据的交换，从而得到用户所拥有的角色资源，实现效果如下： 1.用户信息入口 2.加载角色信息 Datagrid表格中的“分配”按钮是针对单个用户的角色分配，而搜索框下边的“批量分配角色”按钮是针对多个用户的角色分配，在实现过程中把二者结合在了一起。 1）如果选择的是一位用户，则右侧角色树“已分配角色”中是该用户已经拥有的角色，左侧角色树“可分配角色”中是除该用户拥有的角色之外所有的角色。 2）如果选择的是多位用户，则右侧角色树为空，左侧角色树是所有的角色 3.实现添加、移除等功能 具体的功能实现由几个按钮完成，在上图中“添加、全部添加、移除、全部移除”四个按钮用来管理两个角色树之间的数据传输，与后台没有交互；“确定”按钮用来把页面的操作结果保存到数据库中；“重置”按钮负责角色分配窗口恢复到初始化状态。 “确定”后，数据库中就保存了相应的用户角色信息。 二、具体实现 1.HTML中，先设计一个Windows窗口，用来盛放两个角色树 @*1.左：所有的角色*@ @*2.中：添加移除按钮*@ 添 加 > 全部添加>> = 0; i--) { addedRoleObject.removeNode(nodes[i]); } } //删除全部角色 function removeAllAddedRole() { //获取被添加节点的树——addedRoleTree addedRoleObject = $.fn.zTree.getZTreeObj("addedRoleTree"); roleObject = $.fn.zTree.getZTreeObj("roleTree"); //获取所有已分配的角色树中的节点信息——addedRoleTree var nodes = addedRoleObject.getNodes(); //nodes是一个array(json)数组，是所有被选中的节点 //把已分配的角色信息，添加到可分配的角色中——RoleTree roleObject.addNodes(null, nodes); //删除已分配角色中的信息——addedRoleTree for (var l = nodes.length, i = l - 1; i >= 0; i--) { addedRoleObject.removeNode(nodes[i]); } }4）保存功能，将页面的操作结果保存到数据库 //保存操作 function RoleOk() { //获取被添加节点的树——addedRoleTree addedRoleObject = $.fn.zTree.getZTreeObj("addedRoleTree"); var nodes = addedRoleObject.getNodes(); //把节点的RoleId放到一个数组中 var roleArray = new Array; for (var i = 0; i < nodes.length; i++) { var obj = new Object; obj.RoleId = nodes[i].RoleId; roleArray.push(obj); } $.post( '/UserManage/AddUserRole', { userData: JSON.stringify(rowData), roleData: JSON.stringify(roleArray) }, function (savaInfo) { //关闭分配角色窗口 $('#groupDistributeRole').window('close'); alert("保存成功！"); }); }3.Controller中，是对js中用到的方法的具体调用过程，比较简单 #region 根据用户Id,查找该用户没有的所有角色 王静娜2015年8月25日 public ActionResult QueryRoleExceptAddedRole() { var UserId = Request.Form["userId"]; Guid userId = new Guid(UserId); List listRole = iUserManageService.QueryRoleExceptAddedRole(userId); var listTreeRole = listRole.Select(n => new { n.RoleId, n.RoleName }).ToList(); return Json(listTreeRole, JsonRequestBehavior.AllowGet); } #endregion #region AddUserRole()添加用户角色 王静娜2015年8月27日 public void AddUserRole() { //转换用户信息 var UserData = Request["userData"]; JavaScriptSerializer jsUser = new JavaScriptSerializer(); List listUser = jsUser.Deserialize(UserData); //转换角色信息 var RoleData = Request["roleData"]; JavaScriptSerializer jsRole = new JavaScriptSerializer(); List listRole = jsRole.Deserialize(RoleData); //调用服务端的添加方法 iUserManageService.AddUserRole(listUser, listRole); } #endregion 三、总结ztree的学习主要是围绕文档来的，但是在实现的过程中还是会遇到各种小问题，随着这些问题的出现和解决，对它的认识也更深了一步。在实现ztree复选框功能的过程中主要用到的有以下知识点： 1.不显示树形结构，把所有数据当成一列来显示。平常实现树形结构需要同时设置idKey和pIdKey，这里只需设置idKey或让idKey=pIdKey即可 simpleData: { enable: true, idKey: "RoleId", rootPId: "0" }2.两个复选框 想要实现ztree的复选框功能，首先要添加复选框，即setting.check.enable= true，但是在添加该功能后出现了两个复选框
出现这样的情况是由于重复加载了复选框，我这里是因为多引入了一个js导致的 3.对树进行获取节点操作的返回结果是json串，它是一个array(json)数组，可以把它当成是数组来操作。 //把节点的RoleId放到一个数组中 var roleArray = new Array; for (var i = 0; i < nodes.length; i++) { var obj = new Object; obj.RoleId = nodes[i].RoleId; roleArray.push(obj); }4.树节点的删除，nodes是要执行删除操作的节点，删除时要用i--操作，i++操作会导致节点的长度发生变化，从而找不到要删除的节点或漏删某些节点。 //删除未分配角色中选中的节点——roleTree for (var l = nodes.length, i = l - 1; i >= 0; i--) { roleObject.removeNode(nodes[i]); } 小结：学习是一个循序渐进的过程，不断地尝试可以让我们遇到更多的问题，通过这些问题来学习不仅可以让我们了解的更多，还可以锻炼解决问题的能力，总有一天这些问题会越来越少也越来越有质量。
|
【本文地址】