Question

我需要在表格中显示一个对象数组，如表示。 Table包含具有属性的列，当单击列时，它应该在表中显示更多数据。它应该是可排序的。

是否有可以执行此操作的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属性指定的数据类型对列进行排序。为了简化使用，一些标准类型的数据免费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属性。为了能够将数据用作jqGrid的输入，我们使用该元素创建数组。我最重要的是，要了解上述代码的工作原理，我必须知道什么。

您可以添加.jqGrid("filterToolbar")来电，以便能够过滤数据或添加pager: true（或toppager: true或两者）以获取寻呼机并使用{{1}指定页面中的行数。在这种方式中，您可以在网格中加载相对较大的数据集，并且用户可以使用本地分页，排序和过滤。请参阅the demo，其中显示了加载，排序和过滤具有4000行的本地网格和具有40000行的another one的性能。如果一个人使用本地分页而不是一次显示所有数据，那么所有工作都很快。

Answer 2

我使用datatables.net表示所有“比列表更复杂”的表格。我是一个保存完好的图书馆，拥有大量的功能和极大的灵活性。在“con”栏中，我会说它太复杂了，它可能有相当陡峭的学习曲线。虽然文档很好，但大多数问题总是存在希望。

表格渲染的Javascript库

2 个答案: