添加按钮，该按钮将重定向到JQGrid中当前行的“查看页面" [英] to add button which will redirect to View Page of current row in JQGrid

问题描述

我正在尝试添加按钮而不是View列，但是我尝试使用formatter仍未加载按钮，但其余列的记录即将到来. 下面是我的代码:

I am trying to add button instead of View column but i tried with formatter still button is not loading but records are coming for the rest of the columns. Below is my code:

$(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的新手，不知道它是如何工作的.任何指导/帮助将不胜感激.

I am new to JqGrid and don't know how it works. Any guidance/Help will be appreciated.

推荐答案

代码有一些问题

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. 应该减少 global 函数的数量，因为这些函数将被视为window对象的属性.
可以使用
7. 代替name: 'Id'的用法隐藏列，而可以指定jsonReader的id: 'Id'属性.您使用repeatitems: false属性，这意味着输入数据的每一项都具有属性CountryName，StateName等. id属性的默认名称(rowid-<tr>元素的id)为id，但您改用了Id.属性id: "Id"通知jqGrid.

1. options has no rowid property, but it has rowId property. You should change options.rowid to options.rowId
2. The formatter will be called during building the HTML fragment of the grid body. No element of the grid exist at the moment on the page. Thus you can't use $('#' + rowid).live('click', ...); at the moment.
3. The formatter have to return the HTML fragment, which will be placed in the corresponding cell (inside of <td>). One misses return button; at the end of the formatter.
4. There are exist well-known name conversion in JavaScript. One should use functions, which starts with capital letter only if you define the constructor of the new class. You see that ViewButton will be displayed in the other color to distinguish classes from other function. You should rename ViewButton to viewButton to hold the standard name conversion of JavaScript.
5. It's better don't specify index property in colModel. In the same way one should not include the properties with the defaul value, like key: false. To specify common property for many columns you can use cmTemplate property.
6. One should reduce the number of global functions, because the functions will be considerd as the properties of window object.
7. instead of usage hidden column with name: 'Id' one can specify id: 'Id' property of jsonReader. You use repeatitems: false property, which means that every item of input data has properties CountryName, StateName and so on. The default name of the id property (the rowid - the id of <tr> elements) is id, but you use Id instead. The property id: "Id" informs jqGrid about it.

修改后的代码可能与以下内容有关

The modified code could be about the following

$(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(...);)注册整个网格的一个单击处理程序.如果用户单击任何单元格，则会由于事件冒泡而调用事件处理程序. e.target给出了被单击的DOM元素(例如<button>).通过使用closest，我们可以转到外部的<td>元素，该元素的父级是网格的行(<tr>).该行的.attr("id")是rowid.通过将点击处理程序绑定到网格内的每个按钮，这种绑定可以更有效地工作.

The last part of the above code ($("#jqGridA").click(...);) register one click handler for the whole grid. If the user clicks on any cell then the event handler will be called because of event bubbling. The e.target gives as the DOM element, which was clicked (for example the <button>). By using closest we can go to the outer <td> element, which parent is the row (<tr>) of the grid. The .attr("id") of the row is the rowid. Such binding works more effectively as binding click handler to every button inside of the grid.

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

By the way jqGrid has already one click event handler. One can use beforeSelectRow callback, because it will be called inside of the click handler. One should only don't forget to return true from the beforeSelectRow callback to inform jqGrid that you allow to select the row. The callback beforeSelectRow has already rowid as the first parameter, which simplify our code a little. The final code will be

$(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);
            }
        }
    });
});

这篇关于添加按钮，该按钮将重定向到JQGrid中当前行的“查看页面"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！