zoukankan      html  css  js  c++  java
  • easyui combotree 异步树 前端写法js

    简要说下使用场景:

    combotree下拉框第一次加载时,请求一个接口,页面上展示顶层节点们(可以理解为最顶层的节点,比如所有的一级公司);

    当点击其中一个节点前面的小三角展开时,再次请求服务器接口(可以是另外一个接口),将得到该节点的所有子节点,并自动添加进页面上(比如这个公司的其下部门)

    点此,查看在线例子:https://hamupp.github.io/gitblog/app/easyui/combotree/asyncTree.html 如果不是你要的效果可以不用看下文了。

    前端代码:

    html部分:

    <input id="inputCombotree">

    JS部分:

     1     var $combotree = $("#inputCombotree");
     2 
     3     $combotree.combotree({
     4         url: "data1.json",//初始combotree时请求的后端接口,即顶层节点的数据的接口。此处用静态json代替
     5         method:"GET",
     6         onBeforeExpand: function (node) {
     7             var $tree = $combotree.combotree("tree");
     8             $tree.tree("options").url = "data2.json";//展开节点时请求的后端接口(如果接口与初始时接口不同,可在此步进行修改)此处用静态json代替
     9         }
    10     });

    data1与data2.json的内容:

    data1.json

    [{
        "id":1,
        "text":"公司A"
    },{
        "id":2,
        "text":"公司B"
    },{
        "id":3,
        "text":"公司C"
    },{
        "id":4,
        "text":"公司D"
    },{
        "id":5,
        "text":"公司E",
        "state": "closed"
    }]

    data2.json

    [{
        "id":11,
        "text":"部门A"
    },{
        "id":12,
        "text":"部门B"
    },{
        "id":13,
        "text":"部门C"
    },{
        "id":14,
        "text":"部门D"
    },{
        "id":15,
        "text":"部门E"
    }]

    关于展开节点时,默认自动向服务器发送的数据?

    展开节点时,会自动向服务器传递该节点的id,比如此例子中的“公司E”展开时,会自动传递它的id:

    点此,查看在线例子:https://hamupp.github.io/gitblog/app/easyui/combotree/asyncTree.html

  • 相关阅读:
    老鸟的Python新手教程
    vs2010经常使用快捷键
    SQL基础--&gt; 约束(CONSTRAINT)
    哈哈,做题了
    【网络协议】TCP中的四大定时器
    JAVA反射机制
    JUnit入门
    怎样将程序猿写出来的程序打包成安装包(最简单的)
    事件传递机制总结
    理解class.forName()
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/6530978.html
Copyright © 2011-2022 走看看