jqGrid的添加自定义按钮排 [英] JqGrid Add custom button to Row

问题描述

我想自定义按钮添加到一个实现了退房过程中的jqGrid。
基本上，每一行都有，如果单击应该能发个帖子回服务器和更新的购物车，然后更改按钮上的文字为撤消签出A退房按钮。
到目前为止，我有：

I am trying to add a custom button to a JqGrid that implements a 'Check Out' process. Basically, every row has a 'Check Out' button that if clicked should be able to send a post back to the server and update a shopping cart and then change the button text to 'Undo Check Out'. So far I have:

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 });
            }
        },
...

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

Where '???' is the part I need to solve.

感谢您提前对您有所帮助。

Thank you in advance for your help.

推荐答案

这在我看来，你已经一个全球性的JavaScript函数如 MyCheckOut 并调用它的内部 ???区。如果您添加到这个功能，比如 ROWID 额外的参数，那么你可以简单地这样覆盖包含您＆LT;输入＆GT; 操作，这将指向新的 MyCheckIn 功能，并具有相应的值文本属性按钮。您code将看起来像下面这样：

It seem to me that you have already a global JavaScript function like MyCheckOut and call it inside of '???' area. If you add to this function an additional parameter like rowId then you can simply so overwrite the contain of you <input> button of the 'action', that it will point to new MyCheckIn function and have corresponding text in the value attribute. Your code will looks like following:

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 。

If you have as a rowIdnot an integer, then you should place ' from the both side from rowId.

这篇关于jqGrid的添加自定义按钮排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！