zTree树

【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='增加子项' '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;
}