Extjs 设置TreePanel CheckBox三态选中

为什么80%的码农都做不了架构师？>>>   

对于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.Net HTMLCode

    <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>

ControllerCode

  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);
          }

Js Code 

  <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>

转载于:https://my.oschina.net/junn/blog/110684