インライン編集の後に jqGrid をリロードするかjQuery.data()
、ページャーで保存ボタンをクリックした後にいくつかの値を保存できるイベントをタップします。使用について多くの話を見てきましたが$("#gridid').edit();
、私の jqGrid は現在その機能を使用するように設定されておらず$("#gridid').edit()
、現在の設定にどのように統合されるかについてもよくわかりません。
/***********************************************************
*********************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*********************************
***********************************************************/