ext.net 联动
场景：Ext.net TreePanel的Checkbox操作及爷儿俩联动
Ext.net TreePanel的Checkbox操作及父子联动
Ext.net TreePanel的Checkbox操作及父子联动
需求：
在使用Ext.net的TreePanel时，我们需要使用节点的Checkbox联动状态：
当选中一个树节点的Checkbox时，需要让它的父节点设为选中，并同时选中他所有的子节点。
当取消一个树节点的Checkbox选中状态时，需要同时取消它所有子节点的选中状态。
很多资料上作用node.getUI().checkbox.checked = true/flase;方式来设置节点checkbox的状态，但这种方式在联动的情况下容易出现一个问题，就是通过TreePanel1.getChecked();不能获取到选中节点的值，所以建议使用node.ui.toggleCheck(checked)方法来处理。
但toggleCheck同样存在一个问题：
check子节点时，使用parentNode.getUI().toggleCheck(true)选中父节点，会触发父节点被选中的事件。需要这里不需要它触发父节点被选中事件，需要重定一下toggleCheck方法。
下面demo使用VS2010 + Ext.net 1.2版本实现，测试通过：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreePanelCheckBox.aspx.cs"
Inherits="ExtNet12Examples.TreePanel.TreePanelCheckBox" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreePanel 的Checkbox操作及父子级Checkbox联动Demo</title>
<script type="text/javascript">
function checkchange(node, checked) {
if (checked) {
checkParentNode(node.parentNode, checked);
}
checkChildNode(node, checked);
}
function checkChildNode(node, checked) {
if (node == undefined) {
return;
}
node.attributes.checked = checked;
node.ui.toggleCheck(checked);
node.eachChild(function (child) {
checkChildNode(child, checked);
});
}
function checkParentNode(node, checked) {
if (node == undefined) {
return;
}
node.attributes.checked = checked;
node.ui.toggleCheck(checked);
checkParentNode(node.parentNode);
}
var getCheckedNodes = function () {
var msg = "",
selNodes = TreePanel1.getChecked();
Ext.each(selNodes, function (node) {
if (msg.length > 0) {
msg += ", ";
}
msg += node.text;
});
Ext.Msg.show({
title: "Selected Nodes",
msg: msg.length > 0 ? msg : "None",
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
Ext.override(Ext.tree.TreeNodeUI, {
toggleCheck: function (value) {
var cb = this.checkbox;
if (cb) {
cb.checked = (value === undefined ? !cb.checked : value);
// this.onCheckChange();
}
}
});
</script>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:TreePanel ID="TreePanel1" runat="server" Width="200" AutoScroll="true" ContainerScroll="true" Animate="false"
CollapseFirst="true" BodyStyle="background-color:#F1F7FE;" RootVisible="false">
<Root>
<ext:TreeNode runat="Server" Text="根" NodeID="root">
<Nodes>
<ext:TreeNode Text="test1" NodeID="test1" Checked="False" Expanded="true">
<Nodes>
<ext:TreeNode Text="c_test1" NodeID="c_test1" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test2" NodeID="c_test2" Checked="False" Expanded="true">
<Nodes>
<ext:TreeNode Text="cc_test1" NodeID="cc_test1" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test2" NodeID="cc_test2" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test3" NodeID="cc_test3" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test4" NodeID="cc_test4" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="c_test3" NodeID="c_test3" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test4" NodeID="c_test4" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="test2" NodeID="test2" Checked="False">
<Nodes>
<ext:TreeNode Text="c_test11" NodeID="c_test11" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test22" NodeID="c_test22" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test33" NodeID="c_test33" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test44" NodeID="c_test44" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="test3" NodeID="test3" Checked="False">
<Nodes>
<ext:TreeNode Text="c_test111" NodeID="c_test111" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test222" NodeID="c_test222" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test333" NodeID="c_test333" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test444" NodeID="c_test444" Checked="False">
<Listeners>
</Listeners>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<CheckChange Fn="checkchange" />
</Listeners>
</ext:TreePanel>
<ext:Button ID="Button1" runat="server" Text="Submit">
<Listeners>
<Click Fn="getCheckedNodes" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
效果：
源码：http://download.****.net/detail/llxchen/4533901
原下载：http://download.****.net/detail/llxchen/4533696 有Bug，请勿下载。
- 1楼q100291677昨天 12:35
- 好啊.好啊