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 ...
随机推荐
- springboot:接收date类型的参数
今天有个postmapping方法,地址都正确,就是死活进不去,真是奇怪了. 终于从日志中得出些端倪,见下: 只有这个属性报错,恰恰这个属性是Date型. 这句话说得更清楚: "defaul ...
- C++ sizeof()练习
class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; }; 在32位机器上用g ...
- 优秀员工的修炼——通往专家、管理之路
(一)好员工的素质 好员工的类型有很多种,尝试着抽象出一个定义吧--好员工是那些主管分配其任务放心.同事喜欢与其共事.对自己工作负责.志在自我提升和价值实现的人.知识经济时代,好员工首先是做好自我管理 ...
- js——class基础
js的类?其实还是原型! class Point{ constructor(x, y){ this.x = x; this.y = y; } toString(){ return '(' + this ...
- 金九银十中,看看这31道Android面试题
阅读目录 1.如何对 Android 应用进行性能分析 2.什么情况下会导致内存泄露 3.如何避免 OOM 异常 4.Android 中如何捕获未捕获的异常 5.ANR 是什么?怎样避免和解决 ANR ...
- 【MySql】Group By数据分组
GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. 因为聚合函数通过作用于一组数据而只返回一个单个值, 因此,在SELECT语 ...
- Confluence 6 配置白名单
Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏,HTML 包含宏和小工具中的内容. 如果一个内容被添加到 Confluence 系统中,但是这个 URLs ...
- 找到 Confluence 6 的日志和配置文件
找到 Confluence 的日志文件 这部分内容对 Confluence 的默认日志表现进行描述并且假设你没有对 Confluence 的默认日志配置进行修改.为了统一在不同平台中的日志输出,Con ...
- Confluence 6 用户目录图例 - 连接 Jira
上面的图:Confluence 连接到 JIRA 为用户管理. https://www.cwiki.us/display/CONFLUENCEWIKI/Diagrams+of+Possible+Con ...
- Android UiAutomator
UiAutomator是一个做UI测试的自动化框架.<Android自动化测试框架>中已有详细介绍,这里就不再累赘了. 一.首先了解自动化测试流程 自动化需求分析 测试用例设计 自动化框架 ...