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; }