用于表格渲染的 Javascript 库答案

【问题标题】：Javascript library for table rendering用于表格渲染的 Javascript 库
【发布时间】：2016-02-19 07:37:09
【问题描述】：

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

有没有一个JS库可以做到这一点，所以我不必从头开始写这个？

请查看附带的带有 JSON 对象的图片。当用户点击 Ana 时，会插入额外的行。

【问题讨论】：

看来jqGrid 4.9.1.有能力做我需要的。但我找不到任何使用它的例子。
有没有使用子网格的例子？
你以前用过jqGrid吗？哪个datatype 你和使用："local" 或"json"？区别：jqGrid 是应该调用 Ajax 来从服务器获取数据，还是你自己做？在datatype: "local" 的情况下，输入数据来自data 输入参数，它是您包含的格式的项目数组。对于datatype: "json"，输入为url。在您回答有关datatype 的问题后，我可以发布更多详细信息。
感谢奥列格的回答和伟大的图书馆！！！。我自己在 JSON 中获取数据并将其提供给网格。它使用起来非常直观，在查看示例的几个小时内，我已经有了一个 Alpha 版本。虽然，我有两件事。如何将列宽设置为自动？另一件事是：我有一个子网格。我了解它是如何工作的，但是......是否有一个示例显示如何插入表格？我主要对 HTML 感兴趣。
是的。我差点忘了。有没有办法使数据即使在子网格内也可排序？也许以某种方式实例化另一个 jqGRID 并注入它？

标签： javascript jquery jqgrid free-jqgrid

【解决方案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
        });
    }
});

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

这些列可根据colModel 的sorttype 属性指定的数据类型进行排序。为了简化使用，一些标准类型的免费数据 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，或两者）以拥有寻呼机并使用rowNum: 5 指定行数这页纸。在这种方式下，您可以在网格中加载相对较大的数据集，并且用户可以使用本地分页、排序和过滤。请参阅the demo，它显示了 4000 行本地网格的加载、排序和过滤性能，another one 具有 40000 行。如果一个人使用本地分页而不是一次显示所有数据，那么所有的工作都很快。

【讨论】：

那是很棒的解释和答案。我向你鞠躬。

【解决方案2】：

我将datatables.net 用于我所有的“比列表更复杂”的表格。 I 这是一个保存完好的库，具有大量功能和极大的灵活性。在“con”列中，我会说它非常复杂，以至于它可能具有相当陡峭的学习曲线。尽管文档很棒，但大多数问题总是有希望的。

【讨论】：