关于treegrid与combotree的使用

最新推荐文章于 2024-10-22 06:09:48 发布

OoChellyoO

最新推荐文章于 2024-10-22 06:09:48 发布

阅读量935

点赞数 1

CC 4.0 BY-SA版权

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/OoChellyoO/article/details/72829823

本文介绍了EasyUI中的treegrid和combotree组件的使用，特别是数据加载方式，包括懒加载和一次性加载。懒加载在点击时逐次加载数据，提高效率；一次性加载则要求返回的数据格式严格，且combotree不支持指定idField和treeField，返回数据应包含id和text字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最重要的一点应该是返回的数据类型与格式，如果不正确是得不到树形的结构的，或者得到undefined

treegrid

属性	类型	描述
idField	string	定义关键字段来标识树节点（必须的）
treeField	string	定义树节点字段（必须的）

可以分为2种
1. 懒加载：点击一下节点加载一部分，点一下继续加载
2. 直接一次性全部加载好

懒加载

点击一次加载一次，不会直接把所有数据查出来，提高效率

$("#treegrid").treegrid({
url:'area/queryLazyData.do',
pagination : true, //分页
rownumbers : true,// 行数
queryParams:{
    },
striped : true,// 奇偶行颜色区分
pagePosition : 'bottom',
checkOnSelect : true,
selectOnCheck : true,
singleSelect : true,
fitColumns : true,
border : false,
pagination : true,
//定义关键字段来标识树节点
idField : 'DM',
//定义树节点字段
treeField:'DMMC',
fit : true,
loadMsg : '数据加载中请稍后...',
columns : columns,
toolbar : '#toolbar',
//懒加载，展开前把url更换为查询子节点的url
onBeforeExpand : function(row){
    var url = "area/areaNode.do";
    $("#treegrid").treegrid("options").url = url;
    return true;
},
//这个就是树形菜单加载鼠标右键菜单的代码
onContextMenu: function(e,row){              
    e.preventDefault();
    //屏蔽浏览器的菜单
    $(this).treegrid('unselectAll');
    //清除所有选中项
    $(this).treegrid('select', row.DM);
    //选中状态 
    if(userAreaDm == row.DM){
        //最上一级不能修改或者删除
        $('#menu').menu('disableItem',$('#xg')[0]);
        $('#menu').menu('disableItem',$('#sc')[0]);
    }else{      
        $('#menu').menu('enableItem',$('#xg')[0]);
        $('#menu').menu('enableItem',$('#sc')[0]);
    }               
    $('#menu').menu('show', {
    left: e.pageX,
    top: e.pageY
    });
},
onLoadSuccess : function(row,data){
//加载完成后一定要还原查询的url，不然又会去onBeforeExpand里面的url
    var url = "area/queryLazyData.do";
   $("#treegrid").treegrid("options").url = url;
},

});
});

★返回的JSON格式为:
[{  
    "DM":"000086",
    "DMMC":"中国",
    "state":"open",
    "children":[{
            "DM":"510000",
            "YXBZ":"1",
            "DMMC":"四川省",
            "DM_SJ":"000086",
            "state":"closed",
            },
            {
            "DM":"110000",
            "YXBZ":"1",
            "DMMC":"北京",
            "DM_SJ":"000086",
            "state":"closed"}]

}]
★注：大部分返回以后是undefined的都是返回的数据格式不正确，state：表示这个节点的展开状态(必须要有)，open表示展开，closed表示关闭。children表示该节点的子节点，由于是懒加载，所以它的节点不需要children，点击时再去查

一次性加载

    主要就是返回的JSON数据不一样
    由于一次性加载，所以需要一次把所有数据的加载返回
    返回的JSON格式为:

     [{  
        "DM":"000086",
        "DMMC":"中国",
        "state":"open",
        "children":[{
                "DM":"510000",
                "YXBZ":"1",
                "DMMC":"四川省",
                "DM_SJ":"000086",
                "state":"closed",
                "children":[{
                     "DM":"123000",
                     "YXBZ":"1",
                     "DMMC":"成都市",
                     "DM_SJ":"510000",
                     "state":"closed",
                     "children":[{
                        "DM":"022354",
                        "YXBZ":"1",
                        "DMMC":"武侯区",
                        "DM_SJ":"123000",
                        "state":"open",
                        "children":[{}]
                     }]
                 }}
                },
                {
                "DM":"110000",
                "YXBZ":"1",
                "DMMC":"北京",
                "DM_SJ":"000086",
                "state":"closed",
                "children":[{}]
                }]
}]
//一次性加载并展开到固定节点(这里是只展开根节点)
    1.得到数据后先折叠所有节点
        $("#treegrid").treegrid('collapseAll');
    2.得到要展开节点的id(这里是根节点id)
        var id = $("#treegrid").treegrid('getRoot').id;
    3.展开指定节点(expandTo这个是从根节点展开到指定的节点)
        $("#treegrid").treegrid('expand',id);

combotree

懒加载和一次性加载基本与上面的一样，要注意的是这个返回的json格式的数据不能指定idField与treeField，所以只能按api上面介绍的格式，只能返回id与text，否则undefined

[{
“id”: 1,
“text”: “Node 1”,
“state”: “closed”,
“children”: [{
“id”: 11,
“text”: “Node 11”
},{
“id”: 12,
“text”: “Node 12”
}]
},{
“id”: 2,
“text”: “Node 2”,
“state”: “closed”
}]