求大神给个easyui tree的例子，感谢！

答案:1 悬赏:50 手机版

解决时间 2021-11-21 09:20

提问者网友：半生酒醒
2021-11-20 13:29

最佳答案

五星知识达人网友：毛毛
2021-11-20 14:11

使用easyui 需要页面引用必须的js和css







// easyui tree 一般只需要url一个属性即可显示数据，tree会自动ajax加载数据
// 至于点击树节点如何显示相应页面，tree 的json数据格式里面有attributes 可以自定义url
//就像下面例子中的  "attributes":{"jsUrl"……，下面的列子是我在js里面拼接的tree json数据

    InitTree: function () {

        $('#tree').tree({
            animate: true,
            //lines: true,
            checkbox: false,
            data: TableToXml.TreeData(),
            onContextMenu: function (e, node) {
                e.preventDefault(); //阻止浏览器默认右键菜单
                // select the node
                if (node.id != -1 && node.id != -2 && node.id != -3) {
                    $('#txt_xml').attr('disabled', 'true');
                    $('#btn_save').linkbutton('disable');
                    TableToXml.currtableName = node.id;
                    TableToXml.currJsUrl = node.attributes.jsUrl;
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            }
        });
    },
    //组合树json数据
    TreeData: function () {
        var TreeJson = '[{"id":-1,"text":"Tables","children":[';

        TreeJson += '{"id":-2,"text":"废水污染源核算","children":[';
        for (var j = 0; j < TableToXml.tableArray[0].length; j++) {
            TreeJson += '{"id":"' + TableToXml.tableArray[0][j].split('$')[0] + '","text":"' + TableToXml.tableArray[0][j].split('$')[1] + '","attributes":{"jsUrl":"' + TableToXml.tableArray[0][j].split('$')[2] + '"}}';
            if (j < TableToXml.tableArray[0].length - 1)
                TreeJson += ',';
        }
        TreeJson += ']},';

        TreeJson += '{"id":-3,"text":"废气污染源核算","state": "closed","children":[';
        for (var j = 0; j < TableToXml.tableArray[1].length; j++) {
            TreeJson += '{"id":"' + TableToXml.tableArray[1][j].split('$')[0] + '","text":"' + TableToXml.tableArray[1][j].split('$')[1] + '","attributes":{"jsUrl":"' + TableToXml.tableArray[1][j].split('$')[2] + '"}}';
            if (j < TableToXml.tableArray[1].length - 1)
                TreeJson += ',';
        }
        TreeJson += ']}]}]';
        TreeJson = eval("(" + TreeJson + ")");
        return TreeJson;
    },

另附API里tree
$('#tt').tree({
    url: ...,//tree会自动ajax后台获取json格式数据(需要自己后台拼接)
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});
多看看api吧……

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！