jquery学习笔记--ztree插件
var privilege={
init:{
initEvent:function(){
//对权限设置绑定事件
$("a").each(function(){
if($(this).text()=="设置权限"){
$(this).unbind("click");
$(this).bind("click",function(){
//1显示div
privilege.option.divOption.showDiv();
//2:给username,uid赋值;
privilege.init.initData.call(this);
//3:显示user
privilege.option.userOption.showUser();
//先显示load图片,给用户友好体验;
privilege.option.privilegeTreeOption.controlIsPrivilegeTreeOrLoading({
privilegeTreeShow:false,
loadingShow:true
});
//4加载权限树;
privilege.option.privilegeTreeOption.loadPrivilegeTree();
});
}
});
//对全选复选框绑定事件;
$("#allchecked").unbind("change");
$("#allchecked").bind("change",function(){
//对应操作;
privilege.option.privilegeTreeOption.isAllChecked.call(this);
});
//对保存按钮绑定事件;
$("#savePrivilege").unbind("click");
$("#savePrivilege").bind("click",function(){
//对应操作;
});
},
initData:function(){
privilege.data.user.username=$(this).parent().siblings("td:first").text();
privilege.data.user.uid=$(this).parent().siblings("input[type='hidden']").val();
}
},
data:{
user:{
username:'',
uid:''
}
},
option:{
divOption:{
showDiv:function(){
$("#privilegeContent").show();
$("#privilegeTitle").show();
$("#userTitle").show();
//$("div:hidden").show();
}
},
userOption:{
showUser:function(){
$("#userImage").text(privilege.data.user.username);
}
},
privilegeTreeOption:{
zTree:'',
setting : {
isSimpleData : true,
treeNodeKey : "mid",
treeNodeParentKey : "pid",
checkable : true,
showLine : true,
root : {
isRoot : true,
nodes : []
},
callback:{
beforeChange:function(){
privilege.option.privilegeTreeOption.changeCheckType({ "Y": "p", "N": "s" });
},
change:function(event, treeId, treeNode){
//如果节点没有被选中:即由选中状态变为不选中时,你的全选复选框就要变为不选中;
//但是他走的方法是isAllChecked方法,该方法改变了规则;因此不靠谱;
//if(!treeNode.checked){
// $("#allchecked").attr("checked",false);
//}
if(privilege.option.privilegeTreeOption.isAllNodesChecked()){
//如果节点全部被选中,就将全选框选中;
$("#allchecked").attr("checked",true);
}else{
$("#allchecked").attr("checked",false);
}
}
}
},
loadPrivilegeTree:function(){
//发送ajax请求,加载树;
$.post("privilegeAction_showAllPrivileges.action",null,function(data){
//到了这里就有值了,把树挂到页面上去;privileges
privilege.option.privilegeTreeOption.zTree=
$("#privilegeTree").zTree(privilege.option.privilegeTreeOption.setting, data.privileges);
//控制loading和权限树;显示权限树,将loading隐藏;
privilege.option.privilegeTreeOption.controlIsPrivilegeTreeOrLoading({
privilegeTreeShow:true,
loadingShow:false
});
//到这了说明树都加载出来了;看看zTree的情况,如果全部选中,我就让全选复选框的初始值设置为checked;
var flag=privilege.option.privilegeTreeOption.isAllNodesChecked();
if(flag){
$("#allchecked").attr("checked",true);
}else{
$("#allchecked").attr("checked",false);
}
});
},
controlIsPrivilegeTreeOrLoading:function(JSON){
if(JSON.privilegeTreeShow){
//将权限树显示;并将全选复选框变为可用;
$("#allchecked").attr("disabled","");
$("#privilegeTree").show();
}else{
$("#allchecked").attr("disabled","disabled");
$("#privilegeTree").hide();
}
if(JSON.loadingShow){
$("#allchecked").attr("disabled","disabled");
$("#loading").show();
}else{
$("#allchecked").attr("disabled","");
$("#loading").hide();
}
},
isAllChecked:function(){
//在全选之前,应该要保留默认规则,因为你的规则被你改变了;注意checkType的大小写;
privilege.option.privilegeTreeOption.changeCheckType({
"Y": "ps", "N": "ps"
});
//如果你的全选框选中我就设置zTree的节点全部选中;否则就全不选;
privilege.option.privilegeTreeOption.zTree.checkAllNodes($(this).attr("checked"));
},
isAllNodesChecked:function(){
//获取没有被选中的zTree中的节点;
var uncheckedNodes=privilege.option.privilegeTreeOption.zTree.getCheckedNodes(false);
if(uncheckedNodes.length==0)
return true;//全部选中就返回true;
return false;
},
changeCheckType:function(checkType){
//获取setting;
var setting=privilege.option.privilegeTreeOption.zTree.getSetting();
setting.checkType=checkType;
privilege.option.privilegeTreeOption.zTree.updateSetting(setting);
}
}
}
};
$(document).ready(function(){
privilege.init.initEvent();
});