在Jqgrid中保存多行时格式化选择框 [英] Formatting Select boxes while doing a Multiple row saving in Jqgrid
问题描述
我正在解决此处
我能够以这种方式对网格元素进行自定义格式，使得每行中的几列都可编辑，我将显示值设为1，然后使用formatOptions将新更改的值保存在隐藏字段中.但是，当涉及到选择框字段时，我读到editoptions是要比formatoptions选择的一个.所以目前我的selecbox如下
I was able to do custom format of the grid elements in such a way that few columns with are editable in each row, I make display value one and save the newly changed value in a hidden field using formatOptions. However when it comes to selectbox fields, I read that editoptions is the one to be chosen over formatoptions. So currently my selecbox is as follows
editoptions: {
dataUrl: '/lists/products',
buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}
}
现在，我需要将选定的值存储在这种<input type="hidden", name="items[item_id]" value="newly selected value">类型的隐藏字段中.但是有些我无法通过editoptions获得.我尝试过的代码在这里.
Now I need to store the selected value into a hidden field something of this sort <input type="hidden", name="items[item_id]" value="newly selected value">. But some how I'm unable to get this through editoptions. The code that I tried is here.
editable:true,
edittype:"select",
editoptions: {
dataUrl: '/lists/products',
buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
},
dataEvents: [
{
type: 'change',
fn: function(e) {
console.log(e);
html = '<input type=text name=product_codes[' + rowObject.item_id +
'] value="' + e.currentTarget.options.value + '" />';
return html;
}}
]
}
这不起作用.任何建议都欢迎.
This does not work. Any suggestion are welcome.
下面是整个jqgrid
The whole jqgrid under which this comes is follows
showGrid: function(data){
var request_data = data[0] ? data[0] :[];
var data = data[1] ? data[1] :[];
var items = data.invoice_items;
var lastsel2;
var $product_values = {};
if(data[0].type_code !='xyz'){
var $this = this;
$("#grid").GridUnload();
$("#grid").jqGrid({
datatype: 'local',
colNames:['Item#','Product Group ID', 'Product Group','Product','Origin','Destination','Apps','Mobile','Carrier','Vessels',''],
colModel :[
{name:'item_identifier', index:'item_identifier', width:60},
{name:'product_group_id', index:'product_group_id', width:60,hidden:true},
{name:'product_group_code', index:'product_group_code', width:60},
{name:'product_code', index:'product_code', width:150, editable:true, edittype:"select", editoptions: { dataUrl: '/lists/products', $.extend({
custom_element: function (value, editOptions) {
var el = $('<input type="hidden" />');
el.attr('name', product_codes['+rowObject.invoice_item_id+']);
el.attr('value', cellvalue);
return el[0];
}}), buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}}, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=product_codes['+rowObject.invoice_item_id+'] value="'+cellValue+'" />';
return html;
}},
{name:'origin_branch_code' ,index:'origin_branch_code', width:110},
{name:'destination_branch_code', index:'destination_branch_code', width:100},
{name:'term_code', index:'term_code', width:150, editable:true, edittype:"custom", editoptions: { dataUrl: '/lists/incoterms', buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}}, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=inco_term_code['+rowObject.invoice_item_id+'] value="'+cellValue+'" />';
return html;
}},
{name:'mobile', index:'mobile', width:90, editable:true},
{name:'carrier', index:'carrier', width:140, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=carrier_code['+rowObject.invoice_item_id+'] value="'+cellValue+'" /> <button class="carrier"> ...</button>';
return html;
}},
{name:'vessel', index:'vessel', width:90, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=vessel['+options.rowId+'] value="'+cellValue+'"/> <input type=hidden name=item_id['+options.rowId+'] value="'+rowObject.invoice_item_id+'" />';
return html;
}},
{name:'invoice_item_id', index:'invoice_item_id', hidden:true}
],
loadComplete: function(rowid, status){
$("#grid > tbody > tr").each(function (rowid){
$("#grid").editRow(rowid,true);
});
alert("load Complete")
},
onSelectRow: function(rowid, status){
// This action appends some more grids and sub forms
},
}
else{
$("#grid").jqGrid({
datatype: 'local',
colNames:['Item#','Product Group ID', 'Product Group','Product','Origin','Destination',' Terms','Mobile#','Carrier','Vessel', 'Cancel Item'],
colModel :[
{name:'invoice_item_identifier', index:'invoice_item_identifier', width:60,editable:false},
{name:'product_group_id', index:'product_group_id', width:60,editable:false, hidden:true},
{name:'product_group_code', index:'product_group_code', width:60,editable:false},
{name:'product_code', index:'product_code', width:150,editable:true,edittype:"select",editoptions:{value: this.callback('getProducts')}},
{name:'origin_branch_code' ,index:'origin_branch_code', width:110,editable:false},
{name:'destination_branch_code' ,index:'destination_branch_code', width:100,editable:false},
{name:'term_code' ,index:'term_code', width:150,editable:true,edittype:"select",editoptions:{value: this.callback('getIncoterms')}},
{name:'mbl', index:'mbl', width:90,editable:true,edittype:"text"},
{name:'carrier_code', index:'carrier_code', width:90,editable:true,edittype: 'text'},
{name:'vessel', index:'vessel', width:90,editable:true},
{
name:'invoice_item_id',
index:'invoice_item_id',
width:90,
formatter: function (cellvalue, options, rowObject){
var html_input = "<a href='#invoice_item'>Cancel</a>" ;
return html_input;
}
}
]
});
}
if(data){
/*data gets processed here and mydata array is pushed to grid*/
mydata.push({
rowId: x,
invoiceItem: x,
item_identifier: d.transaction_type_business_number || 'N/A',
product_group_id: d.product_group_code.group_id,
product_group_code: d.product_group_code.product_group.product_group_code || "N/A",
product_code: d.product_code,
origin_branch_code: origin_branch_code,
destination_branch_code: destination_branch_code,
term_code: inco_term_code,
Monbile: consolidation_number,
carrier_code: carrier_code,
vessel: d.comments,
invoice_item_id: d.invoice_item_id
});
$("#grid").addRowData(d.id, mydata);
}
}
$("#grid").trigger("reloadGrid"); //added for selection of rowids
}
});
谢谢 西克里希纳
推荐答案
您没有发布用于填充网格(mydata)的任何测试数据.在我看来，列invoice_item_id中的值可以很好地用作rowid.为了简化代码以获得代表发票项目的唯一ID，我将假定值d.id与d.invoice_item_id相同.如果您使用其他值，则可以更改以下代码，包括getCell方法的附加调用.
You don't posted any test data which you use to fill the grid (mydata). It seems to me that the value from the column invoice_item_id can be good used as the rowid. To simplify the code to get unique id which represent the item of the invoice I will suppose that the value d.id is the same as d.invoice_item_id. If you use another value you can change the code below including additional call of getCell method.
在自定义格式程序或自定义编辑(custom_element)中，我看不到需要使用任何其他隐藏的输入字段.取而代之的是，我建议做以下简单的构造.
I don't see needs to use any additional hidden input fields either in the custom formatter or in the custom editing (custom_element). Instead of that I suggest do the following simple construction.
您定义了一个变量(一个对象)，该变量将表示用户在发票中所做的字段中的更改.您只需定义一个变量即可.
You defines a variable (an object) which will represent the changes in the fields which the user do in the invoice. You can just define a variable like.
var invoiceCorrections = {};
，并在每次清除网格时将其重置为空对象{}(关于代码$("#grid").GridUnload();).
and reset it to the empty object {} every time when you clear the grid (about the code $("#grid").GridUnload();).
您可以按以下格式将发票更改保存在invoiceCorrections对象中:invoiceCorrections可以具有值invoice_item_id作为发票更改项的属性.如果某些可编辑列(例如'product_code'，'mbl'(???'mbl'或'mobile'???两者都使用)，'term_code'，'carrier'或'vessel'的值已更改，则可以保存在invoiceCorrections中输入新的修改值.例如，
You can save the changes of invoices in invoiceCorrections object in the following form: The invoiceCorrections can has the values of invoice_item_id as the properties of the changed items of the invoice. If the value of some editable column like 'product_code', 'mbl' (??? 'mbl' or 'mobile' ??? you use both), 'term_code', 'carrier' or 'vessel' are changed you can save in invoiceCorrections the new modified values. For example,
{
'invoice_item_id123': { // - invoice_item_id123 it's the id of one item
product_code: 'new product id 1', // 'product_code' was changed
carrier: 'new carrier 1' // 'carrier' was also changed
},
'invoice_item_id456': { // - invoice_item_id456it's the id of another item
product_code: 'new product id 2',
term_code: 'term code 2'
},
}
要填写上述表格中的invoiceCorrections，您可以使用dataEvents:
To fill the invoiceCorrections in the described above form you can use dataEvents:
dataEvents: [
{
type: 'change',
fn: function(e) {
var $input = $(e.target), $tr = $input.closest('tr.jqgrow'),
rowid, changedItem, inputColumnName = 'product_code';
if ($tr.length > 0) {
rowid = $tr[0].id; // if can be invoice_item_id
// if you use other rowid you can get the value of any non-editable
// with respect of `getCell`:
// var invoice_item_id = $("#grid").jqGrid('getCell',
// rowid, 'invoice_item_id');
if (rowid in invoiceCorrections) { // the same as
// typeof(invoiceCorrections[rowid]) !== "undefined"
changedItem = invoiceCorrections[rowid];
} else {
changedItem = {};
invoiceCorrections[rowid] = changedItem;
}
changedItem = invoiceCorrections[inputColumnName];
changedItem[inputColumnName] = $input.val();
}
}}
]
我在上面的代码中使用了inputColumnName = 'product_code'，使您可以轻松地将代码移至可以在网格的不同列的dataEvents代码中共享的功能.如果使用select元素，则可以将$input.val()替换为$input.find('option:selected').val()或$input.find('option:selected').text().
I used inputColumnName = 'product_code' in the above code to make you easier to move the code to the function which you can share in the code of dataEvents for different columns of grid. In case of the usage select elements you can replace $input.val() to $input.find('option:selected').val() or $input.find('option:selected').text().
以上述方式，您将在invoiceCorrections对象中收集需要发布到服务器的完整信息.因此，您可以仅按$.ajax或$.post将invoiceCorrections发送到服务器.您应该根据服务器部分的实现来填充$.ajax的data参数.可以是data: invoiceCorrections或data: JSON.stringify(invoiceCorrections)或data: {invoiceChanged: JSON.stringify(invoiceCorrections)}.
In the way described above you will collect the full information which you need to post to the server in the invoiceCorrections object. So you can send invoiceCorrections to the server just per $.ajax or $.post. You should fill the data parameter of $.ajax depend on the implementation of your server part. It can be just data: invoiceCorrections or data: JSON.stringify(invoiceCorrections) or data: {invoiceChanged: JSON.stringify(invoiceCorrections)}.
这篇关于在Jqgrid中保存多行时格式化选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
