jstree 实现动态加载树子节点

1548年前 (2018-05-16)javaScript12208


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



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

分享给朋友:

相关文章

js/jquery 日历控件及实例下载

js/jquery 日历控件及实例下载

实现日历控件效果:页面:<link href="${base}/resource/${profile.path}/css/lhgcalendar.css" rel="...

MySQL、Oracle数据库字段分别设置默认系统时间

MySQL设置方法:1、将字段类型设为  TIMESTAMP 2、将默认值设为  CURRENT_TIMESTAMPMySQL 脚本实现用例--添加CreateTime 设置默认时...

js/Jquery判断变量是否含有汉字

  js判断变量是否含有汉字 ,直接附上代码:   var aa= '你好';    var...

js实现字符串 传参数 作为变量名 并为其赋值(动态变量名)

直接附代码,自己测试<html> <script> //例如:为变量x赋值1 xvalue('x','1');//变量名为:x,值为:1....

Jquery实现自动提示magicsuggest-min.js实例

Jquery实现自动提示magicsuggest-min.js实例

效果图:   1.引入外部js、css:     <script src="${root!}/resou...

jquery实现飘窗(飘动图片) 插件bay-window.js

jquery实现飘窗(飘动图片) 插件bay-window.js

效果:   1.js及css部分:    <script type="text/javascript" src="/js/j...

发表评论

访客

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