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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 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 勾选操作</h1>
<h6>[ 文件路径: 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、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">使用 checkbox必须设置 setting.check 中的各个属性,详细请参见 API 文档中的相关内容</li>
<li><p>父子关联关系:<br/>
被勾选时:<input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span>
<input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
取消勾选时:<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
<input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
<ul id="code" class="log" style="height:20px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果需要初始化默认节点被勾选,请设置 treeNode.checked 属性,详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">2)、如果某节点禁用 checkbox请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'</li>
<li class="highlight_red">3)、如果某节点不显示 checkbox请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容 和 'nocheck 演示'</li>
<li class="highlight_red">4)、如果更换 checked 属性,请参考 API 文档中 setting.data.key.checked 的详细说明</li>
<li>5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,112 @@
<!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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true},
{ id:112, pId:11, name:"随意勾选 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:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
function disabledNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
disabled = e.data.disabled,
nodes = zTree.getSelectedNodes(),
inheritParent = false, inheritChildren = false;
if (nodes.length == 0) {
alert("请先选择一个节点");
}
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 演示</h1>
<h6>[ 文件路径: 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、setChkDisabled 方法操作说明</h2>
<ul class="list">
<li>setChkDisabled 方法可以设置节点 checkbox / radio 禁用 或 取消禁用,详细请参见 API 文档中的相关内容</li>
<li><p>试试看:<br/>
禁用时:<input type="checkbox" id="py" class="checkbox first"/><span>关联父</span>
<input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
取消禁用时:<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
<input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledTrue" href="#" title="set checkbox to be disabled." onclick="return false;">禁用</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledFalse" href="#" title="set checkbox to be abled." onclick="return false;">取消禁用</a> ]
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>这个 Demo 只简单演示 chkDisabled 的使用方法,详细配置信息请参考 Checkbox 勾选操作’</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果某节点禁用 checkbox请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Checkbox 勾选操作’</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,126 @@
<!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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1", checked:true},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:123, pId:12, name:"随意勾选 1-2-3"},
{ id:13, pId:1, name:"随意勾选 1-3"},
{ id:2, pId:0, name:"随意勾选 2", open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:223, pId:22, name:"随意勾选 2-2-3"},
{ id:23, pId:2, name:"随意勾选 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>checkbox 勾选统计</h1>
<h6>[ 文件路径: 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、getChangeCheckedNodes / getCheckedNodes 方法操作说明</h2>
<ul class="list">
<li class="highlight_red">使用 zTreeObj.getChangeCheckedNodes / getCheckedNodes 方法,详细请参见 API 文档中的相关内容</li>
<li><p>去勾选 checkbox 比较下面的数字变化:<br/>
<ul id="log" class="log" style="height:110px;">
<li>当前被勾选的节点共 <span id="checkCount" class="highlight_red"></span></li>
<li>当前未被勾选的节点共 <span id="nocheckCount" class="highlight_red"></span></li>
<li>勾选状态对比规则:<input type="radio" id="init" name="stateType" class="radio first" checked /><span>与 zTree 初始化时对比</span><br/>
<input type="radio" id="last" name="stateType" class="radio first" style="margin-left:108px;"/><span>与上一次勾选后对比</span></li>
<li>当前被修改勾选状态的节点共 <span id="changeCount" class="highlight_red"></span></li>
</ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>同 "checkbox 勾选操作" 中的说明</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>同 "checkbox 勾选操作" 中的说明</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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"禁止勾选 2", open:true, doCheck:false},
{ id:21, pId:2, name:"禁止勾选 2-1", doCheck:false},
{ id:22, pId:2, name:"禁止勾选 2-2", checked:true, open:true, doCheck:false},
{ id:221, pId:22, name:"禁止勾选 2-2-1", doCheck:false},
{ id:222, pId:22, name:"禁止勾选 2-2-2", checked:true, doCheck:false},
{ id:23, pId:2, name:"禁止勾选 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("请先选择一个节点");
}
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>用 zTree 方法 勾选 checkbox</h1>
<h6>[ 文件路径: 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 事件回调函数控制</h2>
<ul class="list">
<li>利用 beforeCheck / onCheck 事件回调函数 可以控制是否允许 更改 节点勾选状态,这里简单演示如何监控此事件</li>
<li><p>这里还演示了 checkNode / checkAllNodes 方法触发 beforeCheck / onCheck 事件回调函数的情况,试试看:<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 /> 执行勾选方法是否触发 callback <br/>
&nbsp;&nbsp;&nbsp;&nbsp;单节点--[ <a id="checkTrue" href="#" title="不想勾选我就不勾选你..." onclick="return false;">勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalse" href="#" title="不想取消勾选我就不取消你..." onclick="return false;">取消勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="toggle" href="#" title="你想怎样?..." onclick="return false;">勾选 切换</a> ]<br/>
&nbsp;&nbsp;&nbsp;&nbsp;单节点 ( 影响父子 )--[ <a id="checkTruePS" href="#" title="不想勾选我就不勾选你..." onclick="return false;">勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalsePS" href="#" title="不想取消勾选我就不取消你..." onclick="return false;">取消勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="togglePS" href="#" title="你想怎样?..." onclick="return false;">勾选 切换</a> ]<br/>
&nbsp;&nbsp;&nbsp;&nbsp;全部节点--[ <a id="checkAllTrue" href="#" title="不管你有多NB统统都要听我的" onclick="return false;">勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkAllFalse" href="#" title="不管你有多NB统统都要听我的" onclick="return false;">取消勾选</a> ]</p>
</li>
<li><p><span class="highlight_red">使用 zTreeObj.checkNode / checkAllNodes 方法,详细请参见 API 文档中的相关内容</span><br/>
beforeCheck / onCheck log:<br/>
<ul id="log" class="log" style="height:130px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>同 "checkbox 勾选操作" 中的说明</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>同 "checkbox 勾选操作" 中的说明</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:"半勾选 1", halfCheck:true, isParent:true},
{ id:2, pId:0, name:"半勾选 2", halfCheck:true, checked:true, isParent:true},
{ id:3, pId:0, name:"随意勾选 3", checked:true, isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Checkbox halfCheck 演示</h1>
<h6>[ 文件路径: 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、演示说明</h2>
<ul class="list">
<li>这个演示式实现了 异步加载模式 下简单的勾选操作</li>
<li class="highlight_red">1)、加载子节点后,父节点的 halfCheck 立刻失效</li>
<li class="highlight_red">2)、勾选父节点,可以影响之后加载的子节点的勾选状态</li>
<li class="highlight_red">3)、勾选父节点,可以让其子节点的 halfCheck 属性失效</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>实现半勾选功能,不需要配置任何参数。但半勾选功能属于辅助功能,无法单独使用,因此也需要根据自己的需求配置特定参数。</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、请在节点初始化之前,设置 treeNode.halfCheck 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Checkbox 勾选操作’</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,96 @@
<!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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"无 checkbox 1-1-1", nocheck:true},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"无 checkbox 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"无 checkbox 1-2-1"},
{ id:122, pId:12, name:"无 checkbox 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
function nocheckNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nocheck = e.data.nocheck,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个节点");
}
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 演示</h1>
<h6>[ 文件路径: 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、setting 配置信息说明</h2>
<ul class="list">
<li>这个 Demo 只简单演示 nocheck 的使用方法,详细配置信息请参考 Checkbox 勾选操作’</li>
<li class="highlight_red">setting.check.nocheckInherit 可以设置子节点自动继承父节点的 nocheck 属性,详细请参见 API 文档中的相关内容</li>
<li><p>试试看:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="nocheckTrue" href="#" title="set checkbox to be hidden." onclick="return false;">隐藏</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="nocheckFalse" href="#" title="set checkbox to be show." onclick="return false;">显示</a> ]
</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果某节点不显示 checkbox请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Checkbox 勾选操作’</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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 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 勾选操作</h1>
<h6>[ 文件路径: 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、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">使用 radio必须设置 setting.check 中的各个属性,详细请参见 API 文档中的相关内容</li>
<li><p>radio 分组范围:<input type="radio" id="level" class="radio first" name="radioGroup" checked /><span>同一级内</span>
<input type="radio" id="all" class="radio" name="radioGroup"/><span>整棵树内</span><br/>
<ul id="code" class="log" style="height:20px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果需要初始化默认节点被勾选,请设置 treeNode.checked 属性,详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">2)、如果某节点不显示 radio请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">3)、如果更换 checked 属性,请参考 API 文档中 setting.data.key.checked 的详细说明</li>
<li>4)、其他请参考 API 文档中 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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true, checked:true},
{ id:112, pId:11, name:"随意勾选 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:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
function disabledNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
disabled = e.data.disabled,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个节点");
}
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 演示</h1>
<h6>[ 文件路径: 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、setChkDisabled 方法操作说明</h2>
<ul class="list">
<li>setChkDisabled 方法可以设置节点 checkbox / radio 禁用 或 取消禁用,详细请参见 API 文档中的相关内容</li>
<li><p>试试看:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledTrue" href="#" title="set checkbox to be disabled." onclick="return false;">禁用</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledFalse" href="#" title="set checkbox to be abled." onclick="return false;">取消禁用</a> ]</p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>这个 Demo 只简单演示 chkDisabled 的使用方法,详细配置信息请参考 Radio 勾选操作’</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果某节点不显示 radio请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Radio 勾选操作’</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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"无 radio 1-1", nocheck:true},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:123, pId:12, name:"无 radio 1-2-3", nocheck:true},
{ id:13, pId:1, name:"随意勾选 1-3"},
{ id:2, pId:0, name:"禁止勾选 2", open:true, doCheck:false},
{ id:21, pId:2, name:"禁止勾选 2-1", doCheck:false},
{ id:22, pId:2, name:"禁止勾选 2-2", checked:true, open:true, doCheck:false},
{ id:221, pId:22, name:"禁止勾选 2-2-1", doCheck:false},
{ id:222, pId:22, name:"禁止勾选 2-2-2", checked:true, doCheck:false},
{ id:223, pId:22, name:"禁止勾选 2-2-3", doCheck:false},
{ id:23, pId:2, name:"禁止勾选 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("请先选择一个节点");
}
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>用 zTree 方法 勾选 radio</h1>
<h6>[ 文件路径: 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 事件回调函数控制</h2>
<ul class="list">
<li>利用 beforeCheck / onCheck 事件回调函数 可以控制是否允许 更改 节点勾选状态,这里简单演示如何监控此事件</li>
<li><p>试试看:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="callbackTrigger" checked /> checkNode 方法是否触发 callback<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkTrue" href="#" title="不想勾选我就不勾选你..." onclick="return false;">勾选</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="checkFalse" href="#" title="不想取消勾选我就不取消你..." onclick="return false;">取消勾选</a> ]</p>
<li><p><span class="highlight_red">使用 zTreeObj.checkNode 方法,详细请参见 API 文档中的相关内容</span><br/>
beforeCheck / onCheck log:<br/>
<ul id="log" class="log" style="height:130px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>同 "radio 勾选操作" 中的说明</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>同 "radio 勾选操作" 中的说明</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:"半勾选 1", halfCheck:true, isParent:true},
{ id:2, pId:0, name:"半勾选 2", halfCheck:true, checked:true, isParent:true},
{ id:3, pId:0, name:"随意勾选 3", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio halfCheck 演示</h1>
<h6>[ 文件路径: 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、演示说明</h2>
<ul class="list">
<li>这个演示式实现了 异步加载模式 下简单的勾选操作</li>
<li class="highlight_red">1)、加载子节点后,父节点的 halfCheck 立刻失效</li>
<li class="highlight_red">2)、勾选父节点,不会影响子节点的勾选状态</li>
<li class="highlight_red">3)、勾选父节点,不会让其子节点的 halfCheck 属性失效</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>实现半勾选功能,不需要配置任何参数。但半勾选功能属于辅助功能,无法单独使用,因此也需要根据自己的需求配置特定参数。</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、请在节点初始化之前,设置 treeNode.halfCheck 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Radio 勾选操作’</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:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"无 radio 1-1-1", nocheck:true},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"无 radio 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"无 radio 1-2-1"},
{ id:122, pId:12, name:"无 radio 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Radio nocheck 演示</h1>
<h6>[ 文件路径: 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、setting 配置信息说明</h2>
<ul class="list">
<li>这个 Demo 只简单演示 nocheck 的使用方法,详细配置信息请参考 Radio 勾选操作’</li>
<li class="highlight_red">setting.check.nocheckInherit 可以设置子节点自动继承父节点的 nocheck 属性,详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果某节点不显示 radio请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容</li>
<li>2)、其他请参考 Radio 勾选操作’</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>