在内联编辑后重新加载jqGrid
问题描述:
我想在内联编辑后重新加载jqGrid,或点击一个事件,在页面上单击保存按钮后,我可以使用jQuery.data()
保存一些值。我见过很多关于使用$("#gridid').edit();
的讨论,但是我的jqGrid目前没有设置为使用该功能,我不确定$("#gridid').edit()
将如何集成到我当前的设置中。在内联编辑后重新加载jqGrid
/***********************************************************
*********************jqgrid*********************************
***********************************************************/
lastSel = "";
$(function(){
var myGrid = jQuery("#list");
console.log(myGrid);
$("#list").jqGrid({
url:'php.scripts/customers.get.php',
datatype: 'xml',
mtype: 'POST',
colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
colModel :[
{name:'idcustomers', index:'idcustomers', width:55},
{name:'firstname', index:'firstname', width:90, editable: true},
{name:'lastname', index:'lastname', width:90, editable: true},
{name:'address1', index:'address1', width:90, editable: true},
{name:'address2', index:'address2', width:90, editable: true},
{name:'city', index:'city', width:90, editable: true},
{name:'state', index:'state', width:90, editable: true},
{name:'zip', index:'zip', width:90, editable: true},
{name:'phone', index:'phone', width:90, editable: true},
{name:'email', index:'email', width:90, editable: true},
{name:'cell', index:'cell', width:90, editable: true}
],
pager: '#pager',
rowNum:20,
rowList:[20,100,300],
sortname: 'idcustomers',
sortorder: 'asc',
shrinkToFit: true,
viewrecords: true,
gridview: true,
caption: 'Customers',
width: 1400,
height: 290,
editurl: 'php.scripts/jqgrid.updaterow.php',
ajaxGridOptions: {type:"POST"},
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery('#list').restoreRow(lastSel);
lastSel=id;
jQuery("#list").data('selid',lastSel);
console.log(lastSel);
console.log(jQuery("#list").data('selid'));
$.ajax({
type: "POST",
url: "php.scripts/customers.setid.php",
data: { idcustomers: jQuery("#list").data('selid') }
}).done(function(msg)
{
console.log(msg);
});
jQuery('#list').data('selid', jQuery("#list").getCell(lastSel,0));
jQuery('#list').data('firstname', jQuery("#list").getCell(lastSel,1));
jQuery('#list').data('lastname', jQuery("#list").getCell(lastSel,2));
jQuery('#list').data('address1', jQuery("#list").getCell(lastSel,3));
jQuery('#list').data('address2', jQuery("#list").getCell(lastSel,4));
jQuery('#list').data('city', jQuery("#list").getCell(lastSel,5));
jQuery('#list').data('state', jQuery("#list").getCell(lastSel,6));
jQuery('#list').data('zip', jQuery("#list").getCell(lastSel,7));
jQuery('#list').data('phone', jQuery("#list").getCell(lastSel,8));
jQuery('#list').data('email', jQuery("#list").getCell(lastSel,9));
jQuery('#list').data('cell', jQuery("#list").getCell(lastSel,10));
}
}
})
.jqGrid('navGrid','#pager',{ edit: false, add: true, search: false }, {}, {}, {}, {}, {})
.jqGrid('inlineNav',"#pager",{})
.jqGrid('navButtonAdd',"#pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
onClickButton:function(){
myGrid[0].toggleToolbar()
}
})
.jqGrid('navButtonAdd',"#pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
onClickButton:function(){
myGrid[0].clearToolbar();
jQuery('#list').data('selid', "");
jQuery('#list').data('firstname', "");
jQuery('#list').data('lastname', "");
jQuery('#list').data('address1', "");
jQuery('#list').data('address2', "");
jQuery('#list').data('city', "");
jQuery('#list').data('state', "");
jQuery('#list').data('zip', "");
jQuery('#list').data('phone', "");
jQuery('#list').data('email', "");
jQuery('#list').data('cell', "");
}
})
.jqGrid('filterToolbar');
/***********************************************************
*********************jqgrid*********************************
***********************************************************/
答
希望这有助于你 -
onSelectRow : function(rowid){
if(rowid && rowid!== lastsel){
$("#datagrid").jqGrid('restoreRow',lastsel);
$("#datagrid").jqGrid('editRow',rowid,true);
lastsel = rowid;
}
},
editrow
方法触发jqgrid
与编辑后的数据,并传递一个额外的参数OPER到网址和所有它所选行的数据。 在editurl
选项你的网址包含一个参数与操作,所以通过在服务器端使用这个参数,你可以更新你的数据在php中的数据库。 没有必要为此使用ajax调用。