我的折扣列有一个自动完成功能，其值来自另一个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"} ]
What I would like to do is
(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 <input> $(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 <= 9 ? "0"+day : day; var year = currentTime.getFullYear(); return year+"-"+month + "-"+day; } } }, {name: "VQ_PK", index: "o.VQ_PK", editable: false, jsonmap: "cell.17"}, {name: "pod_reftext", index: "o.pod_reftext", editable: false, jsonmap: "cell.18"}, {name: "VQ_VRef", index: "o.VQ_VRef", editable: false, jsonmap: "cell.19"}, {name: "POD_UOM", index: "o.POD_UOM", editable: false, jsonmap: "cell.20"}, {name: "POD_ItemType", index: "o.POD_ItemType", editable: false, jsonmap: "cell.21"}, {name: "POD_DateUpdated", index: "o.POD_DateUpdated", editable: false, jsonmap: "cell.22.date"}, {name: "POD_UpdatedSysUser", index: "o.POD_UpdatedSysUser", editable: false, jsonmap: "cell.23"}, {name: "I_FSC", index: "o.I_FSC", editable: false, jsonmap: "cell.24"}, {name: "PjD_NumID", index: "o.PjD_NumID", editable: false, jsonmap: "cell.25"}, {name: "POD_QueueSourceText", index: "o.POD_QueueSourceText", editable: false, jsonmap: "cell.26"}, {name: "RTP_PK_E", index: "o.RTP_PK_E", editable: false, jsonmap: "cell.27"} ], beforeSelectRow: function (rowid, e) { var $target = $(e.target), $td = $target.closest("td"), iCol = $.jgrid.getCellIndex($td[0]), colModel = $(this).jqGrid("getGridParam", "colModel"); if (iCol >= 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); });
您没有提供有效的演示，但希望我仍然正确理解您。
我认为，要改变不编辑列的值POD_UnitCost and POD_ExtCost 在该jQuery UI的价值选择在编辑自动完成控制 POD_VendorDiscount. 另外的价值可编辑栏 POD_OrderQty and POD_VendorListPrice 会期间使用的计算。来自 select 自动完成回调的当前代码
POD_UnitCost
POD_ExtCost
POD_VendorDiscount
POD_OrderQty
POD_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将让你的HTML片段从细胞代替value的相应<input>元素。第二个错误：您只设置POD_ExtCost了rowData对象而没有任何其他操作。它不会更改POD_ExtCost列中的值。相反，您应该做的是：可以使用getRowData和setRowData获取/设置未编辑列的值，并且必须获取<input>edit元素的元素并获取其value值才能获取当前的编辑值。
getRowData
value
<input>
rowData
setRowData
<input>edit
我无法测试以下代码，但是正确的方法可能是例如 以下示例
dataInit: function(elem) { var $self = $(this), // save the reference to the grid $elem = $(elem); // save the reference to <input> $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", ""); }); }
我应该指出，以上代码仅适用于内联编辑。
