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

代码有一些问题

options没有rowid属性，但它具有rowId属性。您应该将options.rowid更改为options.rowId
在构建网格主体的HTML片段期间，格式化程序将被称为。页面上当前不存在网格元素。因此，目前您无法使用$('#' + rowid).live('click', ...);。

格式化程序必须返回HTML片段，该片段将放置在相应的单元格中（<td>内）。一个人在格式化程序的末尾错过了return button;。

JavaScript中存在众所周知的名称转换。应该使用函数，只有在定义新类的构造函数时才会以大写字母开头。您会看到ViewButton将以其他颜色显示，以便将类与其他功能区分开来。您应该将ViewButton重命名为viewButton以保留JavaScript的标准名称转换。

最好不要在index中指定colModel属性。以同样的方式，不应该包含具有默认值的属性，例如key: false。要为许多列指定 common 属性，可以使用cmTemplate属性。

应该减少全局函数的数量，因为这些函数将被视为window对象的属性。

使用name: 'Id'代替使用隐藏列，可以指定id: 'Id'的{{1}}属性。您使用jsonReader属性，这意味着输入数据的每个项都具有属性repeatitems: false，CountryName等等。 id属性的默认名称（rowid - StateName元素的id）为<tr>，但您使用的是id。属性Id通知jqGrid。

修改后的代码可以是以下内容

id: "Id"

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

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

rowid

添加将重定向到JQGrid中当前行的View Page的按钮

1 个答案: