关于combotree的用法总结

时间:2023-03-09 07:02:15
关于combotree的用法总结

  后台:

    实体树

    public class TreeNode{

      private String id;
      private String text;
      private String level;
      private List<LogTypeTreeNode> children = new ArrayList<>();
      public LogTypeTreeNode(String id, String text, String level){
            this.id = id;
            this.text = text;
            this.level = level;
         }

      //get()、set()

    }

    形成展示成的树的结构,需用到递归

    public List<TreeNode> getTree() {
            List<Map<String, Object>> list = sieveLogService.getEventType();

        //获取所有数据需包含(PARENT_ID 父id(PARENT_ID=-1说明是根节点),TYPE_ID 节点id,TYPE_NAME节点名称,TREE_LEVEL 树层级数)
            List<TreeNode> allNode = new ArrayList<TreeNode>();// 存放所有节点的集合
            for (Map<String, Object> map : list) {
                if (MapUtils.getString(map, "PARENT_ID").equals("-1")) {
                    TreeNode tn = new TreeNode(MapUtils.getString(map, "TYPE_ID"),
                               MapUtils.getString(map, "TYPE_NAME"), MapUtils.getString(map, "TREE_LEVEL"));
                    allNode.add(tn);
                }
            }
            for (LogTypeTreeNode root : allNode) {
                  bulidTreeNode(root, list);
            }
            return allNode;
      }

    private TreeNode bulidTreeNode(TreeNode tn, List<Map<String, Object>> list) {
            for (Map<String, Object> map : list) {
                if (MapUtils.getString(map, "PARENT_ID").equals(tn.getId())) {
                    TreeNode tnChild = new TreeNode(MapUtils.getString(map, "TYPE_ID"),
                            MapUtils.getString(map, "EVENT_TYPE_NAME"), MapUtils.getString(map, "TREE_LEVEL"));
                    tn.addChildNode(tnChild);
                    bulidTreeNode(tnChild, list);
                }
            }
            return tn;
      }

    前台:

    <input type="checkbox" class="easyui-combotree"
                                                    data-options="multiple:true" style="width: 300px;"    id="id"  />

    用ajax获取即可展示:

    $.ajax({
              url : "/.../getTree",
              dataType : "JSON",
              success : function(data) {
                  $('#id').combotree('loadData', data);        //当数据展示为undefind时,可用 $('#id').combotree('loadData', eval(data));       
              }
          });

    获取选中的树:1.只能获取节点id:var logType = $("#id").combotree("getValues");

           2.获取到树节点:var t = $('#operationType').combotree('tree'); // 得到树对象
                          var node = t.tree('getChecked', [ 'checked', 'indeterminate' ]); // 得到选择的节点

                  循环node.length,node[i].level:树层级数,node[i].id:节点id,node[i].text:节点名称

    编辑时回显选中树节点:

      后台:把id值拼成以逗号隔开的字符串,在前台以el表达式接收到<input  type="hidden" id="allType" value="${allType}" />

      前台:在以上加载完树之后

          $.ajax({
                    url : "/.../getTree",
                    dataType : "JSON",
                    success : function(data) {
                        $('#id').combotree('loadData', data);        //当数据展示为undefind时,可用 $('#id').combotree('loadData', eval(data));

              //编辑时显示打上对勾
                          var at = $("#allType").val().split(",");                   
                          $('#id').combotree('setValues', at);    
                    }
                });

     设置树的下拉面板的宽度:

      $("#id").combotree({

         panelWidth:200,

         panelHeight:200

      )};

    (还有另外加载的树的方法总结,请持续关注)