miniui树 动态加载(懒加载) 实例

前台jsp:

<div class="mini-fit">
        <ul id="resourceTree" class="mini-tree"  style="width:100%;height:95%;" onbeforeload="onBeforeTreeLoad"
showTreeIcon="true" textField="text" idField="id" resultAsTree="false" expandOnLoad="true" onnodeclick="onclicknode" url="/dabot/dsm/dataSourceManager/sourceList">
        </ul>
</div>

其中,动态加载主要依靠的是onBeforeTreeLoad方法
js中方法为

function onBeforeTreeLoad(e){//动态加载树

    var tree = e.sender;    //树控件
    var node = e.node;      //当前节点
    var params = e.params;  //参数对象
    var levelnode =mini.get("#resourceTree").getAncestors(e.node);//获取该节点所有父节点
    var nodepath="";
    if(levelnode.length==0){nodepath=e.node.text}
    else{//对路径进行拼接 ,用来为后台判断节点位置
        for(i=0;i<levelnode.length;i++){
        nodepath=nodepath+levelnode[i].text+"/";
        }
        nodepath=nodepath+e.node.text;
    }
    console.log(nodepath);
    //可以传递自定义的属性
    var id=null;
    if(levelnode.length>0){id=levelnode[0].id;}
    else{id="0";}
    params.id = id; //后台获取数据源id
    params.nodepath=nodepath;//后台获取nodepath
}

后台java代码

public String sourceList() {
        HttpServletRequest request = ActionContext.getActionContext().getHttpServletRequest();
        String nodepath=request.getParameter("nodepath");//
        String id=request.getParameter("id");//数据源id
        System.out.println(nodepath);
        if(nodepath==null){
            ProcessResult<JSON> sourceList=this.getSourceListTree();
            return sourceList.getData().toString();
        }else if (nodepath.contains("query")) {
            ProcessResult<JSON> sourceList=this.getQueryList(id);
            return sourceList.getData().toString();
        } 
        else {
            ProcessResult<JSON> sourceList=treeNodeLoader.tree(null, nodepath);
            return sourceList.getData().toString();
        }

    }

其中 pathnode为null时,调用的方法如下

public ProcessResult<JSON> getSourceListTree() {
        String sql="select * from dsm02"; 
        List<Map<String, Object>> list=this.jdbcTemplate.queryForList(sql);
        JSONArray jsons = new JSONArray();
        for(int i=0;i<list.size();i++) {
            JSONObject json = new JSONObject();
            json.element("type", "sql");//数据库类型
            json.element("id", list.get(i).get("id"));
            json.element("text", list.get(i).get("linkname"));
            //json.element("iconCls", "/dabot/dsm/images/database.png");
            json.element("isLeaf", false);
            json.element("expanded", false);//LK添加
            jsons.add(json);
        }
        ProcessResult<JSON> pr = new ProcessResult<JSON>(true);
        pr.setData(jsons);
        return pr;
    }

注意,写返回json值的时候,这里isLeaf和expanded一定要写false,否则是子节点,无法展开。
最终实现效果图
这里写图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值