jqgrid在更改另一个单元格时更改可编辑单元格的值(从属列)

这是网格。 格

我的折扣列有一个自动完成,其值来自另一个json变量。

这是我的json数组,其中折扣数据来自。

[ {"id":0.56,"label":"Adams Rite Less 50\/12","value":"Adams Rite Less 50\/12"}, {"id":0.44,"label":"ASSA Less 44","value":"ASSA Less 44"}, {"id":0.603,"label":"BARON ACCESSORIES AND STICKS Less 60.3","value":"BARON ACCESSORIES AND STICKS Less 60.3"}, {"id":0.704,"label":"BARON STD AND CUSTOM DOORS Less 70.4","value":"BARON STD AND CUSTOM DOORS Less 70.4"}, {"id":0.617,"label":"BARON STD AND CUSTOM FRAMES Less 61.7","value":"BARON STD AND CUSTOM FRAMES Less 61.7"}, {"id":0.704,"label":"BARON STD PALLET DOORS Less 70.4","value":"BARON STD PALLET DOORS Less 70.4"}, {"id":0.145,"label":"Bobrick 10\/5","value":"Bobrick 10\/5"}, {"id":0.6175,"label":"BREMNER HMD","value":"BREMNER HMD"}, {"id":0.6073,"label":"BREMNER HMF","value":"BREMNER HMF"}, {"id":0.44,"label":"Eff Eff Less 44","value":"Eff Eff Less 44"} ] 

我想做的是

(1)在更改折扣价值时, 成本列应根据此公式更改

 new Cost = (1-0.145)*List Price Cell's value (in this case 999) 

值0.145来自json的id列。

(2)更改折扣值后, ExtCost列应根据此更改。

 New Ext Cost = Quantity * new Cost 

数量是最左边的单元格。

这是我的网格相关代码。

  var lastsel2; jQuery(document).ready(function(){ var autocompleteSource; $.getJSON("{{ asset('app_dev.php/GetDiscount') }}", function(json){ autocompleteSource = json; }); var cont; jQuery("#list").jqGrid({ url: "{{ asset('/app_dev.php/_thrace-datagrid/data/view_PO_details') }}", postData: { masterGridRowId: {{ editid }} }, datatype: "json", mtype: 'POST', colNames: ['', 'Released', 'Attachments', 'Quantity', 'Received', 'Item #', 'Vendor Item #', 'List Price', 'Discount', 'Cost', 'ExtCost', 'Lead Time', 'System Key', 'PO Item Note', 'PO Required Date', 'Confirm #','Confirm Date', 'VQ #', 'Reference', 'VQ Ref', 'UOM', 'Type', 'Last Update', 'Updated By', 'FSC', 'Door #', 'Queue', 'RTE#'], colModel: [ { name: "POD_UISelected", index: "o.POD_UISelected", editable: true, edittype: 'checkbox', editoptions: {value: "True:False"}, formatter: "checkbox", formatoptions: {disabled: false}, align: 'center', jsonmap: "cell.0", width: '70' }, { name: "POD_Released", index: "o.POD_Released", editable: true, edittype: 'checkbox', editoptions: {value: "Yes:No"}, formatter: "checkbox", formatoptions: {disabled: false}, align: 'center', jsonmap: "cell.1", width: '70' }, { name: "I_LinkHasFiles", index: "o.I_LinkHasFiles", editable: false, edittype: 'checkbox', editoptions: {value: "True:False"}, formatter: "checkbox", formatoptions: {disabled: true}, align: 'center', jsonmap: "cell.2", width: '70' }, { name: "POD_OrderQty", index: "o.POD_OrderQty", editable: true, align: 'center', jsonmap: "cell.3", width: '100' }, { name: "POD_QtyReceived", index: "o.POD_QtyReceived", editable: true, align: 'center', jsonmap: "cell.4", width: '100' }, {name: "POD_ItemNumID #", index: "o.POD_ItemNumID", editable: false, align: 'center', jsonmap: "cell.5"}, { name: "POD_VendorItemNum", index: "o.POD_VendorItemNum", editable: false, align: 'center', jsonmap: "cell.6" }, { name: "POD_VendorListPrice", index: "o.POD_VendorListPrice", editable: true, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, jsonmap: "cell.7" }, { name: "POD_VendorDiscount", index: "o.POD_VendorDiscount", editable: true, jsonmap: "cell.8", editoptions: { dataInit: function(elem) { var $self = $(this), // save the reference to the grid $elem = $(elem); // save the reference to  $(elem).autocomplete({ source: autocompleteSource, select: function (event, ui) { var $tr = $elem.closest("tr.jqgrow"), newCost, rowid = $tr.attr("id"), orderQty = parseFloat($tr.find("input[name=POD_OrderQty]").val()), listPrice = parseFloat($tr.find("input[name=POD_VendorListPrice]").val()); if (ui.item) { console.log(orderQty); console.log(listPrice); newCost = (1 - parseFloat(ui.item.id)) * listPrice; $self.jqGrid("setRowData", rowid, { POD_UnitCost: newCost, POD_ExtCost: orderQty * newCost }); } }, minLength: 0, minChars: 0, autoFill: true, mustMatch: true, matchContains: false, scrollHeight: 220 }).on('focus', function(event) { var self = this; $(self).autocomplete( "search", ""); }); } } }, { name: "POD_UnitCost", index: "o.POD_UnitCost", editable: false, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, jsonmap: "cell.9" }, { name: "POD_ExtCost", index: "o.POD_ExtCost", editable: false, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, jsonmap: "cell.10" }, {name: "POD_Leadtime", index: "o.POD_Leadtime", editable: false, jsonmap: "cell.11"}, { name: "POD_Stocked", index: "o.POD_Stocked", editable: false, edittype: 'checkbox', editoptions: {value: "True:False"}, formatter: "checkbox", formatoptions: {disabled: true}, align: 'center', jsonmap: "cell.12" }, {name: "POD_Note", index: "o.POD_Note", editable: true, jsonmap: "cell.13"}, { name: "POD_ReqDate", index: "o.POD_ReqDate", editable: true, jsonmap: "cell.14.date", editoptions:{size:20, dataInit:function(el){ $(el).datepicker({dateFormat:'yy-mm-dd'}); }, defaultValue: function(){ var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day <= 9 ? "0"+day : day; var year = currentTime.getFullYear(); return year+"-"+month + "-"+day; } } }, {name: "POD_ConfrmNum", index: "o.POD_ConfrmNum", editable: true, jsonmap: "cell.15"}, { name: "POD_PromDate", index: "o.POD_PromDate", editable: true, jsonmap: "cell.16.date", editoptions:{size:20, dataInit:function(el){ $(el).datepicker({dateFormat:'yy-mm-dd'}); }, defaultValue: function(){ var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day = 0 && $target.is(":checkbox")) { if(colModel[iCol].name == "POD_UISelected") { $('#list').setSelection(rowid, true); $("#list").jqGrid('saveRow', rowid, { //same rowid value used in 'addRowData' method above succesfunc: function (response) { $('#list').trigger( 'reloadGrid' ); return true; } }) } } return true; }, onSelectRow: function(id){ if(id && id!==lastsel2){ jQuery('#list').jqGrid('restoreRow',lastsel2); jQuery('#list').jqGrid('editRow',id,true); lastsel2=id; } }, jsonReader: {repeatitems: false}, height: 400, rowNum: 50, rowTotal: 1000000, autowidth: true, gridview: true, autoencode: false, pager: '#pager', shrinkToFit: true, sortable: true, sortname:"o.POD_ReqDate", sortorder: "desc", viewrecords: true, //multiselect: true, loadonce:false, rowList: [50, 100, 500, 1000], editurl: "{{ asset('/app_dev.php/_thrace-datagrid/row-action/view_PO_details') }}" }); jQuery("#list").jqGrid('navGrid',"#pager",{ del:false, add:false, edit:false}, {editData: {PO_PK: {{ editid }}}}, {editData: {PO_PK: {{ editid }}}}, {editData: {PO_PK: {{ editid }}}}, {multipleSearch:true} ); jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true}); jQuery('#list').jqGrid('gridResize'); $("#productEdit_V_PK").prop("disabled", true); }); 

到目前为止,我已经尝试了 这个和这个 jqGrid版本4.8.2

你没有提供工作演示,但我希望我仍然能正确理解你。

我认为您想要在可编辑POD_VendorDiscount中的jQuery UI自动完成控件中选择值时更改不可编辑列POD_UnitCostPOD_ExtCost的值。 在计算期间将使用另一个可编辑列POD_OrderQtyPOD_VendorListPrice值。 来自自动完成的select回调的当前代码

 var rowData = $('#list').jqGrid('getRowData', rowid); cont = rowData.POD_VendorListPrice; console.log(cont); rowData.POD_ExtCost = (1-ui.item.id)*cont; 

是不正确的。 第一个问题是使用getRowData来访问getRowData 联编辑模式下的列。 这是不对的。 getRowData将从单元格中获取HTML片段,而不是相应的元素的值。 第二个错误:您只需设置rowData对象的POD_ExtCost而无需任何其他操作。 它不会更改POD_ExtCost列中的值。 您应该做什么:您可以使用getRowDatasetRowData来获取/设置不编辑列的值,您必须获取编辑元素的元素并获取其value以获取当前编辑值。

我无法测试下面的代码,但正确的方法可能是以下代码

 dataInit: function(elem) { var $self = $(this), // save the reference to the grid $elem = $(elem); // save the reference to  $elem.autocomplete({ source: autocompleteSource, select: function (event, ui) { var $tr = $elem.closest("tr.jqgrow"), newCost, rowid = $tr.attr("id"), orderQty = parseFloat($tr.find("input[name=POD_OrderQty]").val()), listPrice = parseFloat($tr.find("input[name=POD_VendorListPrice]").val()); if (ui.item) { console.log(orderQty); console.log(listPrice); newCost = (1 - parseFloat(ui.item.id)) * listPrice; $self.jqGrid("setRowData", rowid, { POD_UnitCost: newCost, POD_ExtCost: orderQty * newCost }); } }, minLength: 0, minChars: 0, autoFill: true, mustMatch: true, matchContains: false, scrollHeight: 220 }).on("focus", function(event) { $(this).autocomplete("search", ""); }); } 

我应该注意上面的代码只适用于内联编辑。