时间戳

首页 > 解决方案 > 如何冻结jqGrid中的第一行

jquery - 如何冻结jqGrid中的第一行

问题描述

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

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

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

谢谢！

标签： jqueryjqgrid

解决方案

直接不支持这个。如果这可以解决问题，您可以使用冻结的页脚行，但在页脚处。要在此处放置数据，您需要启用 footerrow 和使用footerData方法。在此处查看文档

下面的建议只是想法 - 如果您不使用搜索，您可以调用 filterToolbar 方法，但在这种情况下，您需要在 colModel 的所有字段中设置 search: false。这样做，您将拥有一个冻结的标题数据行。

另一种可能的解决方案是使用 setGroupHeader 方法，请参见此处：该解决方案的缺点是该行位于标题行上方。

更新：

下面是假设 filterToolbar 不会用于搜索的代码。我的想法是通过以下步骤：

  1. 最初使用 search:false 设置字段
  2. 调用 fileterToobar 方法。这将添加一个冻结的标题
  3. 获取 id 以获取第一个。
  4. 从第一行获取数据并将其从网格中删除。
  5. 将日期放在标题中（查看 id 是如何构建的）
  6. 将 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});
        }
    });
});

这是演示的链接

推荐阅读