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

在我看来,你已经有一个全局的JavaScript函数MyCheckOut,并在'???'中调用它 区域.如果你向这个函数添加一个额外的参数,rowId你可以简单地覆盖<input>'action' 的包含你的按钮,它将指向新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.