次のスクリプトを使用して、SQL データベースから jqgrid に詳細をバインドします。ページを更新した後のjqgrid、次にjqgridにデータが表示されます。送信ボタンがクリックされた後にjqgridを自動的に更新する方法は?
<script type="text/javascript">
$(document).ready(function(){
var mydata=new Array();
$.extend({
getValues: function(url) {
var result = null;
$.ajax({
url: url,
type: 'POST',
data:'Param=value',
async:false,
success: function(data) {
result=JSON.parse(data);
}
});
return result;
}
});
mydata = $.getValues(Some url);//get the data from the url
$("#datagrid").jqGrid({
datatype: "local",
data: mydata,
colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'],
colModel:[
{name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}},
{name:'company',index:'company', width:100,editable:true},
{name:'price',index:'price', width:100,editable:true,editoptions:{size:10}},
{name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}},
{name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}},
{name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}}
],
rowNum:10,
rowList:[10,20],
loadonce: true,
pager: '#navGrid',
sortname: 'companyid',
sortorder: "asc",
height: 210,
width:600,
onSelectRow: function(id){
getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid')
},
viewrecords: true,
caption:"JQ GRID"
});
jQuery("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true, addtext: 'Add', edittext: 'Edit', deltext: 'Delete'},
//For Edit
{
closeOnEscape: true,
closeAfterEdit: true,
reloadAfterSubmit:true,
closeOnEscape: true,
url:'Some url'
},
// For Add
{
closeOnEscape: true,
closeAfterAdd: true,
reloadAfterSubmit: true,
closeOnEscape: true,
url: 'Some url'
},
// For Delete
{
url:'Some url',
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
onclickSubmit: function(e, postdata)
{
e.url = 'Some url'
}
}
);
});
</script>