jstree 实现动态加载树子节点

1547年前 (2018-05-16)javaScript11129


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



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

分享给朋友:

相关文章

jfinal 定时任务

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

UUID 生成方法

import java.util.UUID;/**     * UUID 生成方法     * @return uuid &nbs...

Jfinal +百度WebUploader组件实现多图片上传实例

Jfinal +百度WebUploader组件实现多图片上传实例

百度 Web Uploader文档的getting-started文档说明太简单,没有写全,在这里给大家补全($list会报没有定义,文档中确实没给定义)效果:有用部分外部jar包jfinal-2.0...

表单用submit提交前增加校验

有时由于各种原因 input 必须用submit类型提交,在表单提交前增加校验。直接附代码 <HTML>      <he...

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

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

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

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

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

发表评论

访客

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