jqGrid 属性、事件全集（三）——实时数据操作

This example show how we can add dialog for live data search.

Description

This method uses colModel names and url parameters from jqGrid
Calling: jQuery("#grid_id").searchGrid( options );
options
top : 0 the initial top position of search dialog
left: 0 the initinal left position of search dialog
If the left and top positions are not set the dialog apper on
upper left corner of the grid
width: 360, the width of serch dialog - default 360
height: 70, the height of serch dialog default 70
modal: false, determine if the dialog should be in modal mode default is false
drag: true,determine if the dialog is dragable default true
caption: "Search...",the caption of the dialog
Find: "Find", the text of the button when you click to search data default Find
Reset: "Reset",the text of the button when you click to clear search string default Reset
dirty: false, applicable only in navigator see the last example
These parameters are passed to the url
sField:'searchField', is the name that is passed to url the value is the name from colModel
sValue:'searchString',is the name that is passed to url the value is the entered value
sOper: 'searchOper', is the name that is passed to the url the value is the type of search - see sopt array
// translation string for the search options
odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','ends with','contains' ],
// if you want to change or remove the order change it in sopt
sopt: null // ['bw','eq','ne','lt','le','gt','ge','ew','cn']
by default all options are allowed. The codes are as follow:
bw - begins with ( LIKE val% )
eq - equal ( = )
ne - not equal ( <> )
lt - little ( < )
le - little or equal ( <= )
gt - greater ( > )
ge - greater or equal ( >= )
ew - ends with (LIKE %val )

cn - contain (LIKE %val% )

... 
<table id="search"></table> 
<div id="pagersr"></div> 
<input type="BUTTON" id="bsdata" value="Search" />

查询数据

jQuery("#search").jqGrid({ 
	url:'server.php?q=1', 
	datatype: "xml", 
	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
	colModel:[ 
		{name:'id',index:'id', width:55}, 
		{name:'invdate',index:'invdate', width:90}, 
		{name:'name',index:'name', width:100}, 
		{name:'amount',index:'amount', width:80, align:"right"}, 
		{name:'tax',index:'tax', width:80, align:"right"}, 
		{name:'total',index:'total', width:80,align:"right"}, 
		{name:'note',index:'note', width:150, sortable:false}
	],
	rowNum:10, 
	rowList:[10,20,30], 
	pager: '#pagersr', 
	sortname: 'id', 
	viewrecords: true, 
	sortorder: "desc", 
	caption:"Search Example", 
	editurl:"someurl.php" 
}); 

$("#bsdata").click(function(){ 
	jQuery("#search").jqGrid('searchGrid', {sopt:['cn','bw','eq','ne','lt','gt','ew']} ); 
});

... 
<table id="editgrid"></table> 
<div id="pagered"></div> 
<input type="BUTTON" id="bedata" value="Edit Selected" />

jQuery("#editgrid").jqGrid({ 
	url:'editing.php?q=1', 
	datatype: "xml", 
	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'], 
	colModel:[ 
		{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}}, 
		{name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}}, 
		{name:'name',index:'name', width:90,editable:true,editoptions:{size:25}}, 
		{name:'amount',index:'amount', width:60, align:"right",editable:true,editoptions:{size:10}}, 
		{name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}}, 
		{name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}}, 
		{name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}}, 
		{name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}}, 
		{name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} 
	], 
	rowNum:10, 
	rowList:[10,20,30], 
	pager: '#pagered', 
	sortname: 'id', 
	viewrecords: true, 
	sortorder: "desc", 
	caption:"Editing Example", 
	editurl:"someurl.php" 
}); 
//编辑行
$("#bedata").click(function(){ 
	var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow'); 
if( gr != null ) 
	jQuery("#editgrid").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
else 
	alert("Please Select Row"); 
});
//添加行
$("#bedata").click(function(){ 
	jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); 
});
//删除行
$("#dedata").click(function(){ 
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow'); 
if( gr != null ) 
	jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false}); 
else 
	alert("Please Select Row to delete!"); 
});

jQuery("#navgrid").jqGrid(
	'navGrid',
	'#pagernav', 
	{}, //options 
	{height:280,reloadAfterSubmit:false}, // edit options 
	{height:280,reloadAfterSubmit:false}, // add options 
	{reloadAfterSubmit:false}, // del options 
	{} // search options 
);

说明：

编辑行：

Description
This method uses colModel and editurl parameters from jqGrid
Calling: jQuery("#grid_id").jqGrid('editGridRow', the_row_id, options );
the_row_id is the row to edit
options
top : 0 the initial top position of edit dialog
left: 0 the initinal left position of edit dialog
If the left and top positions are not set the dialog apper on
upper left corner of the grid
width: 0, the width of edit dialog - default 300
height: 0, the height of edit dialog default 200
modal: false, determine if the dialog should be in modal mode default is false
drag: true,determine if the dialog is dragable default true
addCaption: "Add Record",the caption of the dialog if the mode is adding
editCaption: "Edit Record",the caption of the dialog if the mode is editing
bSubmit: "Submit", the text of the button when you click to data default Submit
bCancel: "Cancel",the text of the button when you click to close dialog default Cancel
url: , url where to post data. If set replace the editurl
processData: "Processing...", Indicator when posting data
closeAfterAdd : false, when add mode closes the dialog after add record - default false
clearAfterAdd : true, when add mode clears the data after adding data - default true
closeAfterEdit : false, when in edit mode closes the dialog after editing - default false
reloadAfterSubmit : true reloads grid data after posting default is true
// Events
intializeForm: null fires only once when creating the data for editing and adding.
Paramter passed to the event is the id of the constructed form.
beforeInitData: null fires before initialize the form data.
Paramter passed to the event is the id of the constructed form.
beforeShowForm: null fires before showing the form data.
Paramter passed to the event is the id of the constructed form.
afterShowForm: null fires after the form is shown.
Paramter passed to the event is the id of the constructed form.
beforeSubmit: null fires before the data is submitted to the server
Paramter is array of type name:value. When called the event can return array
where the first parameter can be true or false and the second is the message of the error if any
Example: [false,"The value is not valid"]
afterSubmit: null fires after the data is posted to the server. Typical this
event is used to recieve status form server if the data is posted with success.
Parameters to this event are the returned data from the request and array of the
posted values of type name:value

添加行：

Description
This method uses colModel and editurl parameters from jqGrid
Calling: jQuery("#grid_id").editGridRow( the_row_id, options );
the_row_id when in add mode the special value must be set - "new"
options
top : 0 the initial top position of edit dialog
left: 0 the initinal left position of edit dialog
If the left and top positions are not set the dialog apper on
upper left corner of the grid
width: 0, the width of edit dialog - default 300
height: 0, the height of edit dialog default 200
modal: false, determine if the dialog should be in modal mode default is false
drag: true,determine if the dialog is dragable default true
addCaption: "Add Record",the caption of the dialog if the mode is adding
editCaption: "Edit Record",the caption of the dialog if the mode is editing
bSubmit: "Submit", the text of the button when you click to data default Submit
bCancel: "Cancel",the text of the button when you click to close dialog default Cancel
url: , url where to post data. If set replace the editurl
processData: "Processing...", Indicator when posting data
closeAfterAdd : false, when add mode closes the dialog after add record - default false
clearAfterAdd : true, when add mode clears the data after adding data - default true
closeAfterEdit : false, when in edit mode closes the dialog after editing - default false
reloadAfterSubmit : true reloads grid data after posting default is true
// Events
intializeForm: null fires only once when creating the data for editing and adding.
Paramter passed to the event is the id of the constructed form.
beforeInitData: null fires before initialize the form data.
Paramter passed to the event is the id of the constructed form.
beforeShowForm: null fires before showing the form data.
Paramter passed to the event is the id of the constructed form.
afterShowForm: null fires after the form is shown.
Paramter passed to the event is the id of the constructed form.
beforeSubmit: null fires before the data is submitted to the server
Paramter is array of type name:value. When called the event can return array
where the first parameter can be true or false and the second is the message of the error if any
Example: [false,"The value is not valid"]
afterSubmit: null fires after the data is posted to the server. Typical this
event is used to recieve status form server if the data is posted with success.
Parameters to this event are the returned data from the request and array of the
posted values of type name:value

删除行：

Description
This method uses colModel and editurl parameters from jqGrid
Calling: jQuery("#grid_id").jqGrid('delGridRow', row_id_s,options );
row_id_s is the row to delete. When in multiselect automatially delete the selected rows
options
top : 0 the initial top position of edit dialog
left: 0 the initinal left position of edit dialog
If the left and top positions are not set the dialog apper on
upper left corner of the grid
width: 0, the width of edit dialog - default 300
height: 0, the height of edit dialog default 200
modal: false, determine if the dialog should be in modal mode default is false
drag: true,determine if the dialog is dragable default true
msg: "Delete selected row(s),message to display when deleting the row
caption: "Delete Record",the caption of the dialog
bSubmit: "Submit", the text of the button when you click to data default Submit
bCancel: "Cancel",the text of the button when you click to close dialog default Cancel
url: , url where to post data. If set replace the editurl
reloadAfterSubmit : true reloads grid data after posting default is true
// Events
beforeShowForm: null fires before showing the form data.
Paramter passed to the event is the id of the constructed form.
afterShowForm: null fires after the form is shown.
Paramter passed to the event is the id of the constructed form.
beforeSubmit: null fires before the data is submitted to the server
Paramter is of type id=value1,value2,... When called the event can return array
where the first parameter can be true or false and the second is the message of the error if any
Example: [false,"The value is not valid"]
afterSubmit: null fires after the data is posted to the server. Typical this
event is used to recieve status form server if the data is posted with success.
Parameters to this event are the returned data from the request and array of the
posted values of type id=value1,value2

Navigator：

This method uses colModel and editurl parameters from jqGrid
Calling: jQuery("#grid_id").jqGrid('navGrid',selector,options,pEdit,pAdd,pDel,pSearch );