用于表格渲染的 Javascript 库

Question

我需要在表中显示对象数组，例如表示形式。表具有带有属性的列，当单击该列时，它应该显示表内的更多数据。它应该是可排序的。

是否有一个 JS 库可以做到这一点，这样我就不必从头开始编写它？

请参阅附带的带有 JSON 对象的图像。 当用户单击 Ana 时，会插入附加行。

Answer 1

我创建了演示 https://jsfiddle.net/OlegKi/kc2537ty/1/它演示了免费 jqGrid 与子网格的用法。它显示的结果类似于

用户单击第二行中的“+”图标后。

您可以在下面找到相应的代码

var mydata = [
        { id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
        { id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
    ];
$("#grid").jqGrid({
    data: mydata,
    colModel: [
        { name: "name", label: "Name" },
        { name: "lname", label: "Last name" },
        { name: "age", label: "Age", template: "integer", align: "center" }
    ],
    cmTemplate: { align: "center", width: 150 },
    sortname: "age",
    iconSet: "fontAwesome",
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowid) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];

        $("#" + subgridDivId).append($subgrid);
        $subgrid.jqGrid({
            idPrefix: rowid + "_",
            data: subgridData,
            colModel: [
                { name: "location", label: "Localtion" },
                { name: "city", label: "City" },
                { name: "country", label: "Country" }
            ],
            cmTemplate: { align: "center" },
            iconSet: "fontAwesome",
            autowidth: true
        });
    }
});

对代码的小注释。免费 jqGrid 将输入数据的所有属性保存在data中范围。我添加了id每个输入数据项的属性。这不是强制性的，但如果您向网格添加更多功能，它可能会有所帮助。请参阅the introduction了解更多详情。

这些列可根据 sorttype 指定的数据类型进行排序colModel的属性(property)。为了简化使用某些标准类型的数据，免费 jqGrid 提供了一些标准模板，这些模板是某些设置集的快捷方式。我用过template: "integer"在演示中，但您可以将其替换为 sorttype: "integer"如果仅按整数排序功能很重要。

如果用户单击“+”图标展开子网格，则 jqGrid 会插入新行并为子网格的数据部分创建 div。您可以替换subGridRowExpanded从上面的例子到下面的例子

subGridRowExpanded: function (subgridDivId) {
    $("#" + subgridDivId).html("<em>simple subgrid data</em>");
}

明白我的意思。 div 的唯一 id 将是回调的第一个参数。人们可以在子网格中创建任何常见的 HTML 内容。因此可以创建空的 <table> ，将其附加到子网格 div 并 然后将表格转换为子网格。

要访问与扩展行相对应的数据项，可以使用 $(this).jqGrid("getLocalRow", rowid) 。返回数据为原始数据项。它有loc我们需要的属性(property)。为了能够使用数据作为 jqGrid 的输入，我们使用元素创建数组。我主要讲的是，要理解上面的代码是如何工作的，人们必须知道什么。

您可以添加.jqGrid("filterToolbar")的通话能够过滤数据或添加 pager: true (或 toppager: true ，或两者)拥有寻呼机并使用 rowNum: 5指定页面中的行数。通过这种方式，您可以在网格中加载相对较大的数据集，并且用户可以使用本地分页、排序和过滤。请参阅the demo它显示了具有 4000 行和 another one 的本地网格的加载、排序和过滤性能。有 40000 行。如果使用本地分页并且不一次显示所有数据，那么所有工作都会很快。