xch问题库Ztree树操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>问题分类</title>
<meta name="decorator" content="default" />
<%@include file="/WEB-INF/views/include/treeview.jsp"%>
<style type="text/css">
.ztree {
overflow: auto;
margin: 0;
_margin-top: 10px;
padding: 10px 0 0 10px;
}
.ztree li span.button.add {
margin-left:2px;
margin-right: -1px;
background-position:-144px 0;
vertical-align:top;
*vertical-align:middle
}
.accordion-inner {
padding: 2px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#tree").height($(window).height()-20);
$(window).resize(function(){
$("#tree").height($(window).height()-20);
});
var Nodes =[
{id:'0', name:"问题分类列表",},
<c:forEach items="${questionCatalogTreeData}" var="qct">
{id:'${qct.id}',name:"${qct.catalogName}(${qct.orderNum})",pId:"0"},
</c:forEach>];
var setting = {
data: {
simpleData: {
enable: true,
/**确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array),
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式，默认值：false
如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。*/
idKey:"id",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
rootPId:"-1"//用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
}
},
view: {
selectedMulti: false,//设置是否允许同时选中多个节点。
addHoverDom: addHoverDom,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮,请务必与 setting.view.removeHoverDom 同时使用，addHoverDom方法见下文
removeHoverDom: removeHoverDom,//参数列表（treeId，treeNode）（对应 zTree 的 treeId，便于用户操控，需要显示自定义控件的节点 JSON 数据对象），removeHoverDom方法见下文
nameIsHTML: true //设置 name 属性是否支持 HTML 脚本 例：var node = {"name":"<font color='red'>test</font>"};
},
callback: { //回调
onClick: zTreeOnClick,//用于捕获节点被点击的事件回调函数，zTreeOnClick方法见下文
beforeRemove: zTreeBeforeRemove,//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作,zTreeBeforeRemove方法见下文
beforeEditName: beforeEditName//用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态,确定将触发自定义的编辑界面操作。beforeEditName方法见下文
},
//如不需增删改节点可不需要edit
/**edit: {
enable: true,//设置 zTree 是否处于编辑状态,请在初始化之前设置，初始化后需要改变编辑状态请使用 zTreeObj.setEditable() 方法
editNameSelectAll: true,//节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。 [setting.edit.enable = true 时生效]
showRemoveBtn: showRemoveBtn,
/**
设置是否显示删除按钮。[setting.edit.enable = true 时生效]默认值：true,当点击某节点的删除按钮时：
1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。
*/
removeTitle: "删除问题分类",//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]默认值："remove"
showRenameBtn: showRenameBtn,
/**
设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效]默认值：true,当点击某节点的编辑名称按钮时：
1、进入节点编辑名称状态。
2、编辑名称完毕（Input 失去焦点 或 按下 Enter 键），会触发 setting.callback.beforeRename 回调函数，用户可根据自己的规则判定是否允许修改名称。
3、如果 beforeRename 返回 false，则继续保持编辑名称状态，直到名称符合规则位置 （按下 ESC 键可取消编辑名称状态，恢复原名称）。
4、如果未设置 beforeRename 或 beforeRename 返回 true，则结束节点编辑名称状态，更新节点名称，并触发 setting.callback.onRename 回调函数。
*/
renameTitle: "修改问题分类",//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效]默认值："rename"
drag:{
isCopy: false,//拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效],默认值：true
isMove: false//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
}
}*/
};
var tree = $.fn.zTree.init($("#tree"), setting, Nodes);
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
for(var i=0;i<nodes.length;i++){
tree.expandNode(nodes[i], true);
};
});
//加载树只需要上面步骤即可
//删除节点
function zTreeBeforeRemove(treeId, treeNode){
var url = "${ctx}/wy360/question/catalog/delete?id="+treeNode.id;
confirmx('确认要删除该问题分类吗？', url);
};
//编辑节点
function beforeEditName(treeId, treeNode) {
$(".layui-layer-btn .layui-layer-btn0").css("color","#04131b");
var url = "${ctx}/wy360/question/catalog/form?id="+treeNode.id;
var opt = {
btn: ["关闭"],
skin:"huang-skin",
area:['1000px','500px']
};
openLayerWindow(url,"问题分类修改",opt);
};
//增加节点
function addHoverDom(treeId, treeNode) {
if(treeNode.id == "0"){
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.id
+ "' title='添加问题分类' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var url = "${ctx}/wy360/question/catalog/form";
var opt = {
btn: ['关闭'],
skin:"huang-skin",
area:['1000px','500px']
};
openLayerWindow(url, "问题分类添加",opt);
});
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.id).unbind().remove();
};
function showRenameBtn(treeId, treeNode) {
return treeNode.id != "0";
};
function showRemoveBtn(treeId, treeNode) {
return treeNode.id != "0";
};
function zTreeOnClick(event, treeId, treeNode){
if(typeof parent.doQuestionCatalogClick == 'function'){
parent.doQuestionCatalogClick(treeNode.id,treeNode.name);
}
};
</script>
</head>
<body>
<sys:message content="${message}"/>
<!-- 树形图 -->
<div class="accordion-body" >
<div class="accordion-inner">
<div id="tree" class="ztree" ></div>
</div>
</div>
</body>
</html>