zTree

共计 3691 个字符，预计需要花费 10 分钟才能阅读完成。

【1】折叠展开
<div class=”box-tools pull-right”>
<button type=”button” id=”expandfalse” class=”btn btn-box-tool” title=” 折叠 ”>
<i class=”fa fa-minus”></i>
</button>
<button type=”button” id=”expandtrue” class=”btn btn-box-tool” title=” 展开 ”>
<i class=”fa fa-plus”></i>
</button>
</div>
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：
<ul id=”t_suptype” class=”ztree”></ul>
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 = “<span class=’button add’ id=’addBtn_” + treeNode.tId
+ “‘ title=’ 增加子项 ’ onfocus=’this.blur();’></span>”;
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<zTreeNode> suptypeList = suptypeService.getTreeAllSuptype();
return JSON.toJSONString(suptypeList);
}
4）映射文件
<select id=”getTreeAllSuptype” resultType=”com.tuodata.bid.common.domain.zTreeNode”>
select `id`,`parent`,`code`,`name`,`icon`,`t`,`isp`,`open`,`s`,`ls`,`f` from bid_suptype where f = 1
</select>
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;
}