jstree 实现动态加载树子节点

1547年前 (2018-05-16)javaScript11213


Js引用:

<script src="${root!}/resource/js/plugins/jsTree/jstree.min.js"></script>

html容器:

<div id="treeview" ></div>

js实现动态加载树:

//根据类型,点击节点自动触发一次url。
var url = "${root!}/admin/house/room/tree?lazy";
    $(function() {
          $("#treeview").jstree({
            'core' : {
              'data' : {
                  "url" : function(node) {
                      if(node.original) {
                        console.log(node.original);
                          var result = url;
                          result += "&type=" + node.original.type;
                            console.log(node.original.buildingValue);
                          if(node.original.buildingValue!=undefined) {
                               result += "&buildingValue=" + node.original.buildingValue;
                          }
                          if(node.original.floorValue!=undefined) {
                               result += "&floorValue=" + node.original.floorValue;
                          }
                           if(node.original.roomValue!=undefined) {
                               result += "&roomValue=" + node.original.roomValue;
                          }
                          return result;
                      } else {
                          return url;
                      }
                  },
                  "data" : function (node) {
                    return { "id" : node.id };
                  }
               }
             }
          });
    });

//点击节点可获取的值i

$('#treeview').on("changed.jstree", function (e, data) {  
    console.log("The selected nodes are:"+data.node);  
    console.log(data.node.id);
                 //选择的node id  
    console.log(data.node.text);            //选择的node text  
               var inst = data.instance;  
                var selectedNode = inst.get_node(data.selected);  
   console.log(selectedNode); //可获取整个选择的节点对象值
    //type = selectedNode.original.type;

});

后台类:

public void tree() {
//        JSONObject json = new JSONObject();
        List jsonlist = new ArrayList();
        List list = new ArrayList();
        if("#".equals(getPara("id"))) {
            JSONObject json = new JSONObject();
            json.put("text", "养老机构");
            json.put("children", true);
            json.put("type", "building");
            renderJson(json);
        } else {
            String type = getPara("type");
            switch(type) {
            case "building":
                jsonlist = new ArrayList();
                 list = Db.find("select DISTINCT building text from house");
                for (int i=0;i<list.size();i++){
                   Record record = (Record) list.get(i);
                   JSONObject json = new JSONObject();
                   json.put("text", "楼号"+record.getStr("text"));
                   json.put("children", true);
                   json.put("type", "floor");
                   json.put("buildingValue",  record.getStr("text"));
                   jsonlist.add(json);
                }
                logger.info("jsonlist=="+JSON.toJSON(jsonlist) );
                renderJson(jsonlist);
                break;
            case "floor":
                jsonlist = new ArrayList();
                 list = Db.find(" select DISTINCT  floor text,building  " +
                         "from house where building='"+getPara("buildingValue")+"'  ");
                for (int i=0;i<list.size();i++){
                   Record record = (Record) list.get(i);
                   JSONObject json = new JSONObject();
                   json.put("text", "楼层"+record.getStr("text"));
                   json.put("children", true);
                   json.put("type", "room");
                   json.put("buildingValue", record.getStr("building"));
                   json.put("floorValue",  record.getStr("text"));
                   jsonlist.add(json);
                }
                logger.info("jsonlist=="+JSON.toJSON(jsonlist) );
                renderJson(jsonlist);
                break;
            case "room":
                jsonlist = new ArrayList();
                 list = Db.find(" select DISTINCT room text,floor,building  from house " +
                         " where floor='"+getPara("floorValue")+"' " +
                         " and  building='"+getPara("buildingValue")+"'     ");
                    for (int i=0;i<list.size();i++){
                       JSONObject json = new JSONObject();
                       Record record = (Record) list.get(i);
                       json.put("text", "房间"+record.getStr("text"));
                       json.put("children", true);
                       json.put("type", "bed");
                       json.put("buildingValue", record.getStr("building"));
                       json.put("floorValue",  record.getStr("floor"));
                       json.put("roomValue",  record.getStr("text"));
                       jsonlist.add(json);
                    }
                    renderJson(jsonlist);
                break;
            case "bed":
                jsonlist = new ArrayList();
                 list = Db.find(" select DISTINCT bed text,room ,floor,building from house" +
                         " where room = '"+getPara("roomValue")+"' and " +
                         " floor='"+getPara("floorValue")+"' and  building='"+getPara("buildingValue")+"'  ");
                        for (int i=0;i<list.size();i++){
                           Record record = (Record) list.get(i);
                           JSONObject json = new JSONObject();
                           json.put("text", "床位"+record.getStr("text"));
                           json.put("type", "last");
                           json.put("children", false);
                           json.put("buildingValue", record.getStr("building"));
                           json.put("floorValue",  record.getStr("floor"));
                           json.put("roomValue",  record.getStr("room"));
                           json.put("bedValue",  record.getStr("text"));
                           jsonlist.add(json);
                        }
                 renderJson(jsonlist);
                break;
            }
        }
        
    }



本文原创,转载必追究版权。

分享给朋友:

相关文章

plsql 中number类型字段 取消科学计数法显示

 PL/SQL DEVELOPER中禁用科学计数法:Tools - Prefrence - SQL Window - 选择:"Number fields to_char&quo...

get/post方式调用http接口

get/post方式调用http接口

 1. 项目环境如下:myeclipse8.5 、tomcat5.0/weblogic、xp、JDK:开发1.5,编译1.4为了方便,在原来的web项目UpDown中新建了一个httpcal...

JS或Jquery获取浏览器URL的参数值 汉字值乱码 并转码

JS或Jquery获取浏览器URL的参数值 汉字值乱码 并转码

1、获取url很简单,代码如下:     window.location.href;2、jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么...

MyEclipse 中项目修改SVN的地址

MyEclipse 中项目修改SVN的地址

在工作环境调整时,有的时候SVN服务器的地址需要修改,而正在开发中的项目在Eclipse中有些代码没有提交,此时怎么修改SVN的地址呢?以下有一个简单的办法:一、在MyEclipse中选择Window...

jquery 获取焦点

当文本框或下拉等必填时,如果没有输入就给予提示并使该文本框获得焦点!如果是js,对象.focus()即可。可是如果是jQuery, 这样$("#aa") 返回的就不是DOM对象而是...

jfinal 定时任务

1、去quartz官网下载 定时任务jar包(http://www.quartz-scheduler.org/)quartz-*.*.*.jar2、创建定时任务:public class SetAre...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。