学步园

对于TreePanel的Node我们需求是：1.选中某个节点A的CheckBox，节点A的所有子节点全部选中；2.节点A的所有子节点如果都选中，则A节点选中；3.节点A的某些节点选中，某些节点不选中，则A节点处于半选状态。如下图所示：

如何来实现呢？

研究发现TreePanel的节点的Checkbox可发现通过node.getUI().checkbox可以获取到checkbox。设置checkbox的checked属性为true / false 可以设置checkbox选中或者非选择，那么三态的半选中状态如何设置呢？可以通过设置checkbox的indeterminate属性为true，checked为false可以实现。因此，可以如下处理：

  <ext:TreePanel runat="server" ID="tree" RootVisible="false">
                 <Loader>
                     <ext:TreeLoader DataUrl="/Home/GetNode">
                         <BaseParams>
                             <ext:Parameter Name="pNodeId" Value="node.id" Mode="Raw">
                             </ext:Parameter>
                         </BaseParams>
                     </ext:TreeLoader>
                 </Loader>
                 <Root>
                     <ext:AsyncTreeNode NodeID="root" Expanded="true">
                     </ext:AsyncTreeNode>
                 </Root>
                 <Listeners>
                     <CheckChange Fn="NodeCheckChange" />
                     <ExpandNode Fn="ExpandNode" />
                 </Listeners>
             </ext:TreePanel>

 public ActionResult GetNode(string pNodeId)
         {
             if (pNodeId == "root")
             {
                 pNodeId = "";
             }
             TreeNodeCollection nodeList = new TreeNodeCollection();
             for (int i = 0; i < 5; i++)
             {
                 AsyncTreeNode node = new AsyncTreeNode
                 {
                     NodeID = pNodeId + "." + (i + 1),
                     Checked = ThreeStateBool.False,
                     Text = string.Format("Node{0}", i + 1)
                 };
                 nodeList.Add(node);
             }
             string json = nodeList.ToJson();
             return Content(json);
         }

<script type="text/javascript">
         //设置节点子级全部选中
         function SetChildNodeChecked(node) {
             var isChecked = node.attributes.checked;
             var childCount = node.childNodes.length;
             if (childCount > 0) {
                 for (var i = 0; i < childCount; i++) {
                     var child = node.childNodes[i];
                     var checkBox = child.getUI().checkbox;
                     child.attributes.checked = isChecked;
                     checkBox.checked = isChecked;
                     checkBox.indeterminate = false;
                     this.SetChildNodeChecked(child);
                 }
             }
         }
         //设置节点父节点选中状态
         function SetParentNodeCheckState(node) {
             var parentNode = node.parentNode;
             if (parentNode != null) {
                 var checkBox = parentNode.getUI().checkbox;
                 var isAllChildChecked = true;
                 var someChecked = false;
                 var childCount = parentNode.childNodes.length;
                 for (var i = 0; i < childCount; i++) {
                     var child = parentNode.childNodes[i];
                     if (child.attributes.checked) {
                         someChecked = true;
                     }
                     else if (child.getUI().checkbox.indeterminate == true && child.getUI().checkbox.checked == false) {
                         someChecked = true;
                         isAllChildChecked = false;
                         break;
                     }
                     else {
                         isAllChildChecked = false;
                     }
                 }
                 if (isAllChildChecked && someChecked) {
                     parentNode.attributes.checked = true;
                     if (checkBox != null) {
                         checkBox.indeterminate = false;
                         checkBox.checked = true;
                     }
                 }
                 else if (someChecked) {
                     parentNode.attributes.checked = false;
                     if (checkBox != null) {
                         checkBox.indeterminate = true;
                         checkBox.checked = false;
                     }
                 }
                 else {
                     parentNode.attributes.checked = false;
                     if (checkBox != null) {
                         checkBox.indeterminate = false;
                         checkBox.checked = false;
                     }
                 }
 
                 this.SetParentNodeCheckState(parentNode);
             }
         }
         //选择指标类型结点时的操作:取消当前选择结点以外的其它结点的选中状态
         function NodeCheckChange(node) {
             SetChildNodeChecked(node);
             SetParentNodeCheckState(node);
         }
 
         function ExpandNode(node) {
             SetChildNodeChecked(node);
         }
     </script>