摘要:折叠展开折叠展开脚本下面的是设置了新增按钮的和设置了高度的代码增加子项控制器控制器映射文件工具类工具类省略保存后锁定到新增的节点如果中放了添加按钮,这个就是保存成功之后回去页面展开显示新增的节点保存禁止
【1】折叠展开
</>复制代码
var zTree = $.fn.zTree.init($("#bid_dept"), setting);
$("#expandfalse").click(function (e) {
e.preventDefault();
zTree.expandAll(false);
});
$("#expandtrue").click(function (e) {
e.preventDefault();
zTree.expandAll(true);
});
1)html:
2)js脚本:</>复制代码
</>复制代码
$(function(){
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "parent"
}
},
async: {
enable: true,
url: "base/suptype/tree",
autoParam: ["id", "t", "level=lv"],
type: "get"
},
callback : {
onClick : function(e, treeId, treeNode) {
//console.log(treeNode);
urlDetail = "/base/suptype/detail?id=" + encodeURIComponent(treeNode.id);
$("#supdetails").load(urlDetail);
}
}
};
var zTree = $.fn.zTree.init($("#t_suptype"), setting);
//下面的是设置了新增按钮的和设置了高度的代码
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
$("#modal-operate").modal("show");
var url = "/base/suptype/add?parent=" + encodeURIComponent(treeNode.id);
$("#modal-operate-body").load(url);
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
var windowHeight = $(window).height();
var mainheaderH = $(".main-header").outerHeight();
var contentheaderH = $(".content-header").outerHeight();
var boxorgheaderH = $("#boxheader").outerHeight();
var deptlistH = windowHeight - mainheaderH - contentheaderH - boxorgheaderH - 30 - 3;
$("#boxlist").slimScroll({
height: deptlistH
});
})
3)控制器
</>复制代码
/**
* yyh
* 20180817
* 控制器
* @return
*/
@ResponseBody
@GetMapping("/tree")
@RequiresPermissions("base:suptype:suptype")
public String tree(){
List suptypeList = suptypeService.getTreeAllSuptype();
return JSON.toJSONString(suptypeList);
}
4)映射文件
5)zTree工具类</>复制代码
</>复制代码
package com.tuodata.bid.common.domain;
import java.io.Serializable;
//zTree工具类
public class zTreeNode implements Serializable {
private static final long serialVersionUID = 1L;
private String id;
private String parent;
private String name;
private Boolean open;
private Boolean isp;
private String icon;
private int t;
private int s;
//省略getter setter
@Override
public String toString() {
return "zTreeNode [id=" + id + ", parent=" + parent + ", name=" + name + ", open=" + open + ", isp=" + isp
+ ", icon=" + icon + ", t=" + t + ", s=" + s + "]";
}
}
6)保存后锁定到新增的节点
</>复制代码
如果zTree中放了添加按钮,这个就是保存成功之后回去页面展开显示新增的节点
/**
* 保存
*/
@ResponseBody
@PostMapping("/save")
@RequiresPermissions("base:suptype:add")
public String save( SuptypeDO suptype, @RequestParam("code") String code,@RequestParam("name") String name){
String uuid = UUID.randomUUID().toString().replace("-", "");
suptype.setCode(code);
suptype.setName(name);
suptype.setId(uuid);
suptype.setF(1);
if(suptypeService.save(suptype)>0){
zTreeNode node = new zTreeNode();
node.setId(suptype.getId());
node.setParent(suptype.getParent());
node.setName(suptype.getName());
return JSON.toJSONString(node);
}
return JSON.toJSONString(R.error());
}
【2】禁止获取非文件夹的树的值(观察到复选框是暗色的)
</>复制代码
check: {
enable: true,
chkboxType: { "Y" : "", "N" : "" }
}
【3】禁止获取非文件夹的树的值(观察到复选框是暗色的)
</>复制代码
(id, parent, code, name, icon, t, isp, open, s, ls, f)
parent:父节点
open:是否展开
1)树实体的字段对应
2)sql脚本
3)界面查询
【4】判断有无选中节点
</>复制代码
var t_sup = $.fn.zTree.getZTreeObj("t_sup");
var tnodes = t_sup.getCheckedNodes();
if (tnodes.length == 0) {
toastr.warning("请选择关联的供应商分类");
return;
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/73984.html
摘要:简介是一个依靠实现的多功能树插件。使用说明下载文件将需要使用的相关的文件分别放置到相应目录,并且保证相对路径正确。页面分别在和中引入文件,如代码所示。设置是否显示节点的图标。 简介 zTree 是一个依靠 jQuery 实现的多功能 树插件。 网址:http://www.ztree.me/v3/main.p... 上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指...
摘要:由于工作需要,这里只是把组合功能中样式的左侧菜单参考源码实现了,分享给大家我的学习所得。代码的配置注意在的配置利用回调将展开按钮转移到标签内,否则展开按钮即小箭头图片无法显示。 简介 为了让朋友们更容易的学习 zTree,官网给出了大量的 Demo,不同的图标,不同的风格,好学易懂,这是官网链接:zTree v3.5 Demo 演示。 由于工作需要,这里只是把组合功能中OutLook ...
摘要:前言是一个依靠实现的多功能树插件。不同的树目录根据不同的数据,在服务器端编写好不同的,将其配置在这里即可。依赖获取的数据类型,默认值。依赖用于对返回数据进行预处理的函数。详细说明参见文档代码还是树插件使用方法与例子中的那个,不在重复粘贴。 前言 zTree 是一个依靠 jQuery 实现的多功能 树插件。 网址:http://www.ztree.me/v3/main.p... 上回说到...
阅读 3058·2023-04-25 22:16
阅读 2515·2021-10-11 11:11
阅读 3311·2019-08-29 13:26
阅读 670·2019-08-29 12:32
阅读 3488·2019-08-26 11:49
阅读 3114·2019-08-26 10:30
阅读 2025·2019-08-23 17:59
阅读 1592·2019-08-23 17:57