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.controlIsPrivilegeTreeOr Loading({

        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.controlIsPrivilegeTreeOr Loading({

      privilegeTreeShow:true,

      loadingShow:false

      });

      //到这了说明树都加载出来了;看看zTree的情况,如果全部选中,我就让全选复选框的初始值设置为checked;

      var flag=privilege.option.privilegeTreeOption.isAllNodesChecked();

      if(flag){

      $("#allchecked").attr("checked",true);

      }else{

      $("#allchecked").attr("checked",false);

      }

    });

    },

   

    controlIsPrivilegeTreeOr Loading: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();

});