Javascript 用于 table 渲染的库

Question

我需要以 table 形式显示一组对象。 Table 具有具有属性的列，当单击该列时，它应该会在 table 中显示更多数据。应该是sortable.

是否有可以执行此操作的 JS 库，这样我就不必从头开始编写了？

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

Answer 1

我对所有 "more complex than lists" 表使用 datatables.net。 I 这是一个保存完好的库，具有大量的特性和极大的灵活性。在 "con" 专栏中，我会说它非常复杂，可能具有相当陡峭的学习曲线。尽管文档很棒，但大多数问题总是有希望的。

Answer 2

我创建了演示 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 指定的数据类型对列进行排序table。为了简化使用某些标准类型的数据，免费 jqGrid 提供了一些标准模板，这些模板是某些设置集的快捷方式。我在演示中使用了 template: "integer"，但如果仅按整数功能排序很重要，您可以将其替换为 sorttype: "integer"。

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

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

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

要访问对应于扩展行的数据项，可以使用 $(this).jqGrid("getLocalRow", rowid)。 return数据为原始数据项。它有我们需要的loc 属性。为了能够将数据用作 jqGrid 的输入，我们使用元素创建数组。我主要是了解上述代码的工作原理。

您可以添加 .jqGrid("filterToolbar") 的调用以便能够过滤数据或添加 pager: true（或 toppager: true，或两者兼有）以获得寻呼机并使用 rowNum: 5 来指定页面中的行数。在这种方式下，您可以在网格中加载相对较大的数据集，用户可以使用本地分页、排序和过滤。请参阅 the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one，其中包含 40000 行。如果使用本地分页而不是一次显示所有数据，所有工作都很快。

Javascript 用于 table 渲染的库

Javascript library for table rendering

javascript

jquery

jqgrid

free-jqgrid