EasyUI使用DataGrid实现动态列数据绑定

让我来详细讲解一下“EasyUI使用DataGrid实现动态列数据绑定”的攻略。

思路简介

使用 EasyUI 的 DataGrid 实现动态列数据绑定的步骤如下：

第一步：定义 DataGrid
第二步：获取数据
第三步：根据数据动态生成列
第四步：将列数据填充至 DataGrid 中

详细步骤

第一步：定义 DataGrid

首先，在 HTML 页面中定义一个 id 为 datagrid 的 div 节点：

<div id="datagrid"></div>

然后，在 JavaScript 中使用 EasyUI 创建一个 DataGrid：

$('#datagrid').datagrid({
    fitColumns: true,
    singleSelect: true,
    border: false,
    columns: [],
    data: []
});

注意，这里的 columns 和 data 都是空的，后面会动态生成。

第二步：获取数据

在使用 DataGrid 绑定数据之前，需要先获取数据。可以使用 jQuery 的 $.ajax() 方法异步获取数据：

$.ajax({
    type: "GET",
    url: "data.json",
    dataType: "json",
    success: function(data) {
        // do something
    },
    error: function() {
        alert('Error retrieving data!');
    }
});

假设获取到的数据格式如下：

{
  "columns": ["姓名", "语文", "数学", "英语"],
  "rows": [
    {"name": "张三", "chinese": 90, "math": 80, "english": 70},
    {"name": "李四", "chinese": 85, "math": 75, "english": 80},
    {"name": "王五", "chinese": 80, "math": 90, "english": 85}
  ]
}

第三步：根据数据动态生成列

根据获取到的数据，可以动态生成 DataGrid 的列信息。可以使用 JavaScript 的 forEach() 方法遍历数据的列信息，然后根据列信息生成相应的列数据：

var columns = [];
data.columns.forEach(function(col, index) {
    if (index === 0) {
        columns.push({
            field: "name",
            title: col,
            width: 100
        });
    } else {
        columns.push({
            field: "col" + index,
            title: col,
            width: 80
        });
    }
});

这里需要注意的是第一列要单独处理，其他列可以使用循环生成，同时要注意设置每列的宽度。

第四步：将列数据填充至 DataGrid 中

最后，将生成的列信息和获取到的行数据填充至 DataGrid 中即可：

$('#datagrid').datagrid({
    fitColumns: true,
    singleSelect: true,
    border: false,
    columns: [columns],
    data: data.rows
});

这样就完成了 DataGrid 的动态列数据绑定过程。

示例说明

下面给出两个示例说明。

示例一：从服务器获取数据

这个示例演示了从服务器获取数据并显示在 DataGrid 中，代码如下：

<head>
    <meta charset="UTF-8">
    <title>动态列数据绑定</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.3/themes/default/easyui.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.3/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcss.com/easyui/1.6.3/jquery.easyui.min.js"></script>
    <script>
        $(function() {
            $.ajax({
                type: "GET",
                url: "data.json",
                dataType: "json",
                success: function(data) {
                    var columns = [];
                    data.columns.forEach(function(col, index) {
                        if (index === 0) {
                            columns.push({
                                field: "name",
                                title: col,
                                width: 100
                            });
                        } else {
                            columns.push({
                                field: "col" + index,
                                title: col,
                                width: 80
                            });
                        }
                    });
                    $('#datagrid1').datagrid({
                        fitColumns: true,
                        singleSelect: true,
                        border: false,
                        columns: [columns],
                        data: data.rows
                    });
                },
                error: function() {
                    alert('Error retrieving data!');
                }
            });
        });
    </script>
</head>
<body>
    <div id="datagrid1"></div>
</body>

示例二：使用静态数据

这个示例演示了使用静态数据生成 DataGrid，代码如下：

<head>
    <meta charset="UTF-8">
    <title>动态列数据绑定</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.3/themes/default/easyui.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.3/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcss.com/easyui/1.6.3/jquery.easyui.min.js"></script>
    <script>
        $(function() {
            var data = {
              "columns": ["姓名", "语文", "数学", "英语"],
              "rows": [
                {"name": "张三", "chinese": 90, "math": 80, "english": 70},
                {"name": "李四", "chinese": 85, "math": 75, "english": 80},
                {"name": "王五", "chinese": 80, "math": 90, "english": 85}
              ]
            };
            var columns = [];
            data.columns.forEach(function(col, index) {
                if (index === 0) {
                    columns.push({
                        field: "name",
                        title: col,
                        width: 100
                    });
                } else {
                    columns.push({
                        field: "col" + index,
                        title: col,
                        width: 80
                    });
                }
            });
            $('#datagrid2').datagrid({
                fitColumns: true,
                singleSelect: true,
                border: false,
                columns: [columns],
                data: data.rows
            });
        });
    </script>
</head>
<body>
    <div id="datagrid2"></div>
</body>

这两个示例可以直接复制到 HTML 页面中运行，并且需要引入相关的 jQuery 和 EasyUI 库。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：EasyUI使用DataGrid实现动态列数据绑定 - Python技术站