zTree

marser 發(fā)布于2019-08-16 16:14 / 2721人閱讀

摘要：折疊展開折疊展開腳本下面的是設(shè)置了新增按鈕的和設(shè)置了高度的代碼增加子項(xiàng)控制器控制器映射文件工具類工具類省略保存后鎖定到新增的節(jié)點(diǎn)如果中放了添加按鈕，這個(gè)就是保存成功之后回去頁面展開顯示新增的節(jié)點(diǎn)保存禁止

【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);

             //下面的是設(shè)置了新增按鈕的和設(shè)置了高度的代碼
        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）保存后鎖定到新增的節(jié)點(diǎn)

如果zTree中放了添加按鈕，這個(gè)就是保存成功之后回去頁面展開顯示新增的節(jié)點(diǎn)
/**
     * 保存
     */
    @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】禁止獲取非文件夾的樹的值（觀察到復(fù)選框是暗色的）

check: {
    enable: true,
    chkboxType: { "Y" : "", "N" : "" }
}

【3】禁止獲取非文件夾的樹的值（觀察到復(fù)選框是暗色的）

(id, parent, code, name, icon, t, isp, open, s, ls, f)
parent：父節(jié)點(diǎn)
open:是否展開
1)樹實(shí)體的字段對應(yīng)
2)sql腳本
3)界面查詢

【4】判斷有無選中節(jié)點(diǎn)

var t_sup = $.fn.zTree.getZTreeObj("t_sup");
var tnodes = t_sup.getCheckedNodes();
if (tnodes.length == 0) {
    toastr.warning("請選擇關(guān)聯(lián)的供應(yīng)商分類");
    return;
}