我如何为jqGird中的列赋值？

我正在使用jqGrid与CodeIgniter 2.1.0。 让我受到骚扰的是如何为特定事件的特定列赋值

假设我正在输入数量并在列值中进行评分…..当我从“费率”字段中丢失焦点时……应计算净额并在金额字段中显示…

我需要做的是将计算值分配给金额字段……但我不知道我该怎么办？

我所做的工作如下：

var selIRow = 1; var rowid=''; var iCol=''; $("#purchasedetailsgrid").jqGrid({ url: sitepath + 'purchase/purchase_grid', datatype: 'json', mtype: 'POST', height:220, width:500, colNames:["","","Store Name","Item Name","Inner Pkg.","Outer Pkg.","Qty","Rate","Amount"], colModel:[ {name: 'storeID_hidden_field', index:'storeID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}}, {name: 'itemID_hidden_field', index:'itemID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}}, {name:'store_id', index:'store_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}}, {name:'item_id', index:'item_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}}, {name:'inner_pkg', index:'inner_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}}, {name:'outer_pkg', index:'outer_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}}, {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}}, {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, editoptions: { dataInit: function (elem) { $(elem).focus(function () { this.select(); }) }, dataEvents: [ { type: 'keydown', fn: function (e) { var key = e.charCode || e.keyCode; if (key == 9)//tab { $('#amount').val();//here in val() i need to write the value of qty and rate field } } } ] } }, {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, editoptions: { dataInit: function (elem) { $(elem).focus(function () { this.select(); }) }, dataEvents: [ { type: 'keydown', fn: function (e) { var key = e.charCode || e.keyCode; if (key == 13)//enter { var grid = $('#purchasedetailsgrid'); //Save editing for current row grid.jqGrid('saveRow', selIRow, false, sitepath + 'purchase/purchase_grid'); selIRow++; //If at bottom of grid, create new row //if (selIRow++ == grid.getDataIDs().length) { grid.addRowData(selIRow, {}); //} //Enter edit row for next row in grid grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid'); } } } ] } } ], pager: '#purchasedetailstoolbar', rowNum:10, rowList:[10,20,30], sortname: 'inventory_id', sortorder: 'desc', viewrecords: true, rownumbers: true, gridview: true, multiselect: false, autoresize:true, autowidth: true, editurl: sitepath + 'purchase/purchase_grid', toolbar: [true,"top"], gridComplete: function () { var grid = jQuery("#purchasedetailsgrid"); var ids = grid.jqGrid('getDataIDs'); if(ids == '') { grid.addRowData(selIRow, {}); grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid'); } for (var i = 0; i < ids.length; i++) { } }, caption: 'Purchase List', }); jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',{view:false,edit:false,add:false,del:false,search: false}); jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar'); jQuery("#purchasedetailsgrid").jqGrid('filterToolbar',{stringResult:false,searchOnEnter : false},{autosearch: true}); var temp_purchase = $("#purchasedetailsgrid_header").html(); $("#t_purchasedetailsgrid").html(temp_purchase); $("#refresh_purchasedetailsgrid").attr('title',"Reload Grid"); 

现在任何人都可以建议我如何从一个专栏获得价值并将其分配给另一个专栏？

任何建议将不胜感激。

Thnx提前

Answer 1

您当前的代码有很多问题。 例如，您写道您需要根据数量和费率计算金额，但您在“费率”和“金额”列中定义了一些数据事件，而不是“数量”和“费率”列。 您在editRow直接使用editRow方法的下一个问题。 因此， inlineNav工具栏中的按钮将保持错误状态。 还有一个问题是你需要根据’qty’和’rate’重新计算’amount’，不仅要考虑’qty’和’rate’失去焦点，还需要在Enter上保存值。

为了更容易解决上述问题，我编写了可以修改的演示 ，符合您的确切要求。 您可以在下面找到演示中最重要的部分：

 var editingRowId = undefined, recomputeAmount = function () { var rate = $("#" + editingRowId + "_rate").val(), qty = $("#" + editingRowId + "_qty").val(), newAmount = parseFloat(rate) * parseFloat(qty); $("#" + editingRowId + "_amount").val(isFinite(newAmount) ? newAmount : 0); }, myEditParam = { keys: true, oneditfunc: function (id) { editingRowId = id; }, afterrestorefunc: function (id) { editingRowId = undefined; }, aftersavefunc: function (id) { var $this = $(this), rate = $this.jqGrid("getCell", id, "rate"), qty = $this.jqGrid("getCell", id, "qty"), newAmount = parseFloat(rate) * parseFloat(qty); $this.jqGrid("setCell", id, "amount", newAmount); editingRowId = undefined; } }, numInput = { type: 'keydown', fn: function (e) { var key = e.which; // allow only '0' <= key <= '9' or key = '.', Enter, Tab, Esc if ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD && key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) { return false; } } }, recompute = { type: 'focusout', fn: function (e) { recomputeAmount(); } }; $("#purchasedetailsgrid").jqGrid({ colModel: [ ... {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}, editoptions: { dataInit: function (elem) { $(elem).focus(function () { this.select(); }) }, dataEvents: [ numInput, recompute ] } }, {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, editoptions: { dataInit: function (elem) { $(elem).focus(function () { this.select(); }) }, dataEvents: [ numInput, recompute ] } }, {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}} ], loadComplete: function () { var gridIdSelector = '#' + $.jgrid.jqID(this.id); if (this.rows.length > 1) { //$(this).jqGrid('editRow', this.rows[1].id, myEditParam); $(this).jqGrid('setSelection', this.rows[1].id, true); setTimeout(function() { // we should simulate click of the button not after the grid is loaded, but // after the toolbar with the cliked button will be created by inlineNav $(gridIdSelector + "_iledit").click(); }, 100); } else { setTimeout(function() { // we should simulate click of the button not after the grid is loaded, but // after the toolbar with the cliked button will be created by inlineNav $(gridIdSelector + "_iladd").click(); }, 100); } } }); jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar', {view:false,edit:false,add:false,del:false,search: false, refreshtitle: "Reload Grid"}); jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar', {edit: true, add: true, editParams: myEditParam, addParams: {addRowParams: myEditParam}}); 

如果需要，我可以评论代码中不清楚的部分。