jqgrid 动态添加数据项

动态修改 jqgrid 提交的参数 

 

具体的说明可以参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:post_data_module  

 

这里举个例子：当你需要根据用户的输入过滤 jqgrid 的显示数据，可以这样实现，

 

Js代码

1. userName = $( '#userName' ).val( );   // input 的值  
2.   
3. userCode =  $( '#userCode' ).val( );   // input 的值  
4.   
5. jQuery('#grid_user').appendPostData( { userName :userName , userCode :userCode }   
6.   
7. 这 样，刷新 grid 数据时，提交到服务器的数据将包含这 userName 和 userCode两项。  

userName = $( '#userName' ).val( );   // input 的值  userCode =  $( '#userCode' ).val( );   // input 的值  jQuery('#grid_user').appendPostData( { userName :userName , userCode :userCode }   这样，刷新 grid 数据时，提交到服务器的数据将包含这 userName 和 userCode两项。

 

Editing form 提交时，动态添加数据项 

 

在以 Form Editing 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？

 

一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。

 

参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing 可以知道：

 

在表单提交前，将触发事件 beforeSubmit ， 所以我们可以在这个事件里做些事情。

 

Js代码

1. // 提交前  
2. fn_beforeSubmit = function( postdata, formid ) {   
3.     // 添加或修改 postdata 项目值             
4.     postdata[ 'uploadDate' ] = new Date().format("yyyy/MM/dd") ;    
5.     postdata[ 'uploadTime' ] = new Date().format("hh:mm:ss") ;    
6.                                           
7.     return[true,''];   // 提交  
8.                           
9. };  
10.   
11. // 添加记录 options   
12. Options_add = {  
13.         width:500,  
14.         height:290,  
15.         reloadAfterSubmit:true,  
16.         jqModal:true,   
17.         beforeSubmit:       fn_beforeSubmit,  
18.         ......  
19. }  
20.   
21. // 配置 jqgrid nav  
22. jQuery( pGridId ).jqGrid('navGrid',pPageId, {edit:true,add:true,del:true,search:false,refresh:true,view:true,addtext:'添加',edittext:' 修改',deltext:'删除' }, //options   
23.         {height:290,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"标记有*的字段不能为空"}, // edit options   
24.         Options_add, // add options   
25.         {reloadAfterSubmit:false,jqModal:true, closeOnEscape:true }, // del options   
26.         {closeOnEscape:true}, // search options   
27.         {height:250,jqModal:false,closeOnEscape:true} // view options   
28.     );   

// 提交前 fn_beforeSubmit = function( postdata, formid ) {   // 添加或修改 postdata 项目值     postdata[ 'uploadDate' ] = new Date().format("yyyy/MM/dd") ;    postdata[ 'uploadTime' ] = new Date().format("hh:mm:ss") ;               return[true,''];   // 提交        };  // 添加记录 options  Options_add = {      width:500,         height:290,         reloadAfterSubmit:true,      jqModal:true,       beforeSubmit:   fn_beforeSubmit,         ...... }  // 配置 jqgrid nav jQuery( pGridId ).jqGrid('navGrid',pPageId, {edit:true,add:true,del:true,search:false,refresh:true,view:true,addtext:'添加',edittext:'修改',deltext:'删除' }, //options    {height:290,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"标记有*的字段不能为空"}, // edit options    Options_add, // add options    {reloadAfterSubmit:false,jqModal:true, closeOnEscape:true }, // del options    {closeOnEscape:true}, // search options    {height:250,jqModal:false,closeOnEscape:true} // view options   );