jqGrid-復選框編輯無法編輯所選行

Question

在我的jqGrid中，我有一個復選框也可用於編輯，即用戶可以單擊該復選框，並且該復選框的值將在數據庫中更新。 很好 但是，當我單擊復選框時，如果再次嘗試單擊它，則什么也沒有發生 。 該行不會保存。 理論上，復選框的未選中值應保存。 但這不會發生。

我已經試過指這個答案奧列格，但它並不能幫助。

奇怪的問題是，如果我選擇另一行，然后嘗試再次取消選中該復選框，則會看到保存請求。

我猜這是因為我正在嘗試編輯當前選中的行。 但是我不確定我在做什么錯。

這就是我在beforeSelectRow所做的

beforeSelectRow: function (rowid, e) {
    var $target = $(e.target),
        $td = $target.closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        colModel = $(this).jqGrid("getGridParam", "colModel");
    if (iCol >= 0 && $target.is(":checkbox")) {
        if (colModel[iCol].name == "W3LabelSelected") {
            console.log(colModel[iCol].name);
            $(this).setSelection(rowid, true);
            $(this).jqGrid('resetSelection');
            $(this).jqGrid('saveRow', rowid, {
                succesfunc: function (response) {
                    $grid.trigger('reloadGrid');
                    return true;
                }
            });
        }
    }
    return true;
},

組態：

jqGrid版本：最新免費的jqGrid

數據類型：Json被保存到服務器

最小網格代碼 ： jsFiddle

編輯：在奧列格的答案后，這就是我到目前為止：

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
        cm = $self.jqGrid("getGridParam", "colModel");
    if (cm[iCol].name === "W3LabelSelected") {
        //console.log($(e.target).is(":checked"));
        $(this).jqGrid('saveRow', rowid, {
            succesfunc: function (response) {
                $grid.trigger('reloadGrid');
                return true;
            }
        });
    }

    return true; // allow selection
}

這接近我想要的。 但是，如果我第一次和第二次在復選框上選擇， console.log確實會被每次調用。 但是，只有在我選中該復選框，然后再次單擊它時，才會調用saveRow ，以在第一次時取消選中它，之后再也沒有。 默認情況下，可以根據服務器發送的數據選中或取消選中此復選框。

在圖像中，兩次選中復選框后發送請求，而不是每次發送。

更新：按照cellattr的建議，我實現了cellattr並在其中調用了一個函數。 在函數中，我只是傳遞了rowid並更新了服務器上該rowid的復選框。

這是我使用的代碼：

{
    name: 'W3LabelSelected',
    index: 'u.W3LabelSelected',
    align: 'center',
    width: '170',
    editable: false,
    edittype: 'checkbox',
    formatter: "checkbox",
    search: false,
    formatoptions: {
        disabled: false
    },
    editoptions: {
        value: "1:0"
    },
    cellattr: function (rowId, tv, rawObject, cm, rdata) {
        return ' onClick="selectThis(' + rowId + ')"';
    }
},

和我的selectThis函數：

function selectThis(rowid) {
    $.ajax({
        type: 'POST',
        url: myurl,
        data: {
            'id': rowid
        },
        success: function (data) {
            if (data.success == 'success') {
                $("#list").setGridParam({
                    datatype: 'json',
                    page: 1
                }).trigger('reloadGrid');
            } else {
                $("<div title='Error' class = 'ui-state-error ui-corner-all'>" + data.success + "</div>").dialog({});
            }
        }
    });
}

小提琴

Answer 1

我認為formatter: "checkbox", formatoptions: { disabled: false }的用法存在誤解formatter: "checkbox", formatoptions: { disabled: false } 。 如果您以這種方式在網格的列中創建了非禁用復選框，那么用戶將只看到該復選框，可以單擊該復選框並更改其狀態。 另一方面，如果用戶更改復選框的狀態，則什么也不會發生 。 相反，復選框的初始狀態對應於網格的輸入數據，但是更改后的復選框使人幻想狀態已更改，但是不會自動進行任何操作。 即使您使用datatype: "local"也不會發生任何事情，甚至在單擊時也會更改本地數據。 如果確實需要基於更改復選框的狀態來保存更改，則必須實現其他代碼。 答案說明了可能的實現。 您可以在相應的演示中更改某些復選框的狀態，然后更改頁面並返回第一頁。 您將看到復選框的狀態與最新更改相對應。

現在讓我們嘗試在選擇網格的行上開始內聯編輯（開始editRow ）。 首先，內聯編輯使用​​unformatter從行（可編輯列）中獲取值，將舊值保存在內部savedRow參數中，然后在可編輯單元格內的舊內容上創建新的編輯控件 。 在使用formatter: "checkbox"標准禁用復選框的情況下，一切都相對容易formatter: "checkbox" 。 jqGrid只會在禁用復選框的位置上創建啟用的復選框。 用戶可以更改復選框的狀態或任何其他可編輯列的內容，並通過使用Enter鍵 保存更改。 之后，所選行將被保存，並且將無法再進行編輯。 您可以監視復選框的狀態還（按用途變化editoptions.dataEvents與"change"事件為例），並呼吁saveRow不斷變化的狀態。 重要的是，保存后該行不可編輯。 如果確實需要使該行保持可編輯狀態，則必須在成功保存該行后再次調用editRow 。 您可以在editRow的aftersavefunc回調內調用saveRow ，但是我建議您將editRow的調用包裝在setTimeout內，以確保先前保存的處理完成。 這就是我推薦您的方式。

另一方面，如果您嘗試將formatter: "checkbox" 啟用復選框formatter: "checkbox"與內聯編輯結合起來，那么處理將更加復雜。 重要的是， 在處理onclick和onchange事件處理程序之前，可以首先更改已啟用的復選框。 在不同的Web瀏覽器中，3個事件的順序（更改復選框的狀態， onclick處理和onchange處理）可以不同。 如果正在執行方法editRow則它使用checkbox-formatter的unformatter來獲取復選框的當前狀態。 根據狀態editRow的值，用另一個啟用的復選框將單元格的內容替換為另一內容。 可能是復選框的狀態已更改，但是editRow會將the changes state解釋the changes state類似於復選框the initial state 。 以同樣的方式可調用saveRow 后才 editRow 。 因此，您不能只在formatter: "checkbox", formatoptions: { disabled: false }程序的change處理程序內部使用saveRow formatter: "checkbox", formatoptions: { disabled: false } ，因為該行尚未處於編輯模式。

更新：相應的實現（在使用formatter: "checkbox", formatoptions: { disabled: false }情況下formatter: "checkbox", formatoptions: { disabled: false } ）可以如下：

editurl: "SomeUrl",
beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("tr.jqgrow>td"),
        p = $self.jqGrid("getGridParam"),
        savedRow = p.savedRow,
        cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null,
        cmName = cm != null && cm.editable ? cm.name : "Quantity",
        isChecked;
    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
    }
    if (cm != null && cm.name === "W3LabelSelected" && $(e.target).is(":checkbox")) {
        if (savedRow.length > 0) {
            // some row is editing now
            isChecked = $(e.target).is(":checked");
            if (savedRow[0].id === rowid) {
                $self.jqGrid("saveRow", rowid, {
                    extraparam: {
                        W3LabelSelected: isChecked ? "1" : "0", 
                    },
                    aftersavefunc: function (response) {
                        $self.jqGrid("editRow", rowid, {
                            keys: true,
                            focusField: cmName
                        });
                    }
                });
            }
        } else {
            $.ajax({
                type: "POST",
                url: "SomeUrl", // probably just p.editurl
                data: $self.jqGrid("getRowData", rowid)
            });
        }
    }
    if (rowid) {
        $self.jqGrid("editRow", rowid, {
            keys: true,
            focusField: cmName
        });
    }

    return true; // allow selection
}

參見jsfiddle演示http://jsfiddle.net/OlegKi/HJema/190/