YUI Grids布局原理
JQuery UI Theming/API

jqGrid 问题笔记

marz posted @ Aug 11, 2010 07:17:30 AM in js-libraries with tags jqgrid problem note tricks cheats , 7340 readers

 

所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。

 

01.单元格内的文本自动换行 ：

 

加入样式：

 

.ui-jqgrid tr.jqgrow td {

    white-space: normal !important;

    height:auto;

    vertical-align:text-top;

    padding-top:2px;

}

 

具体说明可参阅： http://blog.qumsieh.ca/2009/12/03/jqgrid-textword-wrapping/

 

 

02.保持显示垂直滚动条

 

在IE中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不齐的情况，通过保持显示垂直滚动条可以解决这个问题。

 

    $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

 

需要保持水平滚动条，则：

    $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });

 

 

 

 

03.控制列的水平宽度

 

当表字段比较多时，如果按照colModel指定的宽度，整个jqGrid宽度会太宽，我们通常希望控制一下grid的宽度，并同时保持各列的指定宽度。

可以指定jgrid的参数 shrinkToFit:false 。shrinkToFit属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度。

同时需要控制jqgrid的宽度。通过autowidth:true属性可以达到目地。

 

04. 高度随记录数自动变化.

 

使用 height: 'auto' 参数 .

 

不理想的是，在IE6中，当字段比较多并出现水平滚动条时，感觉会比较难受。参考保持垂直滚动条的办法，保持一个水平滚动条，高度是对了。( 使用的Firefox3.6没发现这个问题, 所以说IE比较烂并不是空穴来风 )

 

 

Js代码

  1. if($.browser.msie) {      
  1.     // 保持垂直滚动条   
  1.     // $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });    
  2.     // 保持水平滚动条  
  3.     $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });    
  4. }  

  

 

 

 

 

05. jqgrid 和 validation 插件一起使用的问题

 

在提交表单的时候，会报错：'settings' is null or not an object.  'setting'为空或不是对象. 

 

http://www.trirand.com/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，

 

目前还是有这样的问题。

 

 

06. 动态修改 jqgrid 提交的参数 

 

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

 

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

 

Js代码

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

  

 

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

 

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

 

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

 

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

 

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

 

Js代码

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

  

 

 

08.  Editing form 中上传文件 

 

待续 ......

 

 

 

09.  不显示中间的分页器或右边的记录信息 

 

通过 FireBug可以发现 jqgrid  pager中各部分的命名规则： pager id + _left/_center/_right。

 

pPageId = '#pager_grid' ;

$( pPageId + "_center" ).remove( );    // 删除中间分页器

 

 

另外，也可以通过控制 css 实现。

 

参考：

 jqgrid  Tips, Tricks and Hacks -  To use the nav bar for buttons but hide the pager, using CSS

10 JQGrid Tips learned from my experience - tip5,tip6

 

 

10.  取得记录行序号 

 

jqGrid提供的方法一般只能取得记录的 id 号。使用 $('#jqgrid1').jqGrid('getDataIDs') 方法可以获得各行的id数组，此数组相应元素的索引号就是记录行序号了(从0开始)。

 

可以参考:

http://www.trirand.com/blog/?page_id=393/help/to-get-the-rowid-of-the-nth-row-of-the-grid/

 

Found the answer using $('#gridmain').jqGrid('getDataIDs');

It will return an array of ids for the visible grid.

So to get the nth rowid, i use:

var rids = $('#gridmain').jqGrid('getDataIDs');

var nth_row_id = rids[n-1]; //bec the row array starts from zero.

Hope it will help others, if interested.

 

 

 

 

 

其他参考：

 

10 JQGrid Tips learned from my experience

http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learned-from-my-experience/

 

 

jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)

 

 

http://stackoverflow.com/questions/2117687/jqgrid-and-jquery-ui-tabs-showing-grids-expanded-only-on-primary-tab-div

 

 

源文档 <http://forestkqq.javaeye.com/blog/602944>

Small_feed Comments (11)
1
[Reply]
meidir said:
Feb 08, 2023 09:57:08 PM

I thought it was going to be some boring old site, but I’m glad I visited. I will post a link to this page on my blog. I am sure my visitors will find that very useful. Software Development Lawyer

2
[Reply]
meidir said:
Feb 09, 2023 07:32:10 PM

Thanks for sharing, it is a great inspirational thread to will motivate many people to work on new things. Folding Solar Panel Kit

3
[Reply]
seo said:
Apr 15, 2023 08:14:56 PM

Interesting topic for a blog. I have been searching the Internet for fun and came upon your website.Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..Admiring the time and effort you put into your blog and detailed information you offer!..Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!.This blog is so nice to me. I will keep on coming here again and again. Visit my link as well.. Ipc 6013 Flexible Circuit Manufacturing

4
[Reply]
seo said:
May 02, 2023 12:49:04 AM

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.i never know the use of adobe shadow until i saw this post. thank you for this! this is very helpful. Exterminators

5
[Reply]
actividad google said:
Jul 27, 2023 12:49:43 AM

Puede eliminar los resultados individuales del historial de búsqueda de la lista instantánea de la página de búsqueda de Google junto con Mi actividad de Google en todos los productos de Google en actividad google . Es esencial proteger nuestro historial de búsqueda y otras actividades de otros por motivos personales. Todos pueden usar la página Mi actividad de Google para eliminar una gran parte o la totalidad de su historial de búsqueda.

6
[Reply]
Kerala 2nd Class Bo said:
Sep 25, 2023 04:08:22 PM

Kerala 2nd Standard Malayalam, English, Tamil, and Kannada Medium Textbook Available in SCERT Kerala Official Website, Students can Download Latest Edition, SCERT Kerala Standard Books are Prepared by a Group of Subject Expert, These SCERT Kerala Textbooks 2024 are an Excellent Resource for Students, as they can learn and revise through Different Chapters Present in the syllabus for Kerala 2nd Class Book 2024 Subjects like Maths, Science, Social Science, Hindi, English and Malayalam.This is Kerala Textbook.

7
[Reply]
jnanabhumiap.in said:
Jan 09, 2024 02:14:27 AM

JNANABHUMI AP provides a CBSE syllabus for all classes for the academic year 2024 has been designed as per the guidelines of the CBSE Board. The syllabus offers a conceptual background and lays the groundwork for the Class 10 Board exams. jnanabhumiap.in By visiting the page, students will find the downloadable pdf of the reduced CBSE 10th Syllabus along with the deleted portion of the syllabus for each subject. So, students are advised to prepare for the exam, as per the syllabus mentioned here.

8
[Reply]
seoo said:
Jan 31, 2024 08:17:14 PM

If possible, as you gain expertise, would you mind updating your blog with more information. It is extremely helpful for me.I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. Online Quran

9
[Reply]
seoo said:
Feb 02, 2024 04:11:36 AM

We have sell some products of different custom boxes.Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts.This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post! ear specialist near me

10
[Reply]
seoo said:
Feb 02, 2024 06:54:40 PM

Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks..!You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this... graphic designers

11
[Reply]
seo said:
Feb 08, 2024 03:15:28 AM

I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. ssd solution


Login *


loading captcha image...
(type the code from the image)
or Ctrl+Enter