我真的以为我掌握了jqGrid,因为我在整个应用程序中都有大量的内联编辑网格。但是,我似乎并不熟悉使用jqGrid表单而不是内联来启用和编辑。如果有人能在我的jqGrid配置中发现一个明显的错误,请告诉我。代码如下: 的 JS
$(function() {
var lastDate,
issueOpts = {1:'Incorrect Material Shipped', 2:'Incorrect Material Ordered', 3:'Defective Material', 4:'Incorrect Quantity', 5:'Incorrect Pricing', 6:'Incorrect Ship To'},
dtcOpts = ['0', '15', '30', '60', '90', '120'],
ownerOpts = {15619:'Candi Allen', 101102:'Carla King', 100476:'Victoria Townsend', 101101:'Tanya Watson'},
$vmiGrid = $('#vmiGrid'),
$vmiFoot = $('#vmiFoot'),
vmiEditParam = {
keys:true,
},
formProps = {
topinfo:'Vendor Management Editor',
closeAfterEdit: true,
closeOnEscape: true,
modal: true,
navkeys: true,
width: 450
},
vmiAddParam = {
rowID:'new',
position:'last',
addRowParams: vmiEditParam
},
navParms = {
add:false,
edit:true,
del:false
};
function calcVMIForm() {
var creditMaterials, creditRestock, creditFreight, creditInstall, creditOther, creditTotal;
creditMaterials = parseFloat( $('#rma_material_cost').val(), 10 );
creditRestock = parseFloat( $('#rma_restock').val(), 10 );
creditFreight = parseFloat( $('#rma_freight').val(), 10 );
creditInstall = parseFloat( $('#rma_install_credit').val(), 10 );
creditOther = parseFloat( $('#rma_other_credit').val(), 10 );
creditTotal = creditMaterials - creditRestock + creditFreight + creditInstall + creditOther;
$('#rma_expected_credit').val(creditTotal);
}
function changeRMADue() {
var cb_date = new Date();
var requested_date = $('#rma_requested').datepicker('getDate');
var days_to_clear = $('option:selected', this).text();
var d = requested_date.getDate();
var m = requested_date.getMonth();
var y = requested_date.getFullYear();
cb_date = new Date(y, m, d + parseInt(days_to_clear, 10));
$('#rma_clear').datepicker('setDate', cb_date);
}
$('#special_dialog').dialog({
width:'auto',
height:'auto',
resizable:true
});
$.extend($.jgrid.defaults,{
gridview:true,
loadui:'block',
rowNum:500,
rowList:[20,50,100,500],
viewrecords:true,
sortorder:'asc',
height:500,
autowidth:true,
deepempty:true,
altRows: true,
grouping: true,
groupingView: {
groupField: ["vendor"],
groupColumnShow: [true],
groupText: ["<b>VENDOR: {0}</b>"],
groupDataSorted: true,
groupSummary: [false]
}
});
//////////////////////////////
// setup VMIs grid
//////////////////////////////
$vmiGrid.jqGrid({
url: '/json/json.getVMIsGrid.php',
datatype:'json',
emptyrecords: 'No Open VMIs',
colNames: [
'',
'VID',
'Vendor',
'Job Number',
'VMI Number',
'Owner',
'Requested',
'Due',
'DTC',
'PO Number',
'Materials',
'Re-Stock Fee',
'Freight Cost',
'Install Hours',
'Issue',
'Install Credit',
'Other Credit',
'Expected Credit',
'Credit Number',
'Credit Received',
'Notes'
],
colModel: [
{ name:'id',
index:'r.id',
hidden:true,
key:false,
search:false,
viewable:false
},
{ name:'vendor_id',
index:'r.rma_vendor',
width:0,
hidden:true,
search:false,
align:'center',
viewable:true,
editable:true,
edittype:'text',
editoptions:{size:8,readonly:true}
},
{ name:'vendor',
index:'vendor',
width:100,
sortable:true,
sorttype:'text',
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:50,readonly:true},
editrules:{required:true}
},
{ name:'order_number',
index:'j.order_number',
width:100,
sortable:true,
editable:false,
classes:'ui-ellipsis',
align:'center'
},
{ name:'vmi_number',
index:'r.vmi_number',
width:90,
sortable:false,
editable:false,
align:'center'
},
{ name:'rma_owner',
index:'r.rma_owner',
width:100,
sortable:false,
editable:true,
edittype:'select',
align:'right',
editoptions:{value:ownerOpts,readonly:true}
},
{ name:'rma_requested',
index:'r.rma_requested',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
edittype:'text',
editoptions:{ size:15,
dataInit: function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
},
editrules:{required:true}
},
{ name:'rma_clear',
index:'r.rma_clear',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editrules:{required:true},
editoptions:{ size:15,
dataInit: function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'rma_dtc',
index:'r.rma_dtc',
width:55,
sortable:false,
editable:true,
align:'center',
classes:'dtc',
edittype:'select',
editrules:{required:true},
editoptions:{
value:dtcOpts,
dataEvents: [
{
type:'change',
fn: changeRMADue
}
]
}
},
{ name:'rma_po_number',
index:'r.rma_po_number',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{size:30},
align:'center'
},
{ name:'rma_material_cost',
index:'r.rma_material_cost',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{
size: 15,
maxlength: 8,
dataEvents: [
{
type: 'change',
fn: calcVMIForm
}
]
},
editrules:{
number: true,
minValue: 0
},
formoptions: {label:'Material Cost $'},
align:'center'
},
{ name:'rma_restock',
index:'r.rma_restock',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{
size: 15,
maxlength: 8,
dataEvents: [
{
type: 'change',
fn: calcVMIForm
}
]
},
editrules:{
number: true,
minValue: 0
},
formoptions: {label:'Re-stock Fee $'},
align:'center'
},
{ name:'rma_freight',
index:'r.rma_freight',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{
size: 15,
maxlength: 8,
dataEvents: [
{
type: 'change',
fn: calcVMIForm
}
]
},
editrules:{
number: true,
minValue: 0
},
formoptions: {label:'Freight $'},
align:'center'
},
{ name:'rma_install_hours',
index:'r.rma_install_hours',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{size:30},
align:'center'
},
{ name:'rma_issue',
index:'r.rma_issue',
width:160,
sortable:false,
editable:true,
edittype:'select',
editoptions:{value:issueOpts},
align:'right'
},
{ name:'rma_install_credit',
index:'r.rma_install_credit',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{
size: 15,
maxlength: 8,
dataEvents: [
{
type: 'change',
fn: calcVMIForm
}
]
},
editrules:{
number: true,
minValue: 0
},
formoptions: {label:'Install Credit $'},
align:'center'
},
{ name:'rma_other_credit',
index:'r.rma_other_credit',
width:60,
sortable:true,
editable:true,
edittype:'text',
editoptions:{
size: 15,
maxlength: 8,
dataEvents: [
{
type: 'change',
fn: calcVMIForm
}
]
},
editrules:{
number: true,
minValue: 0
},
formoptions: {label:'Other Credit $'},
align:'center'
},
{ name:'rma_expected_credit',
index:'r.rma_expected_credit',
width:60,
sortable:true,
editable:true,
edittype:'text',
formoptions: {label:'Expected Credit $'},
align:'center'
},
{ name:'rma_credit_number',
index:'r.rma_credit_number',
width:90,
sortable:true,
editable:true,
edittype:'text',
editoptions:{size:50},
align:'center'
},
{ name:'rma_credit_received',
index:'r.rma_credit_received',
width:60,
sortable:true,
editable:true,
edittype:'text',
formoptions: {label:'Credit Received $'},
align:'center'
},
{ name:'rma_notes',
index:'r.rma_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'55'}
}
],
pager:'#vmiFoot',
sortname:'r.id',
caption:'All Open Vendor Management Issues',
onSelectRow: function(id) {
var $self = $(this);
$self.jqGrid('editGridRow', id, formProps);
},
editurl:'/jqg/jqg.saveVMIEdit.php'
});
$vmiGrid.jqGrid('navGrid','#vmiFoot',navParms);
$('#special_dialog').dialog({
resizeStop: function(e,ui) {
$vmiGrid.jqGrid('setGridWidth', ui.size.width - 20);
},
buttons:{
"Done!" : function() {
$('#special_dialog').dialog('close');
}
}
});
});
HTML
<table id="vmiGrid"></table><div id="vmiFoot"></div>