How to implement inline Editining in jqgrid
我想在jqgrid中实现内联编辑。我有如下图所示的形式
我想用户可以在金额文本框中输入只是数量和这去后选择CurrencyUnit行到第2,输入金额等。但是,当选择行2数据行1复位像下面的图片
在此图示中,我输入Amount并选择CurrencyUnit,然后在选择第2行时选择Wana选择第2行
我写这段代码
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'); } }, |