Question

我们可以冻结jqgrid的第一行吗？有可能吗？

我的jqgrid在第一行中包含自定义的组合框和输入字段以添加行，从第二行开始，它显示数据行，我们将它们放在第一行并添加了它们。当我达到网格的最大高度时，垂直滚动条可为用户滚动和查看底部的行。但是，当我不得不添加新行时，当我使用滚动条查看最后一行时，我必须一直滚动到最上方才能添加它。因此，我正在寻找一种冻结顶部行的解决方案，该方法不需要在用户每次需要添加新行时都滚动顶部。通过使用jqgrid的内置属性，我看不到几种冻结列的解决方案，但是我找不到冻结行的方法。

请让我知道是否有任何方法可以冻结它。

谢谢！

Answer 1

直接不支持此功能。如果这样可以解决问题，则可以使用冻结的页脚行，但应使用页脚行。要在此处放置数据，您需要启用页脚和使用 footerData 方法。参见docs here

以下建议仅是想法-如果不使用搜索，则可以调用filterToolbar方法，但是在这种情况下，需要在colModel中的所有文件中设置搜索：false。这样做，您将拥有冻结的标题数据行。

另一种可能的解决方案是使用setGroupHeader see here方法：该解决方案的缺点是该行位于标题行的上方。

更新：

以下是假定不使用filterToolbar进行搜索的代码。我的想法是按照以下步骤操作：

最初使用search：false设置字段
调用fileterToobar方法。这将添加一个冻结的标题
获取ID以获取第一个ID。
从第一行获取数据，然后从网格中将其删除。
将日期放入标头（请参阅id的构建方式）
将search设置为true以便使用其他搜索模块。

使用jsonstring和数组数据是相同的，所以我将数组数据放在这里。

    var mydata = [
           { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
           { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
           { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
    ];


    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            datatype: "local",
            data: mydata,
            height: 250,
            width: 780,
            sortname : "amount",
            sortorder: "desc",
            colModel: [
                { label: 'Inv No', name: 'id', width: 75, key:true, search : false },
                { label: 'Date', name: 'invdate', width: 90, search : false },
                { label: 'Client', name: 'name', width: 100, search : false },
                { label: 'Amount', name: 'amount', width: 80, search : false },
                { label: 'Tax', name: 'tax', width: 80, search : false },
                { label: 'Total', name: 'total', width: 80, search : false },
                { label: 'Notes', name: 'note', width: 150, search : false }
            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            caption: "Load jqGrid through Javascript Array",
        });
        // call filterToolbar with serch false. This build the header
        $("#jqGrid").jqGrid("filterToolbar",{});
        // get the first id and the data
        var ids = $("#jqGrid").jqGrid("getDataIDs");
        var first_id = ids[0];
        var first_row_data = $("#jqGrid").jqGrid("getRowData", first_id);
        // delete it
        $("#jqGrid").jqGrid("delRowData", first_id);
        // get colModel to get names
        var colModel = $("#jqGrid").jqGrid("getGridParam", "colModel");
        //console.log(colModel);
        for(var i=0, len= colModel.length; i<len; i++ ) {
            // set the header
            $("#gsh_jqGrid_"+colModel[i].name).html( first_row_data[colModel[i].name] );
            // set search to true in order to use the other search modules
            $("#jqGrid").jqGrid("setColProp", colModel[i], {search : true});
        }
    });
});

这里是链接to the demo

如何冻结jqGrid中的第一行

1 个答案: