如何在jqgrid中实现内联Editining [英] How to implement inline Editining in jqgrid

问题描述

我想在jqgrid中实现内联编辑.我的表格如下图所示:

i want implement inline editing in jqgrid. i have form Like the picture below

我想用户可以在金额文本框中输入只是数量和这去后选择CurrencyUnit行到第2，输入金额等.但是，当选择行2数据行1复位像下面的图片
在此图形中，我输入Amount并选择CurrencyUnit，然后在选择第2行时选择Wana选择第2行

i want user can enter just number in Amount textBox and And select CurrencyUnit after that go to row 2 and enter Amount and etc. but when select row 2 data row 1 reset Like the picture below
in this pictute i enter Amount and select CurrencyUnit and i Wana select Row 2 when select row 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按钮，然后将数据发送到服务器，但是我不知道该如何实现.谢谢大家

i want user Enter all amount item and after that when enter all amount click in ClickMe button and data send to server , but i don't know how to implement this. thanks all

推荐答案

您将代码更改为此

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');

                    }
                },

这篇关于如何在jqgrid中实现内联Editining的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！