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

Question

我正在尝试添加按钮而不是 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 的新手，不知道它是如何工作的。任何指导/帮助将不胜感激。

Answer 1

代码有些问题

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