【www.bbyears.com--说说】
今天就说说ztree checkbox使用和修改样式 这些事。
官方的例子比较简单：
但是已经很全面了。要想使用checkbox，需要在：
1、setting 配置信息说明：
setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
使用 checkbox，必须设置 setting.check 中的各个属性，详细请参见 API 文档中的相关内容
父子关联关系：
被勾选时：关联父 关联子
取消勾选时：关联父 关联子
2、treeNode 节点数据说明
1)、如果需要初始化默认节点被勾选，请设置 treeNode.checked 属性，详细请参见 API 文档中的相关内容
2)、如果某节点禁用 checkbox，请设置 treeNode.chkDisabled 属性，详细请参见 API 文档中的相关内容 和 "chkDisabled 演示"
3)、如果某节点不显示 checkbox，请设置 treeNode.nocheck 属性，详细请参见 API 文档中的相关内容 和 "nocheck 演示"
4)、如果更换 checked 属性，请参考 API 文档中 setting.data.key.checked 的详细说明
5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明
初始化ztree：
代码如下var setting = {
check: {
enable: true
// chkboxType : { "Y" : "", "N" : "" }
},
data: {
simpleData: {
enable: true
}
}
};
function createTree () {
var zNodes;
$.ajax({
url: "Handler.ashx?action=GetModule", //url action是方法的名称
data: { id: "11" },
type: "POST",
dataType: "text", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
ContentType: "application/json; charset=utf-8",
success: function (data) {
zNodes = data;
$.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
},
error: function (msg) {
alert("失败");
}
});
}
function Add() {
}
function AddChild() {
}
function Update() {
}
function Delete() {
}
function DeleteAll() {
}
$(document).ready(function () {
createTree();
$("#btn_GetCheckedAll").click(GetCheckedAll);
$("#btn_CheckAllNodes").click(CheckAllNodes);
$("#btn_CancelAllNodes").click(CancelAllNodes);
$("#btn_AssignCheck").click(AssignCheck);
$("#btn_Disabled1").click(Disabled1);
$("#btn_Disabled2").click(Disabled2);
$("#btn_Add").click(Add);
$("#btn_AddChild").click(AddChild);
$("#btn_Update").click(Update);
$("#btn_Delete").click(Delete);
$("#btn_DeleteAll").click(DeleteAll);
//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
checkbox事件：
代码如下//获取所有选中节点的值
function GetCheckedAll() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var msg = "name--id--pid\n";
for (var i = 0; i < nodes.length; i++) {
msg += nodes[i].name+"--"+nodes[i].id+"--"+nodes[i].pId+"\n";
}
$("#msg").val();
$("#msg").val(msg);
}
//全选
function CheckAllNodes() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(true);
}
//全取消
function CancelAllNodes() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);
}
//选中指定的节点
function AssignCheck() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
// var nodes = treeObj.getNodes();
treeObj.checkNode(treeObj.getNodeByParam("id", "000100010002", null), true, true);
treeObj.checkNode(treeObj.getNodeByParam("id", "0001000100010001000100010001", null), true, true);
}
//禁用、解禁选中节点
function Disabled1() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes();
for (var i = 0; i < nodes.length; i++) {
treeObj.setChkDisabled(nodes[i], true);
}
}
function Disabled2() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes();
for (var i = 0; i < nodes.length; i++) {
treeObj.setChkDisabled(nodes[i], false);
}
}
当然，checkbox的样式可能比较丑，大家要想自己加选择怎么办？那就去掉checkbox！然后自己在每个node节点上加上自定义函数进行处理：
我们在使用zTree的时候需要下载ztree的几个js文件，我们可以在jquery.ztree.core-3.5.js中去实现。
在jquery.ztree.core-3.5.js中有个_setting的初始化代码，显示属性的初始化还有事件的初始化等等，如下图：
这是下拉列表的点击事件，我们写上自己的事件。
请看下面的代码：
代码如下var value=""; //文本框中显示的值 例：张三，李四，王五
var pIndex=""; //选择值得id 例：1，2，3
var selectCount=false; //表示是否为第一次选择 用于清除拼接的逗号
function OnListClick(event, treeId, treeNode, clickFlag) {
if (treeNode.isParent) {
return;
}
value+=","+treeNode.name;
pIndex+=","+treeNode.id;
if(selectCount==false){ //这里清除第一个逗号
value=value.substr(1,value.length);
pIndex=pIndex.substr(1,pIndex.length);
selectCount=true;
}
var valueObj="";
var pIndexObj="";
if(treeId=="personTree1"){
$("#div1personTree1").css("display","none");
$("#txtChargePerson").attr("value", treeNode.name);
$("#txtHiddenPerson").attr("value", treeNode.id);
}else if(treeId=="personTree2"){
valueObj=$("#txtChargePersonS");
pIndexObj=$("#txtHiddenSPerson");
valueObj.attr("value", value); //选择多项的时候拼接的值
pIndexObj.attr("value",pIndex);//选择多项的时候拼接的id
}else if(treeId=="personTree3"){
$("#div3personTree3").css("display","none");
$("#txtChargePersonItem").attr("value", treeNode.name);
$("#txtHiddenCPerson").attr("value", treeNode.id);
}else if(treeId=="personTree4"){
valueObj=$("#txtExaminePerson");
pIndexObj=$("#txtHiddenEPerson");
valueObj.attr("value", value);
pIndexObj.attr("value",pIndex);
}else if(treeId=="personTree5"){
valueObj=$("#txtDesignPerson");
pIndexObj=$("#txtHiddenDPerson");
valueObj.attr("value", value);
pIndexObj.attr("value",pIndex);
}
}