JqG​​rid向Row添加自定义按钮

Question

我正在尝试将自定义按钮添加到实现“签出”过程的JqGrid。 基本上，每一行都有一个“签出”按钮，如果点击该按钮，应该能够将帖子发送回服务器并更新购物车，然后将按钮文本更改为“撤消签出”。 到目前为止，我有：

colNames: ['Id', ... , 'Action' ],
colModel: [
{ name: 'Id', sortable: false, width: 1, hidden: true},
...
{ name: 'action', index: 'action', width: 75, sortable: false }
],
...
gridComplete: function() {
            var ids = jQuery("#east-grid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                checkout = "<input style='height:22px;width:75px;' type='button' value='Check Out' onclick=\" ??? \"  />";
                jQuery("#east-grid").jqGrid('setRowData', ids[i], { action: checkout });
            }
        },
...

哪里'???'是我需要解决的部分。

提前感谢您的帮助。

Answer 1

在我看来，你已经拥有像MyCheckOut这样的全局JavaScript函数，并在'???'中调用它区域。如果您向此函数添加其他参数，例如rowId，那么您可以简单地覆盖“动作”的<input>按钮的包含，它将指向新的MyCheckIn函数和在value属性中有相应的文字。您的代码如下所示：

MyCheckOut = function (gridId,rowId) {
    // do Check Out
    // ...
    // replace "Check Out" button to "Check In"
    var checkIn = "<input style='height:22px;width:75px;' type='button' " + 
               "value='Check In' " +
               "onclick=\"MyCheckIn(jQuery('" + gridId + "')," +
               rowId + "); \"  />";
    jQuery(gridId).jqGrid('setRowData', rowId, { action: checkIn });
};

MyCheckIn = function (grid,rowId) {
    // do Check In
    // ..
    // replace "Check In" button to "Check Out" like in MyCheckOut 
};

jQuery("#east-grid").jqGrid({
    // ...
    colNames: ['Id', ... , 'Action' ],
    colModel: [
        { name: 'Id', sortable: false, width: 1, hidden: true},
        // ...
        { name: 'action', index: 'action', width: 75, sortable: false }
    ],
    // ...
    gridComplete: function() {
        var grid = jQuery("#east-grid");
        var ids = grid.jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var rowId = ids[i];
            var checkOut = "<input style='height:22px;width:75px;' " +
                           "type='button' value='Check Out' " +
                           "onclick=\"MyCheckOut('#east-grid'," +
                           rowId + ");\" />";
            grid.jqGrid('setRowData', rowId, { action: checkOut });
        }
    },
    // ...
});

如果您的rowId不是整数，那么您应该从'的两边放置rowId。