关于jquery:如何在jqgrid中实现内联编辑

How to implement inline Editining in jqgrid

我想在jqgrid中实现内联编辑。我有如下图所示的形式enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 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按钮,然后将数据发送到服务器,但是我不知道该如何实现。谢谢大家


您将代码更改为此

1
2
3
4
5
6
7
8
9
10
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');

                    }
                },