easyUI 使用tree进行异步加载

今天药忘吃喽~ 2022-04-25 05:50 292阅读 0赞

![20190506095734414.png][]

easyUI的tree默认使用post请求，但是官方文档没有提及如何携带参数，我试过loader，但是没有搞懂怎么用，到网上查了一下，找到了传递参数的方法。通过queryParams来携带参数。

$("#tt").tree({
            url: '/getTree',
            method: 'post',
            queryParams: {
                id: 2
            },
            formatter: function (node) {
                return node.text;
            },
            loadFilter: function (data) {
                if (data.d) {
                    return data.d;
                } else {
                    return data;
                }
            },
            onClick: function (node) {
                console.log("onClick");
                console.log(node);
            },
            onLoadSuccess: function (node, data) {
                console.log("onLoadSuccess");
                console.log(node);
                console.log(data);
            },
            onSelect: function (node) {
                console.log("onSelect");
                console.log(node);
                var nodes = $('#tt').tree('getSelected');
                console.log(nodes);
            }
    })

onLoadSuccess中返回的data可能是这样的，其中state字段是很重要的，有了它这个对象就是文件夹，否则就是文件。假如有children字段，那么state默认是展开的。

当点击的文件夹下面有children时就会直接从children中获取数据，否则就会把当前点击对象的id的值作为参数传递到后台（PS：不需要手动添加queryParams）。

[{
        "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"
    }]

[20190506095734414.png]: /images/20220205/8687e55810be44718ce04266cf1a5fbf.png