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