jquery中EasyUI实现同步树

实现同步树需借助EasyUI Tree组件的loadFilter属性与远程数据源，以下是详细的攻略：

步骤一：引入依赖

在页面中引入jQuery、jQuery EasyUI和所需的主题样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery EasyUI同步树</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/icon.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt"></div>
</body>
</html>

步骤二：书写远程数据源

定义一个名为"data.json"的Json文件，并书写数据源，如下所示：

[
    {
        "id": 1,
        "text": "节点1",
        "parentId": null
    },
    {
        "id": 2,
        "text": "节点2",
        "parentId": null
    },
    {
        "id": 3,
        "text": "节点1-1",
        "parentId": 1
    },
    {
        "id": 4,
        "text": "节点1-2",
        "parentId": 1
    },
    {
        "id": 5,
        "text": "节点2-1",
        "parentId": 2
    },
    {
        "id": 6,
        "text": "节点2-2",
        "parentId": 2
    }
]

步骤三：加载数据

在EasyUI Tree组件中使用loadFilter属性进行数据处理，并通过url属性加载远程数据：

$('#tt').tree({
    url: 'data.json',
    method: 'get',
    loadFilter: function(data, parent){
        var opt = $(this).data().tree.options;
        var idField, textField, parentField;
        if (opt.parentField){
            idField = opt.idField || 'id';
            textField = opt.textField || 'text';
            parentField = opt.parentField;
            for(var i =0;i<data.length;i++){
                data[i].id = data[i][idField];
                data[i].text = data[i][textField];
                if (data[i][parentField]){
                    data[i]['_parentId'] = data[i][parentField];
                }
            }
            var treeData = [];
            for(var i=0;i<data.length;i++){
                var parentId = data[i]['_parentId'];
                if (!parentId){
                    treeData.push(data[i]);
                } else {
                    var parent = findParent(treeData,parentId);
                    if (parent.children){
                        parent.children.push(data[i]);
                    } else {
                        parent.children = [data[i]];
                    }
                }
            }
            return treeData;
        }
        return data;

        function findParent(data,parentId){
            for(var i=0;i<data.length;i++){
                if (data[i].id == parentId){
                    return data[i];
                } else if (data[i].children){
                    var res = findParent(data[i].children,parentId);
                    if (res){
                        return res;
                    }
                }
            }
            return null;
        }
    },
    animate: true,
    lines: true,
    dnd: true,
    onClick: function(node){
        console.log(node);
    }
})

示例一：基础同步树

在页面上实现一个基础的同步树，基础版同步树如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery EasyUI同步树</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/icon.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt"></div>
    <script type="text/javascript">
        $('#tt').tree({
            url: 'data.json',
            method: 'get',
            loadFilter: function(data, parent){
                var opt = $(this).data().tree.options;
                var idField, textField, parentField;
                if (opt.parentField){
                    idField = opt.idField || 'id';
                    textField = opt.textField || 'text';
                    parentField = opt.parentField;
                    for(var i =0;i<data.length;i++){
                        data[i].id = data[i][idField];
                        data[i].text = data[i][textField];
                        if (data[i][parentField]){
                            data[i]['_parentId'] = data[i][parentField];
                        }
                    }
                    var treeData = [];
                    for(var i=0;i<data.length;i++){
                        var parentId = data[i]['_parentId'];
                        if (!parentId){
                            treeData.push(data[i]);
                        } else {
                            var parent = findParent(treeData,parentId);
                            if (parent.children){
                                parent.children.push(data[i]);
                            } else {
                                parent.children = [data[i]];
                            }
                        }
                    }
                    return treeData;
                }
                return data;

                function findParent(data,parentId){
                    for(var i=0;i<data.length;i++){
                        if (data[i].id == parentId){
                            return data[i];
                        } else if (data[i].children){
                            var res = findParent(data[i].children,parentId);
                            if (res){
                                return res;
                            }
                        }
                    }
                    return null;
                }
            },
            animate: true,
            lines: true,
            dnd: true,
            onClick: function(node){
                console.log(node);
            }
        })
    </script>
</body>
</html>

示例二：多级同步树

在基础同步树之上，增加多层级的子树，可以通过在数据源中定义“parentId”属性实现：

[
    {
        "id": 1,
        "text": "节点1",
        "parentId": null
    },
    {
        "id": 2,
        "text": "节点2",
        "parentId": null
    },
    {
        "id": 3,
        "text": "节点1-1",
        "parentId": 1
    },
    {
        "id": 4,
        "text": "节点1-2",
        "parentId": 1
    },
    {
        "id": 5,
        "text": "节点2-1",
        "parentId": 2
    },
    {
        "id": 6,
        "text": "节点2-2",
        "parentId": 2
    },
    {
        "id": 7,
        "text": "节点1-1-1",
        "parentId": 3
    },
    {
        "id": 8,
        "text": "节点1-1-2",
        "parentId": 3
    }
]

多层级同步树如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery EasyUI同步树</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/themes/icon.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.5/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt"></div>
    <script type="text/javascript">
        $('#tt').tree({
            url: 'data.json',
            method: 'get',
            loadFilter: function(data, parent){
                var opt = $(this).data().tree.options;
                var idField, textField, parentField;
                if (opt.parentField){
                    idField = opt.idField || 'id';
                    textField = opt.textField || 'text';
                    parentField = opt.parentField;
                    for(var i =0;i<data.length;i++){
                        data[i].id = data[i][idField];
                        data[i].text = data[i][textField];
                        if (data[i][parentField]){
                            data[i]['_parentId'] = data[i][parentField];
                        }
                    }
                    var treeData = [];
                    for(var i=0;i<data.length;i++){
                        var parentId = data[i]['_parentId'];
                        if (!parentId){
                            treeData.push(data[i]);
                        } else {
                            var parent = findParent(treeData,parentId);
                            if (parent.children){
                                parent.children.push(data[i]);
                            } else {
                                parent.children = [data[i]];
                            }
                        }
                    }
                    return treeData;
                }
                return data;

                function findParent(data,parentId){
                    for(var i=0;i<data.length;i++){
                        if (data[i].id == parentId){
                            return data[i];
                        } else if (data[i].children){
                            var res = findParent(data[i].children,parentId);
                            if (res){
                                return res;
                            }
                        }
                    }
                    return null;
                }
            },
            animate: true,
            lines: true,
            dnd: true,
            onClick: function(node){
                console.log(node);
            }
        })
    </script>
</body>
</html>

以上是jquery中EasyUI实现同步树的完整攻略，两个示例均实现简单同步树和多级同步树。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery中EasyUI实现同步树 - Python技术站