添加将重定向到 JQGrid 中当前行的查看页面的按钮

Posted 2023-05-09

【中文标题】添加将重定向到 JQGrid 中当前行的查看页面的按钮

【英文标题】：to add button which will redirect to View Page of current row in JQGrid

【发布时间】：2017-03-06 07:07:32

【问题描述】：

我正在尝试添加按钮而不是 View 列，但我尝试使用 formatter 仍然没有加载按钮，但其余列的记录即将到来。 以下是我的代码：

$(function () 
    $("#grid").jqGrid(
        url: "/Location/LocationsList1",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
        colModel: [
             key: true, hidden: true, name: 'Id', index: 'Id', editable: true ,
             key: false, name: 'CountryName', index: 'CountryName', editable: true ,
             key: false, name: 'StateName', index: 'StateName', editable: true ,
             key: false, name: 'CityName', index: 'CityName', editable: true ,
             key: false, name: 'Name', index: 'Name', editable: true ,
             key: false, name: 'View', index: 'View', editable: true,formatter:ViewButton ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Location',
        emptyrecords: 'No records to display',
        jsonReader: 
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        ,

    );
);
function ViewButton(cellvalue, options, rowObject) 
    var rowid= options.rowid;
    var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line   Item</button>"
    $('#' + rowid).die();
    $('#' + rowid).live('click', function (rowId) 
        alert("hi");
        alert(rowId);
    );
;

我是 JqGrid 的新手，不知道它是如何工作的。任何指导/帮助将不胜感激。

【参考方案1】：

代码有些问题

options 没有 rowid 属性，但它有 rowId 属性。您应该将 options.rowid 更改为 options.rowId 格式化程序将在构建网格主体的 HTML 片段期间调用。页面上目前不存在网格元素。因此，您目前无法使用$('#' + rowid).live('click', ...);。 格式化程序必须返回 html 片段，该片段将放置在相应的单元格中（<td> 内部）。一个在格式化程序末尾错过了return button;。 javascript 中存在众所周知的名称转换。应该使用函数，只有在定义新类的构造函数时才以大写字母开头。您会看到ViewButton 将显示为另一种颜色，以区分类和其他功能。您应该将 ViewButton 重命名为 viewButton 以保持 JavaScript 的标准名称转换。 最好不要在colModel 中指定index 属性。同样，不应包含具有默认值的属性，例如key: false。要为许多列指定 common 属性，您可以使用 cmTemplate 属性。 应该减少全局函数的数量，因为这些函数将被视为window对象的属性。 可以指定jsonReader 的id: 'Id' 属性，而不是使用name: 'Id' 的隐藏列。你使用repeatitems: false属性，这意味着输入数据的每一项都有CountryName、StateName等属性。 id 属性的默认名称（rowid - <tr> 元素的 id）是 id，但您使用 Id 代替。属性id: "Id" 会通知 jqGrid。

修改后的代码大概如下

$(function () 
    function viewButton(cellvalue, options, rowObject) 
        return "<button class=\"viewLineItem\" id=\"" +
            options.rowId + "\">View Line   Item</button>";
    

    $("#grid").jqGrid(
        url: "/Location/LocationsList1",
        datatype: 'json',
        colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
        colModel: [
             name: 'Id', key: true, hidden: true ,
             name: 'CountryName' ,
             name: 'StateName' ,
             name: 'CityName' ,
             name: 'Name' ,
             name: 'View', editable: false, formatter: viewButton 
        ],
        cmTemplate:  editable: true ,
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Location',
        emptyrecords: 'No records to display',
        jsonReader:  repeatitems: false, id: "Id" 
    );

    $("#jqGridA").click(function (e) 
        var $td = $(e.target).closest("tr.jqgrow>td"),
            rowid = $td.parent().attr("id"),
            p = $(this).jqGrid("getGridParam");

        if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") 
            alert(rowid);
        
    );
);

上述代码的最后一部分（$("#jqGridA").click(...);）为整个网格注册了一个点击处理程序。如果用户单击任何单元格，则将调用事件处理程序，因为event bubbling。 e.target 作为被点击的 DOM 元素给出（例如 <button>）。通过使用closest，我们可以转到外部<td> 元素，其父元素是网格的行（<tr>）。行的.attr("id") 是rowid。这种绑定更有效地将点击处理程序绑定到网格内的每个按钮。

顺便说一句，jqGrid 已经有一个click 事件处理程序。可以使用beforeSelectRow 回调，因为它将在click 处理程序内部调用。不要忘记从beforeSelectRow 回调中返回true，以通知jqGrid 您允许选择行。回调beforeSelectRow 已经将rowid 作为第一个参数，这稍微简化了我们的代码。最终代码将是

$(function () 
    function viewButton(cellvalue, options, rowObject) 
        return "<button class=\"viewLineItem\" id=\"" +
            options.rowId + "\">View Line   Item</button>";
    

    $("#grid").jqGrid(
        url: "/Location/LocationsList1",
        datatype: 'json',
        colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
        colModel: [
             name: 'CountryName' ,
             name: 'StateName' ,
             name: 'CityName' ,
             name: 'Name' ,
             name: 'View', editable: false, formatter: viewButton 
        ],
        cmTemplate:  editable: true ,
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Location',
        emptyrecords: 'No records to display',
        jsonReader:  repeatitems: false, id: "Id" ,
        beforeSelectRow: function (rowid, e) 
            var $td = $(e.target).closest("tr.jqgrow>td"),
                p = $(this).jqGrid("getGridParam");

            if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") 
                alert(rowid);
            
        
    );
);

【讨论】：

谢谢你 Oleg.. 效果很好..你有没有关于在 JQGrid 中实现对控制器的 ajax 后调用的网格中的排序和搜索的想法

@Steve：不客气！服务器应该只返回 all 项的数组（来自url）并且您应该添加 jqGrid 的loadonce: true 选项。如果使用我的 jqGrid 分支（free jqGrid），您可以另外使用forceClientSorting: true 选项，它允许排序（按sortname 和sortorder）并过滤（按postData.filters）从服务器之前显示返回数据的第一页。以the demo 为例。

@Steve：local分页、排序和过滤的性能非常好。您可以在the demo 上看到对 40000 行、13 列、每页显示 20 行的网格进行排序、过滤或分页需要多少时间。

loadonce:true 为我工作。谢谢你..但为此我必须一次加载所有数据..实际上我试图在我的查询中使用.ToPagedList 但它正在返回只有前 10 条记录，并且由于寻呼机被禁用以获取 10 条记录的第二页，因此在这种情况下无法使用寻呼机:(

@Steve：我不完全理解你的问题。网格中应该显示多少行？您可以在我的上一条评论中看到，可以足够快地加载和过滤 1000 或 40000 行。为什么加载所有数据是问题？如果您真的有很多数据（数百万个项目），那么您必须实现服务器端分页、排序和过滤。在网格中显示未过滤的数据（1000 万个中的前 20 个）不会给用户提供任何实用信息。 .ToPagedList 我不清楚。如果您有服务器端问题，您应该使用 C# 代码打开新问题。