以下代碼可以實現在不展開父節點的情況下，勾選父節點後，可以勾選上其下的所有節點，但是如果子節點以及孫節點較多的話，會出現錯誤，需要將延時的時間設置長一點，即 setTimeout(function(){},1000)，後面的數字表示延時的毫秒數，並且該種方法的用戶體驗不是很好。 <link rel= ...
以下代碼可以實現在不展開父節點的情況下，勾選父節點後，可以勾選上其下的所有節點，但是如果子節點以及孫節點較多的話，會出現錯誤，需要將延時的時間設置長一點，即 setTimeout(function(){},1000)，後面的數字表示延時的毫秒數，並且該種方法的用戶體驗不是很好。
<link rel="stylesheet" href="demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery.ztree.all-3.5.js"></script>
<script language="JavaScript">
var setting = {
check: {
enable : true, //設置zTree的節點上顯示勾選框(checkbox或radio)
chkStyle: 'checkbox' //指定勾選框類型為checkbox(setting.check.enable=true時生效)
},
async : {
enable : true, //設置 zTree是否開啟非同步載入模式
url : "url", //Ajax 獲取數據的URL 地址
autoParam : ["id"] //非同步載入時自動提交父節點屬性的參數,假設父節點 node = {id:1, name:"test"}，非同步載入時，提交參數 zId=1
},
data:{ // 必須使用data
simpleData : {
enable : true,
idKey : "id", //id編號命名 預設
pIdKey : "pid",//父id編號命名預設
rootPId : 0 //用於修正根節點父節點數據，即 pIdKey 指定的屬性值
}
},
// 回調函數
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
},
onCheck : onCheck,
//捕獲非同步載入出現異常錯誤的事件回調函數 和 成功的回調函數
onAsyncError : zTreeOnAsyncError,
onAsyncSuccess : function(event, treeId, treeNode, msg){
}
}
};
function onCheck(event, treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj("mytree");
if(treeNode.isParent){
if (!treeNode.open){
zTree.expandNode(treeNode, true, true, false);
onExpand(event, treeId, treeNode);
setTimeout(function(){
var children=treeNode.children;
for(var i=0;i<children.length;i++){
if(children[i].isParent ){
zTree.expandNode(children[i], false, false, false);
}
}
zTree.expandNode(treeNode, false, false, false);
},1000);//延時1秒
}else{
var children=treeNode.children;
for(var i=0;i<children.length;i++){
if(children[i].isParent ){
if (!children[i].open){
zTree.expandNode(children[i], true, true, false);
onExpand(event, treeId, children[i]);
}
}
}
setTimeout(function(){
var children=treeNode.children;
for(var i=0;i<children.length;i++){
if(children[i].isParent ){
zTree.expandNode(children[i], false, false, false);
}
}
},1500);//延時1.5秒
}
}
};
function onExpand(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("mytree");
var checked=treeNode.checked;
setTimeout(function(){
var children=treeNode.children;
for(var i=0;i<children.length;i++){
zTree.checkNode(children[i],checked,checked);
if(children[i].isParent){
if (!children[i].open){
zTree.expandNode(children[i], true, true, false);
onExpand(event, treeId, children[i]);
//alert(children[i].open);
zTree.expandNode(children[i], false, false, false);
}
}
}
},500);//延時0.5秒
};
// 載入錯誤提示
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("載入錯誤：" + XMLHttpRequest);
};
// 過濾函數
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
for ( var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
// 渲染
$(document).ready(function() {
var str = <%=jsonString%>;
var show = "<input type='text' style='width: 100px;display:none;' name='code' value='"+str.code+"'/>";
show += "<input type='text' style='width: 100px;display:none;' name='name' value='"+str.name+"'/>";
$("#condition").html(show);
$.fn.zTree.init($("#mytree"), setting);
resetDialogHeight();
});
//彈出視窗高度調整自適應
function resetDialogHeight(){
var height = document.body.scrollHeight;
var heightTop = document.body.scrollTop;
if ( window.XMLHttpRequest ) {
window.dialogHeight = (height+heightTop+295) + "px";
} else {
window.dialogHeight=(height+heightTop+55) + "px";//IE6不能自動調整高度，要加45
}
}
function OkOnClick(){
var treeObj = $.fn.zTree.getZTreeObj("mytree");
var nodes = treeObj.getCheckedNodes(true);
var values = "";
var total = nodes.length;
for (var i = 0; i < total; i++) {
values += ',"' + nodes[i].id + '":"' + nodes[i].id + '"';//獲取選中節點的id值
}
if( total > 0 ) {
values = values.substring(1);
}
var result = "";
result += '{"code":"' + $("input[name='code']").val() + '",';
result += '"name":"' + $("input[name='name']").val() + '",';
result += '"conditions":{' + values + '}}';
self.returnValue = result;
self.close();
}
</script>
關於在不展開父節點的情況下，勾選父節點後，可以勾選上其下的所有節點，如果還有更好的方法，麻煩各位大神貼出來，感激不盡。
