zTree

摘要： 【1】摺疊展開 <div class="box-tools pull-right"> <button type="button" id="expandfalse" class="btn btn-box-too...

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