用于表呈现的Javascript库 [英] Javascript library for table rendering

问题描述

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

I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.

是否存在可以执行此操作的JS库，所以我不必从头开始编写此代码?

Is there a JS library that could do this, so I dont have to write this from scratch?

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

Please see the attached image with the JSON object. When the user clicks on Ana, additional row is inserted.

推荐答案

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

I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like

在用户单击第二行中的"+"图标之后.

after the user clicks on the "+" icon in the second line.

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

The corresponding code you can find below

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属性.它不是强制性的，但是如果您要向网格中添加更多功能，可能会有所帮助.有关更多详细信息，请参见简介.

Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.

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

The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.

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

If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following

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

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

to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and then convert the table to the subgrid.

要访问与展开的行相对应的数据项，可以使用$(this).jqGrid("getLocalRow", rowid).返回数据是原始数据的项目.它具有我们需要的loc属性.为了能够将数据用作jqGrid的输入，我们使用元素创建了数组.我几乎是所有人，必须了解什么才能理解以上代码的工作原理.

To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.

您可以添加对.jqGrid("filterToolbar")的调用以能够过滤数据或添加pager: true(或toppager: true或这两者)以具有寻呼机并使用rowNum: 5指定中的行数这页纸.这样，您可以在网格中加载相对较大的数据集，并且用户可以使用本地分页，排序和过滤.参见演示，其中显示了具有4000行和

You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.

这篇关于用于表呈现的Javascript库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！