例子如下：第一个 文本框：
<div class="content_wrap" style="height: 0;position: relative; "> <div class="zTreeDemoBackground left" style="height: 0; "> <ul class="list"> <li class="title"> <input id="maintprogram" type="text" value="" class="m-wrap width435" onclick="showMenu();" /> <!-- 需要点击 的input框 --> </ul> </div> <div class="right" style="display: none;"> <！-- 全选选中check --> <ul class="info"> <li class="title"> <ul class="list"> <p > <input type="checkbox" id="py" class="checkbox first" checked /> <input type="checkbox" id="sy" class="checkbox first" checked /> <input type="checkbox" id="pn" class="checkbox first" checked /> <input type="checkbox" id="sn" class="checkbox first" checked /> <ul id="codecar" class="log" ></ul> </p> </ul> </li> </ul> </div> <!-- 显示树 div--> <div id="menuContent" class="menuContent" style="display:none; top: 24px!important;left: 0px!important; position: absolute; width:435px"> <ul id="treeDemo" class="ztreeOrga" style="margin-top:0; width:100%; height: auto;background: #fafafa; position: absolute;z-index: 999;"></ul> </div> </div>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true,
chkStyle: "checkbox"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck,
}
};
var zNodes = [
{id: 1,pId: 0,name: "一级保养",open: false,check: true},
{id: 11,pId: 1,name: "机油"},
{id: 12,pId: 1,name: "机油滤清器"},
{id: 13,pId: 1,name: "燃油滤清器"},
{id: 14,pId: 1,name: "空气滤清器"},
{id: 15,pId: 1,name: "冷却液"},
{id: 16,pId: 1,name: "制动器"},
{id: 17,pId: 1,name: "离合器"},
{id: 18,pId: 1,name: "转向助力"},
{id: 19,pId: 1,name: "电瓶"},
{id: 100,pId: 1,name: "皮带"},
{id: 101,pId: 1,name: "车灯"},
{id: 102,pId: 1,name: "轮胎"},
{id: 103,pId: 1,name: "尾气"},
{id: 2,pId: 0,name: "二级保养",open: false,check: true},
{id: 21,pId: 2,name: "机油"},
{id: 22,pId: 2,name: "机油滤清器"},
{id: 23,pId: 2,name: "燃油滤清器"},
{id: 24,pId: 2,name: "空气滤清器"},
{id: 25,pId: 2,name: "冷却液"},
{id: 26,pId: 2,name: "制动器"},
{id: 27,pId: 2,name: "离合器"},
{id: 28,pId: 2,name: "转向助力"},
{id: 29,pId: 2,name: "电瓶"},
{id: 200,pId: 2,name: "皮带"},
{id: 201,pId: 2,name: "车灯"},
{id: 202,pId: 2,name: "轮胎"},
{id: 203,pId: 2,name: "尾气"},
{id: 204,pId: 2,name: "悬挂"},
{id: 205,pId: 2,name: "润滑油"},
{id: 206,pId: 2,name: "发电机"}
]; var codecar; function beforeClick(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function onClick(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function onCheck(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), v = ""; for (var i = 0, l = nodes.length; i < l; i++) { // v += nodes[0].name + "："; v += nodes[i].name + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); var cityObj = $("#maintprogram"); cityObj.attr("value", v); } function showMenu() { var cityObj = $("#maintprogram"); var cityOffset = $("#maintprogram").offset(); $("#menuContent").css({ left: "0px", top: "24px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); } function hideMenu() { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "maintprogram" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) { hideMenu(); } } function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), py = $("#py").attr("checked")? "p":"", sy = $("#sy").attr("checked")? "s":"", pn = $("#pn").attr("checked")? "p":"", sn = $("#sn").attr("checked")? "s":"", type = { "Y":py + sy, "N":pn + sn}; // zTree.setting.check.chkboxType = type; showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); } function showCode(str) { if (!codecar) codecar = $("#codecar"); codecar.empty(); codecar.append("<li>" + str + "</li>"); } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); setCheck(); $("#py").bind("change", setCheck); $("#sy").bind("change", setCheck); $("#pn").bind("change", setCheck); $("#sn").bind("change", setCheck); }); </SCRIPT>
第二个文本框：
<div class="content_wrap" style="height: 0;position: relative; "> <div class="zTreeDemoBackground left" style="height: 0; "> <ul class="list"> <li class="title"> <input id="maintprogramup" type="text" value="" class="m-wrap width435" onclick="showMenu1();"/> </ul> </div> <div class="right" style="display: none;"> <ul class="info"> <li class="title"> <ul class="list"> <p> <input type="checkbox" id="py1" class="checkbox first" checked /> <input type="checkbox" id="sy1" class="checkbox first" checked /> <input type="checkbox" id="pn1" class="checkbox first" checked /> <input type="checkbox" id="sn1" class="checkbox first" checked /> <ul id="codecar1" class="log" ></ul> </p> </ul> </li> </ul> </div> <div id="menuContent1" class="menuContent" style="display:none; top: 24px!important;left: 0px!important; position: absolute; width:435px"> <ul id="treeDemo1" class="ztreeOrga" style="margin-top:0; width:100%; height: auto;background: #fafafa; position: absolute;z-index: 999;"></ul> </div> </div>
<SCRIPT type="text/javascript">
var setting1 = {
check: {
enable: true,
chkStyle: "checkbox"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick1,
onCheck: onCheck1
}
};
var zNodes1 = [
{id: 1,pId: 0,name: "一级保养",open: false,check: true},
{id: 11,pId: 1,name: "机油"},
{id: 12,pId: 1,name: "机油滤清器"},
{id: 13,pId: 1,name: "燃油滤清器"},
{id: 14,pId: 1,name: "空气滤清器"},
{id: 15,pId: 1,name: "冷却液"},
{id: 16,pId: 1,name: "制动器"},
{id: 17,pId: 1,name: "离合器"},
{id: 18,pId: 1,name: "转向助力"},
{id: 19,pId: 1,name: "电瓶"},
{id: 100,pId: 1,name: "皮带"},
{id: 101,pId: 1,name: "车灯"},
{id: 102,pId: 1,name: "轮胎"},
{id: 103,pId: 1,name: "尾气"},
{id: 2,pId: 0,name: "二级保养",open: false,check: true},
{id: 21,pId: 2,name: "机油"},
{id: 22,pId: 2,name: "机油滤清器"},
{id: 23,pId: 2,name: "燃油滤清器"},
{id: 24,pId: 2,name: "空气滤清器"},
{id: 25,pId: 2,name: "冷却液"},
{id: 26,pId: 2,name: "制动器"},
{id: 27,pId: 2,name: "离合器"},
{id: 28,pId: 2,name: "转向助力"},
{id: 29,pId: 2,name: "电瓶"},
{id: 200,pId: 2,name: "皮带"},
{id: 201,pId: 2,name: "车灯"},
{id: 202,pId: 2,name: "轮胎"},
{id: 203,pId: 2,name: "尾气"},
{id: 204,pId: 2,name: "悬挂"},
{id: 205,pId: 2,name: "润滑油"},
{id: 206,pId: 2,name: "发电机"}
];
var codecar1;
function beforeClick1(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onClick1(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck1(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
// v += nodes[0].name + "：";
v += nodes[i].name + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#maintprogramup");
cityObj.attr("value", v);
}
function showMenu1() {
var cityObj = $("#maintprogramup");
var cityOffset = $("#maintprogramup").offset();
$("#menuContent1").css({
left: "0px",
top: "24px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown1);
}
function hideMenu1() {
$("#menuContent1").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown1);
}
function onBodyDown1(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "maintprogramup" || event.target.id == "menuContent1" || $(event.target).parents("#menuContent1").length > 0)) {
hideMenu1();
}
}
function setCheck1() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
py = $("#py1").attr("checked")? "p":"",
sy = $("#sy1").attr("checked")? "s":"",
pn = $("#pn1").attr("checked")? "p":"",
sn = $("#sn1").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
// zTree.setting1.check.chkboxType = type;
showCode1('setting1.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
function showCode1(str) {
if (!codecar) codecar = $("#codecar1");
codecar.empty();
codecar.append("<li>" + str + "</li>");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo1"), setting1, zNodes1);
setCheck1();
$("#py1").bind("change", setCheck1);
$("#sy1").bind("change", setCheck1);
$("#pn1").bind("change", setCheck1);
$("#sn1").bind("change", setCheck1);
});
</SCRIPT>