ztree入门应用（二）

http://www.cnblogs.com/liaidai/p/4741341.html

　时间不稳定，写东西都是断断续续的，今天来的早，继续写昨天没写完的ztree，昨天还差一个callback没写，其实这个才是最重要的。废话不多说，开始。

callback

callback: {
onClick : showInfo,
onRightClick: showMenu,

beforeRemove : isRemove,
beforeRename : isRename,

onRemove : remove,
onRename : rename,

beforeCheck : zTreeBeforeCheck,
onCheck : zTreeOnCheck,
},

　　onClick：用于捕获节点被点击的事件回调函数；如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。默认值为null

/**
* @param event
* @param treeId
* @param treeNode
*/
function showInfo(event, treeId, treeNode){
if(treeNode.type == "f"){// 无需统计叶子节点
return;
} else if(treeNode.type == "m"){// 统计模块
addUpForModule(treeNode.id);
} else if(treeNode.type == "s"){// 统计系统
addUpForSystem(treeNode.id);
}
showTable(requireCount);
showChart(requireCount);
}

注：event  js event对象，treeId  String类型，对应ztree的treeid，便于用户操作；treeNode  JSON类型，被点击的节点的JSON数据对象，clickFlag  number 节点被点击后的选中操作类型。

　　onRightClick：用于捕获 zTree 上鼠标右键点击之后的事件回调函数，默认值为null;

　　　　　　如果设置了 setting.callback.beforeRightClick 方法，且返回 false，将无法触发 onRightClick 事件回调函数。

　　　　　　只要将 function 的引用赋给 onRightClick 属性，则右键点击 zTree 时，将屏蔽浏览器的右键菜单。

/**
* 右键菜单显示
* show the action menu while right click the node
* @param event
* @param treeId
* @param treeNode
*/
function showMenu(event, treeId, treeNode){
currNode = treeNode;
$("#rightClickMenu").css({
"top" : event.clientY + "px",
"left" : event.clientX + "px",
}).show();
}

参数和上面的onclick参数类似，不在解释了；唯一要说的就是treeNode，如果右键点击不在节点上，那么返回null;

　　beforeRemove:用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作,默认值为null;返回值为true/false，如果返回false，ztree将不删除节点，也无法触发onremove事件回调函数；

　　

/**
* action before remove a node
* @returns {Boolean}
*/
function isRemove(treeId, treeNode){
if(confirm("要删除该节点吗? ")){
return true;
}
return false;
}

　　beforeRename：用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作；默认值为null.

/**
* action before rename a node
* @returns {Boolean}
*/
function isRename(treeId, treeNode, newName, isCancel){
if(isCancel){
return false;
}
if(confirm(" rename to " + newName)){
return true;
}
return false;
}

　　注：newName为修改后的名称，isCancel boolean类型，是否取消操作，isCancel = true 表示取消编辑操作（按下 ESC 或 使用 cancelEditName 方法），isCancel = false 表示确认修改操作，回调函数的返回值为true/false。

　　如果返回 false，zTree 将保持名称编辑状态，无法触发 onRename 事件回调函数，并且会导致屏蔽其它事件，直到修改名称使得 beforeRename 返回 true

　　如果返回 false，不会让 input 输入框获取焦点，避免由于警告信息而导致反复触发 beforeRename。 请在关闭提示警告信息后，利用 editName 方法让 input 重新获取焦点。

　　beforeCheck：用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选，默认值：null；

/**
* @param treeId
* @param treeNode
* @returns {Boolean}
*/
function zTreeBeforeCheck(treeId, treeNode) {
return true;
};

返回值是 true / false；如果返回 false，将不会改变勾选状态，并且无法触发 onCheck 事件回调函数；

　　onCheck：用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数，如果设置了 setting.callback.beforeCheck 方法，且返回 false，将无法触发 onCheck 事件回调函数。默认值：null

/**
* @param event
* @param treeId
* @param treeNode
*/
function zTreeOnCheck(event, treeId, treeNode) {
var datas = {
'id' : treeNode.id,
'type' : treeNode.type,
'checked' : treeNode.checked
};
$.ajax({
url : stateURL,
data : datas,
error : function(mes) {
alert("请检查网络" + mes);
}
});
};

　　其实就是记录节点的选中状态，我这里是选中之后将结果记录在数据库了，所以有后台操作。treeNode是选中节点的JSON对象，因此可以使用treeNode拿到节点对应的值，传到后台进行修改。

后台代码：

private Integer id;
private String type;
private boolean checked;

public String updateState(){
nodeService.updateTreeState(id, type, checked);
this.reply("1");
return null;
}

--------------------------------------华丽分割线------------------------------------------------------------------------------------------------------------------

　　上面的基本就是翻译了一下API，没什么卵用，下面其实也没什么用，但是做了这个功能就加上吧。什么呢，就是树的下面有一个一次加载全部的按钮，点击按钮，展示树的全部节点，下面上代码：

首先是页面：

<button id="btn_loadAll" class="btn btn-primary btn-sm">
加载全部 <i class="glyphicon glyphicon-download"></i>
</button>

JS事件：

$("#btn_loadAll").on('click', function(){
$.post(getAllUrl, { 'pid' : 0 },
function(msg) {
if (msg) {
var nodeArr = eval("(" + msg + ")");
var len = nodeArr.length;
for ( var i = 0; i < len; i++) {
if(nodeArr[i].type != "f"){
nodeArr[i].open = true;
}
}
$.fn.zTree.init($("#tree"), setting, nodeArr);
}
}
);
});

后台代码：

public String getAll(){
Integer rid = SessionUtils.getCurrentRequireFromSession(request).getId();
List<SystemModule> list = nodeService.getWholeTree(rid);
String json = new Gson().toJson(list);
try {
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(json);
} catch (IOException e) {
e.printStackTrace();
}

return null;
}

　　注：得说明一点，JS事件异步加载数据的时候传递了一个pid是0，但是在后台代码里面没有用到，但是却用到了另外一个获取到的pid，这个是有其他原因吧，大家看的时候就把id看成0就是了，当然你要查出来数据的话就需要在数据库里面把pid改成0。

　具体的查询代码：

public List<SystemModule> getSystems(Integer pid) {
List<SystemModule> allArr = new ArrayList<SystemModule>();
// get the system level
List<SystemModule> list = getNodeChildren(pid);
// get the module level
for(SystemModule module : list){
allArr.add(module);
if(!module.getType().equals("f")){
allArr.addAll(getSystems(module.getId()));
}
}
return allArr;
}

　　这里呢，用到了递归，虽然递归的效率不高，但是这里没有那么多数据，递归就递归吧，注意一下就是了。

--------------------------------------华丽分割线------------------------------------------------------------------------------------------------------------------

　　这次的总结暂时就这样吧，本来想多写点做的功能，但是JS代码太多，一直贴代码也不是事，以后写总结的时候还是得改变改变风格。