ComboTree使用

时间:2022-07-08 20:50:32
 
  1、参考资料

  2、相关代码

    1. 前端
      1. <input id="DeptId" name="DeptId" value="请选择" /> Id对应Model中需要生成的数据编号,如需生成部门combotree,属性为DeptId
         
        2、 $(document).ready(function () {
                $('#DeptId').combotree({
                    url: '@Url.Action("GetTree", "Dept")',
                    //选择树节点触发事件  
                    onSelect: function (node) {
                        //返回树对象  
                        var tree = $(this).tree;
                        //选中的节点是否为叶子节点,如果不是叶子节点,清除选中  
                        var isLeaf = tree('isLeaf', node.target);
                        if (!isLeaf) {
                            //清除选中  
                            $('#DeptId').combotree('clear');
                        }
                    }
                });
         
                 $('#DeptId').combotree('setValue',@Model.DeptId==0?'':@Model.DeptId);  
            });
    2. 后台
       public ActionResult GetTree()
              {
                  var list =获取包含两级关系的数据,可自行扩展成多级;
       
                  var result = new List<JsonTreeNode>();
                  foreach (var fac in list)
                  {
                      var facNode = new JsonTreeNode();  //一级节点
                      facNode.id = "";  
                      facNode.text = fac.FactoryName;
                      facNode.@checked = "disabled";
       
                      var depChildren = new List<JsonTreeNode>();
                      var depList =//获取一级节点下的二级节点数据;
       
                      if (depList.Count() > 0)
                      {
                          foreach (var dep in depList)
                          {
                              JsonTreeNode depNode = new JsonTreeNode();
                              depNode.id = dep.DepId.ToString();
                              depNode.text = dep.DepName;
                              depNode.@checked = "disabled";
       
                              depChildren.Add(depNode);
                          }
                          facNode.children = depChildren;
                          result.Add(facNode);
                      }
                  }
       
                  return Json(result);
              }

  3、注意事项

    1. 前端代码必须先后执行,如果在第一个combotree()添加setValue设置,则无效
      $('#DeptId').combotree()        $('#DeptId').combotree('setValue',@Model.DeptId==0?'':@Model.DeptId);  //加载时默认选择
    2. onSelect设置为选择非叶子节点时则清空数据