first commit

This commit is contained in:
jefferyzhao
2025-07-31 17:44:12 +08:00
commit b9bdc8598b
42390 changed files with 4467935 additions and 0 deletions

View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - checkbox</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"can check 1-1-1"},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"can check 1-2", open:true},
{ id:121, pId:12, name:"can check 1-2-1"},
{ id:122, pId:12, name:"can check 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
var code;
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 (!code) code = $("#code");
code.empty();
code.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>
</HEAD>
<BODY>
<h1>Checkbox Operation</h1>
<h6>[ File Path: excheck/checkbox.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of setting</h2>
<ul class="list">
<li class="highlight_red">Must set setting.check attributes, see the API documentation for more related contents.</li>
<li><p>Linkage relationship between parent and child nodes:<br/>
check: <input type="checkbox" id="py" class="checkbox first" checked /><span>affect the parent</span>
<input type="checkbox" id="sy" class="checkbox first" checked /><span>affect the child</span><br/>
uncheck: <input type="checkbox" id="pn" class="checkbox first" checked /><span>affect the parent</span>
<input type="checkbox" id="sn" class="checkbox first" checked /><span>affect the child</span><br/>
<ul id="code" class="log" style="height:20px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node is checked, please set treeNode.checked attribute. See the API documentation for more related contents.</li>
<li class="highlight_red">2), If you need to initialize the node's checkbox is disabled, please set treeNode.chkDisabled attribute. See the API documentation for more related contents and 'chkDisabled Demo'.</li>
<li class="highlight_red">3), If you need to initialize the node don't show checkbox, please set treeNode.nocheck attribute. See the API documentation for more related contents and 'nocheck Demo'.</li>
<li class="highlight_red">4), If you need to change 'checked' to other attribute, please set setting.data.key.checked attribute. See the API documentation for more related contents.</li>
<li>5), By the way, please see the API documentation for 'treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus'.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Checkbox chkDisabled</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkDisabledInherit: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"disabled 1-2", chkDisabled:true, checked:true, open:true},
{ id:121, pId:12, name:"disabled 1-2-1", checked:true},
{ id:122, pId:12, name:"disabled 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
function disabledNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
disabled = e.data.disabled,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("Please select one node at first...");
}
if (disabled) {
inheritParent = $("#py").attr("checked");
inheritChildren = $("#sy").attr("checked");
} else {
inheritParent = $("#pn").attr("checked");
inheritChildren = $("#sn").attr("checked");
}
for (var i=0, l=nodes.length; i<l; i++) {
zTree.setChkDisabled(nodes[i], disabled, inheritParent, inheritChildren);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#disabledTrue").bind("click", {disabled: true}, disabledNode);
$("#disabledFalse").bind("click", {disabled: false}, disabledNode);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Checkbox chkDisabled Demo</h1>
<h6>[ File Path: excheck/checkbox_chkDisabled.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of 'setChkDisabled' method</h2>
<ul class="list">
<li>'setChkDisabled' method can set the node's checkbox / radio to be disabled or abled. See the API documentation for more related contents.</li>
<li><p>Try:<br/>
disabled: <input type="checkbox" id="py" class="checkbox first" /><span>affect the parent</span>
<input type="checkbox" id="sy" class="checkbox first" checked /><span>affect the child</span><br/>
unDisabled: <input type="checkbox" id="pn" class="checkbox first" checked /><span>affect the parent</span>
<input type="checkbox" id="sn" class="checkbox first" checked /><span>affect the child</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledTrue" href="#" title="set checkbox to be disabled." onclick="return false;">be disabled</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledFalse" href="#" title="set checkbox to be abled." onclick="return false;">be abled</a> ]</p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>This Demo only shows how use the chkDisabled attribute, detailed configuration information, please refer to 'Checkbox Operation'</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node's checkbox is disabled, please set treeNode.chkDisabled attribute. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Checkbox Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - getChangeCheckedNodes / getCheckedNodes</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1"},
{ id:12, pId:1, name:"can check 1-2", open:true},
{ id:121, pId:12, name:"can check 1-2-1", checked:true},
{ id:122, pId:12, name:"can check 1-2-2"},
{ id:123, pId:12, name:"can check 1-2-3"},
{ id:13, pId:1, name:"can check 1-3"},
{ id:2, pId:0, name:"can check 2", open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:223, pId:22, name:"can check 2-2-3"},
{ id:23, pId:2, name:"can check 2-3", checked:true}
];
var clearFlag = false;
function onCheck(e, treeId, treeNode) {
count();
if (clearFlag) {
clearCheckedOldNodes();
}
}
function clearCheckedOldNodes() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getChangeCheckedNodes();
for (var i=0, l=nodes.length; i<l; i++) {
nodes[i].checkedOld = nodes[i].checked;
}
}
function count() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
checkCount = zTree.getCheckedNodes(true).length,
nocheckCount = zTree.getCheckedNodes(false).length,
changeCount = zTree.getChangeCheckedNodes().length;
$("#checkCount").text(checkCount);
$("#nocheckCount").text(nocheckCount);
$("#changeCount").text(changeCount);
}
function createTree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
count();
clearFlag = $("#last").attr("checked");
}
$(document).ready(function(){
createTree();
$("#init").bind("change", createTree);
$("#last").bind("change", createTree);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Statistics Checkbox is Checked</h1>
<h6>[ File Path: excheck/checkbox_count.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of getChangeCheckedNodes / getCheckedNodes</h2>
<ul class="list">
<li class="highlight_red">How to use zTreeObj.getChangeCheckedNodes / getCheckedNodes method, please see the API documentation.</li>
<li><p>Check the checkbox, observe the number of changes:<br/>
<ul id="log" class="log" style="height:130px;">
<li>Total check node: <span id="checkCount" class="highlight_red"></span></li>
<li>Total uncheck node: <span id="nocheckCount" class="highlight_red"></span></li>
<li>Modify the state of checkbox: <br/>
<input type="radio" id="init" name="stateType" class="radio first" checked style="margin-left:68px;"/><span>Compared with zTree initialization</span><br/>
<input type="radio" id="last" name="stateType" class="radio first" style="margin-left:68px;"/><span>Compared with the last check</span></li>
<li>Total change the checkbox state of node: <span id="changeCount" class="highlight_red"></span></li>
</ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Same as 'Checkbox Operation'</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>Same as 'Checkbox Operation'</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeCheck / onCheck</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeCheck: beforeCheck,
onCheck: onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1"},
{ id:12, pId:1, name:"can check 1-2", open:true},
{ id:121, pId:12, name:"can check 1-2-1"},
{ id:122, pId:12, name:"can check 1-2-2"},
{ id:2, pId:0, name:"can't check 2", open:true, doCheck:false},
{ id:21, pId:2, name:"can't check 2-1", doCheck:false},
{ id:22, pId:2, name:"can't check 2-2", checked:true, open:true, doCheck:false},
{ id:221, pId:22, name:"can't chk 2-2-1", doCheck:false},
{ id:222, pId:22, name:"can't chk 2-2-2", checked:true, doCheck:false},
{ id:23, pId:2, name:"can't check 2-3", doCheck:false}
];
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
return (treeNode.doCheck !== false);
}
function onCheck(e, treeId, treeNode) {
showLog("[ "+getTime()+" onCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 6) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type,
nodes = zTree.getSelectedNodes();
if (type.indexOf("All")<0 && nodes.length == 0) {
alert("Please select one node at first...");
}
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
} else {
var callbackFlag = $("#callbackTrigger").attr("checked");
for (var i=0, l=nodes.length; i<l; i++) {
if (type == "checkTrue") {
zTree.checkNode(nodes[i], true, false, callbackFlag);
} else if (type == "checkFalse") {
zTree.checkNode(nodes[i], false, false, callbackFlag);
} else if (type == "toggle") {
zTree.checkNode(nodes[i], null, false, callbackFlag);
}else if (type == "checkTruePS") {
zTree.checkNode(nodes[i], true, true, callbackFlag);
} else if (type == "checkFalsePS") {
zTree.checkNode(nodes[i], false, true, callbackFlag);
} else if (type == "togglePS") {
zTree.checkNode(nodes[i], null, true, callbackFlag);
}
}
}
}
function setAutoTrigger(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.check.autoCheckTrigger = $("#autoCallbackTrigger").attr("checked");
$("#autoCheckTriggerValue").html(zTree.setting.check.autoCheckTrigger ? "true" : "false");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);
$("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);
$("#toggle").bind("click", {type:"toggle"}, checkNode);
$("#checkTruePS").bind("click", {type:"checkTruePS"}, checkNode);
$("#checkFalsePS").bind("click", {type:"checkFalsePS"}, checkNode);
$("#togglePS").bind("click", {type:"togglePS"}, checkNode);
$("#checkAllTrue").bind("click", {type:"checkAllTrue"}, checkNode);
$("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);
$("#autoCallbackTrigger").bind("change", {}, setAutoTrigger);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Checkbox - zTree methods</h1>
<h6>[ File Path: excheck/checkbox_fun.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, 'beforeCheck / onCheck' callback function</h2>
<ul class="list">
<li>Use 'beforeCheck / onCheck' callback function can control whether to allow changes to the node check state. This simple demo shows how to monitor the check event.</li>
<li><p>By the way also demonstrates how to use the 'checkNode / checkAllNodes' method triggers 'beforeCheck / onCheck' callback, Try: <br/>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="autoCallbackTrigger" /> setting.check.autoCheckTrigger: <span id="autoCheckTriggerValue">false</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="callbackTrigger" checked /> Whether trigger the callback when execution checkNode() method. <br/>
&nbsp;&nbsp;&nbsp;&nbsp;Node --[ <a id="checkTrue" href="#" title="check..." onclick="return false;">check</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalse" href="#" title="uncheck..." onclick="return false;">uncheck</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="toggle" href="#" title="toggle..." onclick="return false;">toggle</a> ]<br/>
&nbsp;&nbsp;&nbsp;&nbsp;Node (relationships) --[ <a id="checkTruePS" href="#" title="check(relationships)..." onclick="return false;">check</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalsePS" href="#" title="uncheck(maintain relationships)..." onclick="return false;">uncheck</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="togglePS" href="#" title="toggle..." onclick="return false;">toggle</a> ]<br/>
&nbsp;&nbsp;&nbsp;&nbsp;All Nodes --[ <a id="checkAllTrue" href="#" title="check All!!" onclick="return false;">check</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkAllFalse" href="#" title="uncheck All!!" onclick="return false;">uncheck</a> ]</p>
</li>
<li><p><span class="highlight_red">How to use 'zTreeObj.checkNode / checkAllNodes' method, please see the API documentation.</span><br/>
beforeCheck / onCheck log:<br/>
<ul id="log" class="log" style="height:130px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Same as 'Checkbox Operation'</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>Same as 'Checkbox Operation'</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Checkbox halfCheck</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"chk":"chk"},
dataFilter: dataFilter
},
check: {
enable: true,
autoCheckTrigger: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck,
onAsyncSuccess: onAsyncSuccess
}
};
function dataFilter(treeId, parentNode, childNodes) {
if (parentNode.checkedEx === true) {
for(var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].checked = parentNode.checked;
childNodes[i].halfCheck = false;
childNodes[i].checkedEx = true;
}
}
return childNodes;
}
function onCheck(event, treeId, treeNode) {
cancelHalf(treeNode)
treeNode.checkedEx = true;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
if (treeNode.checkedEx) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
treeNode.halfCheck = false;
zTree.updateNode(treeNode);
}
var zNodes =[
{ id:1, pId:0, name:"half 1", halfCheck:true, isParent:true},
{ id:2, pId:0, name:"half 2", halfCheck:true, checked:true, isParent:true},
{ id:3, pId:0, name:"no half 3", checked:true, isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Checkbox halfCheck Demo</h1>
<h6>[ File Path: excheck/checkbox_halfCheck.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of Demo</h2>
<ul class="list">
<li>This demo implements the check operation of the dynamic tree</li>
<li class="highlight_red">1). After loaded child nodes, the parent node's 'halfCheck' attribute will be invalid immediately.</li>
<li class="highlight_red">2). If you check the parent node, so will effect the child nodes's check status.</li>
<li class="highlight_red">3). If you check the parent node, it's child node's 'halfCheck' attribute will be invalid.</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Half-checked functional don't need to configure any parameter. But it is accessibility, can not used alone. So please configure the parameters which you need.</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), Please set treeNode.halfCheck attribute, before zTree initialize. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Checkbox Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - no checkbox</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
nocheckInherit: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"no checkbox 1-1-1", nocheck:true},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"no checkbox 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"no checkbox 1-2-1"},
{ id:122, pId:12, name:"no checkbox 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
function nocheckNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nocheck = e.data.nocheck,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("Please select one node at first...");
}
for (var i=0, l=nodes.length; i<l; i++) {
nodes[i].nocheck = nocheck;
zTree.updateNode(nodes[i]);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#nocheckTrue").bind("click", {nocheck: true}, nocheckNode);
$("#nocheckFalse").bind("click", {nocheck: false}, nocheckNode);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Checkbox nocheck Demo</h1>
<h6>[ File Path: excheck/checkbox_nocheck.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of setting</h2>
<ul class="list">
<li>This Demo only shows how use the nocheck attribute, detailed configuration information, please refer to 'Checkbox Operation'</li>
<li class="highlight_red">setting.check.nocheckInherit can set the child nodes to automatically inherit the parent node's 'nocheck' attribute. See the API documentation for more related contents.</li>
<li><p>Try:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="nocheckTrue" href="#" title="set checkbox to be hidden." onclick="return false;">hide checkbox</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="nocheckFalse" href="#" title="set checkbox to be show." onclick="return false;">show checkbox</a> ]
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node don't show checkbox, please set treeNode.nocheck attribute. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Checkbox Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - radio</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"can check 1-1-1"},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"can check 1-2", open:true},
{ id:121, pId:12, name:"can check 1-2-1"},
{ id:122, pId:12, name:"can check 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
var code;
function setCheck() {
var type = $("#level").attr("checked")? "level":"all";
setting.check.radioType = type;
showCode('setting.check.radioType = "' + type + '";');
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}
$(document).ready(function(){
setCheck();
$("#level").bind("change", setCheck);
$("#all").bind("change", setCheck);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio Operation</h1>
<h6>[ File Path: excheck/radio.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of setting</h2>
<ul class="list">
<li class="highlight_red">Must set setting.check attributes, see the API documentation for more related contents.</li>
<li><p>group range of radio: <br/><input type="radio" id="level" class="radio first" name="radioGroup" checked /><span>within the same level</span>
<input type="radio" id="all" class="radio" name="radioGroup"/><span>within the whole tree</span><br/>
<ul id="code" class="log" style="height:20px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node is checked, please set treeNode.checked attribute. See the API documentation for more related contents.</li>
<li class="highlight_red">2), If you need to initialize the node don't show radio, please set treeNode.nocheck attribute. See the API documentation for more related contents.</li>
<li class="highlight_red">3), If you need to change 'checked' to other attribute, please set setting.data.key.checked attribute. See the API documentation for more related contents.</li>
<li>4), By the way, please see the API documentation for 'treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus'.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Radio chkDisabled</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true, checked:true},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"disabled 1-2", chkDisabled:true, open:true},
{ id:121, pId:12, name:"disabled 1-2-1", checked:true},
{ id:122, pId:12, name:"disabled 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
function disabledNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
disabled = e.data.disabled,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("Please select one node at first...");
}
for (var i=0, l=nodes.length; i<l; i++) {
zTree.setChkDisabled(nodes[i], disabled);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#disabledTrue").bind("click", {disabled: true}, disabledNode);
$("#disabledFalse").bind("click", {disabled: false}, disabledNode);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio chkDisabled Demo</h1>
<h6>[ File Path: excheck/radio_chkDisabled.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of 'setChkDisabled' method</h2>
<ul class="list">
<li>'setChkDisabled' method can set the node's checkbox / radio to be disabled or abled. See the API documentation for more related contents.</li>
<li><p>Try:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledTrue" href="#" title="set checkbox to be disabled." onclick="return false;">be disabled</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledFalse" href="#" title="set checkbox to be abled." onclick="return false;">be abled</a> ]</p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>This Demo only shows how use the nocheck attribute, detailed configuration information, please refer to 'Radio Operation'</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node don't show radio, please set treeNode.chkDisabled attribute. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Radio Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,151 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeCheck / onCheck</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeCheck: beforeCheck,
onCheck: onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"no radio 1-1", nocheck:true},
{ id:12, pId:1, name:"can check 1-2", open:true},
{ id:121, pId:12, name:"can check 1-2-1"},
{ id:122, pId:12, name:"can check 1-2-2"},
{ id:123, pId:12, name:"no radio 1-2-3", nocheck:true},
{ id:13, pId:1, name:"can check 1-3"},
{ id:2, pId:0, name:"can't check 2", open:true, doCheck:false},
{ id:21, pId:2, name:"can't check 2-1", doCheck:false},
{ id:22, pId:2, name:"can't check 2-2", checked:true, open:true, doCheck:false},
{ id:221, pId:22, name:"can't chk 2-2-1", doCheck:false},
{ id:222, pId:22, name:"can't chk 2-2-2", checked:true, doCheck:false},
{ id:223, pId:22, name:"can't chk 2-2-3", doCheck:false},
{ id:23, pId:2, name:"can't check 2-3", doCheck:false}
];
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
return (treeNode.doCheck !== false);
}
function onCheck(e, treeId, treeNode) {
showLog("[ "+getTime()+" onCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 6) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type,
nodes = zTree.getSelectedNodes();
if (type.indexOf("All")<0 && nodes.length == 0) {
alert("Please select one node at first...");
}
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
} else {
var callbackFlag = $("#callbackTrigger").attr("checked");
for (var i=0, l=nodes.length; i<l; i++) {
if (type == "checkTrue") {
zTree.checkNode(nodes[i], true, null, callbackFlag);
} else if (type == "checkFalse") {
zTree.checkNode(nodes[i], false, null, callbackFlag);
}else if (type == "checkTruePS") {
zTree.checkNode(nodes[i], true, true, callbackFlag);
} else if (type == "checkFalsePS") {
zTree.checkNode(nodes[i], false, true, callbackFlag);
}
}
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);
$("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio - zTree methods</h1>
<h6>[ File Path: excheck/radio_fun.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, 'beforeCheck / onCheck' callback function</h2>
<ul class="list">
<li>Use 'beforeCheck / onCheck' callback function can control whether to allow changes to the node check state. This simple demo shows how to monitor the check event.</li>
<li><p>By the way also demonstrates how to use the 'checkNode' method triggers 'beforeCheck / onCheck' callback, Try: <br/>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="callbackTrigger" checked /> Whether trigger the callback when execution checkNode() method.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkTrue" href="#" title="check..." onclick="return false;">check</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalse" href="#" title="uncheck..." onclick="return false;">uncheck</a> ]</p>
<li><p><span class="highlight_red">How to use 'zTreeObj.checkNode' method, please see the API documentation.</span><br/>
beforeCheck / onCheck log:<br/>
<ul id="log" class="log" style="height:130px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Same as 'Radio Operation'</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>Same as 'Radio Operation'</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Radio halfCheck</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"chk":"chk"}
},
check: {
enable: true,
autoCheckTrigger: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
},
callback: {
onAsyncSuccess: onAsyncSuccess
}
};
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
treeNode.halfCheck = false;
zTree.updateNode(treeNode);
}
var zNodes =[
{ id:1, pId:0, name:"half 1", halfCheck:true, isParent:true},
{ id:2, pId:0, name:"half 2", halfCheck:true, checked:true, isParent:true},
{ id:3, pId:0, name:"no half 3", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio halfCheck Demo</h1>
<h6>[ File Path: excheck/radio_halfCheck.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of Demo</h2>
<ul class="list">
<li>This demo implements the check operation of the dynamic tree</li>
<li class="highlight_red">1). After loaded child nodes, the parent node's 'halfCheck' attribute will be invalid immediately.</li>
<li class="highlight_red">2). If you check the parent node, will not effect the child nodes's check status.</li>
<li class="highlight_red">3). If you check the parent node, it's child node's 'halfCheck' attribute will still be valid.</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Half-checked functional don't need to configure any parameter. But it is accessibility, can not used alone. So please configure the parameters which you need.</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), Please set treeNode.halfCheck attribute, before zTree initialize. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Radio Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - no radio</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!--
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"no radio 1-1-1", nocheck:true},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"no radio 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"no radio 1-2-1"},
{ id:122, pId:12, name:"no radio 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio nocheck Demo</h1>
<h6>[ File Path: excheck/radio_nocheck.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of setting</h2>
<ul class="list">
<li>This Demo only shows how use the nocheck attribute, detailed configuration information, please refer to 'Radio Operation'</li>
<li class="highlight_red">setting.check.nocheckInherit can set the child nodes to automatically inherit the parent node's 'nocheck' attribute. See the API documentation for more related contents.</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of treeNode</h2>
<ul class="list">
<li class="highlight_red">1), If you need to initialize the node don't show radio, please set treeNode.nocheck attribute. See the API documentation for more related contents.</li>
<li>2), By the way, please see the 'Radio Operation' Demo.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>