jquery - jqgrid でインライン編集を実装する方法

Question

jqgridでインライン編集を実装したい。私は下の写真のようなフォームを持っています

ユーザーがAmount textBoxに数字だけを入力してCurrencyUnitを選択した後、行2に移動してAmountなどを入力しますが、行2のデータ行1を選択するとリセットさ れます
この写真の下の図のように、Amountを入力してCurrencyUnitを選択し、i行 2 を選択するときに行 2 を選択する

私はこのコードを書きます

 jQuery(document).ready(function () {
            var localstr = "0:Select Ones;";
            localstr = "1:Rial";
            localstr += ";2:Dollar";
            localstr += ";3:Youro";
            localstr += ";4:Derham";
            localstr += ";6:Pond";

            var lastSel;
            var grid = jQuery("#list");
            grid.jqGrid({
                url: 'jQGridHandler.ashx',

                postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
                ajaxGridOptions: { cache: false },
                loadonce: true,
                direction: "rtl",

                datatype: 'json',
                height: 'auto',
                colNames: ['RequestID', 'WayBillNo', 'CostId', 'CostName', 'Amount', 'CurrencyUnit '],
                colModel: [
                    { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
                        { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
                        { name: 'COST_ID', index: 'COST_ID', width: 200, sortable: true, hidden: true },
                        { name: 'COST_NAME', width: 200, sortable: true },
                        { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
                      { name: 'Subcategory', index: 'Subcategory', width: 200, formatter: 'select', editable: true, edittype: 'select', editoptions: { value: localstr} }
                ],
                sortname: 'Name',
                viewrecords: true,
                rownumbers: true,
                sortorder: "desc",
                editurl: 'jQGridHandler.ashx?ActionPage=ClearanceCost&Action=Insert',
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        grid.jqGrid('restoreRow', lastSel);
                        var cm = grid.jqGrid('getColProp', 'CURRENCY_ID');
                        cm.editable = false;
                        grid.jqGrid('editRow', id, true, null, null, 'jQGridHandler.ashx?ActionPage=ClearanceCost&Action=Insert');
                        cm.editable = true;
                        lastSel = id;
                    }
                },
                pager: '#pager',
                caption: ""
            }).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: false });

            $("#btnsave").click(function () {
                var totalAmount = 0, totalTax = 0, i = getColumnIndexByName(grid, 'CURRENCY_ID');

                $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function () {
                    alert(getTextFromCell(this));

                });
                //                i = getColumnIndexByName(grid, 'tax');
                //                $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function () {
                //                    totalTax += Number(getTextFromCell(this));
                //                });
            });

            function getColumnIndexByName(grid1, columnName) {
                var cm = grid1.jqGrid('getGridParam', 'colModel');
                for (var i = 0, l = cm.length; i < l; i++) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            }

            function getTextFromCell(cellNode) {
                return cellNode.childNodes[0].nodeName == "INPUT" ? cellNode.childNodes[0].value : cellNode.textContent || cellNode.innerText;
            }

        });

私はユーザーに全金額項目を入力してもらいたいのですが、その後、全金額を入力して ClickMe ボタンをクリックし、データをサーバーに送信しますが、これを実装する方法がわかりません。皆さんありがとう

Answer 1

コードをこれに変更します

onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        grid.jqGrid('restoreRow', lastSel);
                        grid.saveRow(lastSel,true,'clientArray');
                        grid.jqGrid('restoreRow',lastSel);

                        grid.jqGrid('editRow', id, true, null, null, 'clientArray');

                    }
                },