zoukankan      html  css  js  c++  java
  • jstree 实现异步加载子节点

    <!-- jsTree -->
    <link rel="stylesheet" href="${ctx}/static/dists/themes/default/style.min.css" />
    <script src="${ctx}/static/dists/libs/jquery.js"></script>
    <script src="${ctx}/static/dists/jstree.min.js"></script>

    ------------------------------------------------------------------------------------------------------------------------------

    数据格式: [{"text":"a","children":true,"id":"a","icon":"folder"}]   json对象

    -------------------------------------------------------------------------------------------------------------------------

    实体类对应数据格式     用于返回数据

    public class StandardizedCoding {
    private String id;

    private String text;

    private Boolean children;

    private String icon;

    public String getText() {
    return text;
    }

    public void setText(String text) {
    this.text = text;
    }

    public Boolean getChildren() {
    return children;
    }

    public void setChildren(Boolean children) {
    this.children = children;
    }

    public String getIcon() {
    return icon;
    }

    public void setIcon(String icon) {
    this.icon = icon;
    }

    public String getId() {
    return id;
    }

    public void setId(String id) {
    this.id = id;
    }
    }

    -----------------------------------------------------------------------------------------------------------

    页面js

    <style type="text/css">
    #stand .folder { background:url('${ctx}/static/images/stand.png') no-repeat; }  //加载文件夹图片

    </style>

    <div class="box box-warning" id="stand" style="height: 450px; overflow:auto;">

    </div>

        $(function () {

    $('#stand')
    .jstree({
    'core' : {
    'data' : {
    'url' : '${ctx}/stand/retrunjson',      //底层封装url
    'data' : function (node) {
    return { 'id' : node.id};
    }
    },
    },
    'plugins' : ['wholerow']
    })

    .on("activate_node.jstree", function (obj, e) {
    var id = e.node.id;
    if(id.charAt(0)==4){                   //判断字符串第一个字符是否为4      字符串下标以0开头
    $("#editcode").append(id.substring(id.indexOf("_")+1));        //点击事件   此方法为第四层时向文本添加字符串切割下划线之后的内容  字符串操作包含头不包含尾
    }
    });
    var to = false;                                                         //自带搜索功能
    $('#search').click(function () {
    if(to) { clearTimeout(to); }
    to = setTimeout(function () {
    var v = $('#searchname').val();
    $('#edittree').jstree(true).search(v);
    }, 250);
    });

    });

    ------------------------------------------------------------------------------------------------------------------------------------

    controller方法返回数据集合

    @RequestMapping("/retrunjson")
    @ResponseBody
    public List<StandardizedCoding> retrunsoc(Model model,
    @RequestParam(value = "id", required = false,defaultValue="0") String id,        //底层封装url传递的参数  id为String类型
     
    HttpServletRequest request,
    HttpSession session) {
    List<StandardizedCoding> jsonlist =null;
    //System.out.println(id);
    if("#".equals(id)){                                              
    jsonlist=standardizedcodingservice.selectsoclist();
    }else if("1".equals(id.substring(0,1))){                                       //分割拼接的字符串    _前面为层数   后面为id   
    String pid = id.substring(id.indexOf("_")+1);
    int soccode = Integer.parseInt(pid);                                             //String类型id转成需要的int类型
    jsonlist=standardizedcodingservice.selecthlgtlistbysoccode(soccode);
    }else if("2".equals(id.substring(0,1))){
    String pid = id.substring(id.indexOf("_")+1);
    int hlgtcode = Integer.parseInt(pid);
    jsonlist=standardizedcodingservice.selecthltbyhlgt(hlgtcode);
    }else if("3".equals(id.substring(0,1))){
    String pid = id.substring(id.indexOf("_")+1);
    int hltcode = Integer.parseInt(pid);
    jsonlist=standardizedcodingservice.selectptbyhlt(hltcode);
    }else if("4".equals(id.substring(0,1))){
    String pid = id.substring(id.indexOf("_")+1);
    int ptcode = Integer.parseInt(pid);
    jsonlist=standardizedcodingservice.selectlltbypt(ptcode);
    }
    return jsonlist;
    }

    ----------------------------------------------------------------------------------------------------------------------------------

    业务逻辑层      拼接需要传递到前台的数据   层数+id

    public List<StandardizedCoding> selectsoclist() {
    List<StandardizedCoding> soclist =standardizedmapper.selectsoclist();
    String id="";
    for(StandardizedCoding soc :soclist){
    id="1_"+soc.getId();
    soc.setChildren(true);
    soc.setIcon("folder");
    soc.setId(id);
    }
    return soclist;
    }

    当能力支撑不了野心时,就该静下心来学习!
  • 相关阅读:
    基于PHP的正则表达式
    学习笔记---C/C++语法
    Stack的c实现
    回忆过去的两年
    学习笔记---计算机组成
    The shortest path---hdu2224 && Tour---poj2677(旅行商问题)
    Ubantu Linux 环境下编译c++程序
    Quoit Design---hdu1007(最近点对问题 分治法)
    Wrestling Match---hdu5971(2016CCPC大连 染色法判断是否是二分图)
    异或密码---hdu5968(CCPC合肥,二分)
  • 原文地址:https://www.cnblogs.com/1234cjq/p/6535174.html
Copyright © 2011-2022 走看看