zTree实战
1.实体
public class UserDataZTreeVo {
private String id;
private String pid;
private String name;
private boolean open;
private String readWriteAuthority;
private String code;
private String description;
private boolean isParent;
private boolean checked;
//ztree组件需要格式
public String getpId() {
return this.pid == null ? "" : this.pid;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public boolean isParent() {
return isParent;
}
public void setParent(boolean parent) {
isParent = parent;
}
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
public String getReadWriteAuthority() {
return readWriteAuthority;
}
public void setReadWriteAuthority(String readWriteAuthority) {
this.readWriteAuthority = readWriteAuthority;
}
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
}
}
2.zTree封装
//ztree封装,先创建组织
List<UserDataZTreeVo> list = new ArrayList<UserDataZTreeVo>();
String organizationTreeId = "";
for (int i = ; i < listUserDataVo.size(); i++) {
UserDataZTreeVo ztree = new UserDataZTreeVo();
UserDataManageVO vo = listUserDataVo.get(i);
if (!organizationTreeId.equals(String.valueOf(vo.getManagedOrganizationId()))) {
ztree.setId(String.valueOf(vo.getManagedOrganizationId()));
ztree.setPid(String.valueOf(vo.getManagedOrganizationId()));
ztree.setName(vo.getManagedOrganizationName());
ztree.setOpen(true);
ztree.setParent(true);
organizationTreeId = String.valueOf(vo.getManagedOrganizationId());
list.add(ztree);
}
}
3.加载
//========================================3.ztree===========================================
var zNodes = [];
var initUserManageTree = function (userId, organizationId) {
$.ajax({
url: CTX + "/manage/loadUserManagedTree",//发送ajax请求加载权限数据
type: 'post',
dataType: 'json',
async: false,
data: {
"userId": userId,
"organizationId": organizationId
},
success: function (data) {//data就是服务端返回的权限数据
var data = data.data;
zNodes = data;
},
error: function (msg) {
alert('树加载异常!');
}
});
}; var InitialTree = function () {
// 授权树初始化
var setting = {
view: {
selectedMulti: true,
showLine: true,
addDiyDom: addDiyDom
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: null
}
},
check: {//使用ztree选中效果
enable: true,
}
};
$.fn.zTree.init($("#userDataManageTree"), setting, zNodes).expandAll(true);
};
var addDiyDom = function (treeId, treeNode) {
var pNode = treeNode.getParentNode();
var readWriteAuthority = treeNode.readWriteAuthority;
var aObj = $("#" + treeNode.tId + "_a");
if (pNode) {
var editStr = "";
if (readWriteAuthority == "1") {
editStr += "<label class='isRead'>"
+ "<input class='a-radio' id='writeRead" + treeNode.id + "' value='1' type='radio' name='writeRead" + treeNode.id + "' checked/>"
+ "<span class='b-radio'></span>只读</label>";
editStr += "<label class='isRead'>"
+ "<input id='writeRead" + treeNode.id + "' class='a-radio' value='2' type='radio' name='writeRead" + treeNode.id + "' />"
+ "<span class='b-radio'></span>读写</label>";
} else {
editStr += "<label class='isRead'>"
+ "<input class='a-radio' id='writeRead" + treeNode.id + "' value='1' type='radio' name='writeRead" + treeNode.id + "' />"
+ "<span class='b-radio'></span>只读</label>";
editStr += "<label class='isRead'>"
+ "<input id='writeRead" + treeNode.id + "' class='a-radio' value='2' type='radio' name='writeRead" + treeNode.id + "' checked />"
+ "<span class='b-radio'></span>读写</label>";
}
aObj.append(editStr);
}
};
var hiddenNodes = [];
var autoMatch = function (txtObj) {
// 授权树初始化
var setting = {
view: {
selectedMulti: true,
showLine: true,
addDiyDom: addDiyDom
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: null
}
},
check: {
enable: true
}
};
var searchUserTree = $('#searchUserTree').val();
if (searchUserTree) {
InitialTree();
var zTree = $.fn.zTree.getZTreeObj("userDataManageTree");
var nodeList = zTree.getNodesByParamFuzzy("name", searchUserTree);
//parent
hiddenNodes = zTree.transformToArray(nodeList);
for (var n in hiddenNodes) {
findParent(zTree, hiddenNodes[n]);
}
$.fn.zTree.destroy("userDataManageTree");
$.fn.zTree.init($("#userDataManageTree"), setting, hiddenNodes).expandAll(true);
} else {
InitialTree();
}
};
function findParent(treeObj, node) {
var pNode = node.getParentNode();//获取父节点
if (pNode != null && hiddenNodes.indexOf(pNode) == -1) {
hiddenNodes.push(pNode);
treeObj.removeChildNodes(pNode);
}
}
zTree实战的更多相关文章
- [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表
写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...
- [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表
写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...
- [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表
写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...
- [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表
写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...
- [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表
写在前面 上篇文章实现了文档列表,所以实现视频列表就依葫芦画瓢就行了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...
- [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表
写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...
- [实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表
写在前面 实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...
- [实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志
写在前面 上篇文章介绍了一个bootstrap的分页插件,这篇将弄一个完整的例子,就以日志分页为例说明如何请求服务端然后进行分页. 系列文章 [EF]vs15+ef6+mysql code first ...
- [实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator
写在前面 考虑到数据量的问题,特引入bootstrap的分页插件.插件下载地址:https://github.com/lyonlai/bootstrap-paginator 系列文章 [EF]vs15 ...
随机推荐
- 零散的python知识点
python第三方包的存放位置 python找包的规则 __init__.py 文件 解决python3跨目录引用包: 异常类 help() 函数 字典的使用 可以对字典进行循环 字典key或者val ...
- java后台发送请求并获取返回值(续)
在java后端发送请求给另一个平台,从而给前端实现 "透传"的过程中,出现:数据请求到了并传到了前端,但是控制台打印时中文显示Unicode码而前端界面中中文显示不出来!!!开始怀 ...
- Ex3_7无向图二部图_十一次作业
(a) 从图中的某个顶点做深度优先遍历,并将不同层的顶点标记为红黑两种颜色,使得每条树边的两个顶点的颜色都不相同,如果遇到一条回边并且两个顶点的颜色都相同则说明图不是二部图. (b)如果存在一个长度为 ...
- LNMP环境部署
说明: 操作系统:CentOS 5.6 32位 准备篇: 一.配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 二.配置防火墙,开启80端口.3306端口 vi /etc/sysconf ...
- springmvc框架原理分析和简单入门程序
一.什么是springmvc? 我们知道三层架构的思想,并且如果你知道ssh的话,就会更加透彻的理解这个思想,struts2在web层,spring在中间控制,hibernate在dao层与数据库打交 ...
- CM5.15安装kafka
cm主节点执行: [root@dip001 kafka]#ll KAFKA-.jar KAFKA---el7.parcel KAFKA---el7.parcel.sha1 manifest.json ...
- Vue项目构建开发笔记(vue-lic3.0构建的)
1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...
- ASP.NET的路由系统:路由映射
总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection的集合对象,我们可以通过调用它的MapP ...
- Confluence 6 配置白名单
Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏,HTML 包含宏和小工具中的内容. 如果一个内容被添加到 Confluence 系统中,但是这个 URLs ...
- Confluence 6 SQL Server 数据库驱动修改
从 Confluence 6.4 开始,我们使用官方的 Microsoft SQL Server JDBC 驱动来替换掉开源的 jTDS 驱动.从这个版本开始所有的安装都会默认使用官方的 Micros ...