如何在jqgrid中实现内联编辑

Question

我希望在jqgrid中实现内联编辑。我有表格如下图

我希望用户可以在Amount textBox中输入正好的数字，并选择CurrencyUnit之后转到第2行并输入Amount等等但是当选择第2行数据第1行重置时如下图所示
在本图中我输入Amount并选择CurrencyUnit和i Wana在选择第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');

                    }
                },