- 浏览: 210023 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
leeyea:
写的很好!
jqGrid 问题笔记(3) -
hesai_vip:
很不错的说!先mark!
jqGrid 问题笔记(2) -
bawang5021:
总结的确实好
jqGrid 问题笔记(2) -
Hero_dong:
你好,请问怎样设置ckfinder,让它显示左侧的资源文件夹? ...
CKEditor、ckfinder 随笔 -
forestkqq:
duooluu 写道请教一下,能选择时分秒吗?不行啊
jQuery UI Datepicker 应用举例
所谓问题可能不是jqgrid本身问题,而是浏览器或应用的特殊需要而产生的问题。
关于jqgrid,最好的参考是它的官网的wiki 和在线的Demo 。 另外这是 http://forestkqq.iteye.com/ 的原创,本文也会有后续的补充,转载的朋友请标明出处并及时更新。
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中记录比较少的时候,默认情况下不显示垂直滚动条,会出现标题行与数据行位置对不齐的情况,通过保持显示垂直滚动条可以解决这个问题( 目前使用jqgrid3.6似乎没有这样的问题 )。
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
需要保持水平滚动条,则:
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });
在目前使用的 jqgrid 3.6 版本中,当 IE 浏览器中网格宽度超过容器的水平宽度时,高度即使设置为 auto,也会同时出现水平滚动条和垂直滚动条,感觉非常难受。此时,只要保持水平滚动条,即可解决这个问题。使用前后的效果见下图:
03.控制列的水平宽度
当表字段比较多时,如果按照colModel指定的宽度,整个jqGrid宽度会太宽,我们通常希望控制一下grid的宽度,并同时保持各列的指定宽度。
可以指定jgrid的参数 shrinkToFit:false 。shrinkToFit属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度。
同时需要控制jqgrid的宽度。通过autowidth:true属性可以达到目地。
04. 高度随记录数自动变化.
使用 height: 'auto' 参数 .
不理想的是,在IE6中,当字段比较多并出现水平滚动条时,感觉会比较难受。参考保持垂直滚动条的办法,保持一个水平滚动条,高度是对了。( 使用的Firefox3.6没发现这个问题, 所以说IE比较烂并不是空穴来风 )
if($.browser.msie) { // 保持垂直滚动条 // $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' }); // 保持水平滚动条 $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' }); }
05. jqgrid 和 validation 插件一起使用的问题
在提交表单的时候,会报错:'settings' is null or not an object. 'setting'为空或不是对象.
http://www.trirand.com/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告,
目前还是有这样的问题。
2010/12/13 修订:现在对于这个问题,我很不确定。因为现在我的很多页面都同时应用了 jqgrid 和 validataion , 没发现有什么问题。不过我现在的提交方式是 ajax 方式。
06. 动态修改 jqgrid 提交的参数
具体的说明可以参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:post_data_module
这里举个例子:当你需要根据用户的输入过滤 jqgrid 的显示数据,可以这样实现,
userName = $( '#userName' ).val( ); // input 的值 userCode = $( '#userCode' ).val( ); // input 的值 jQuery('#grid_user').appendPostData( { userName :userName , userCode :userCode } 这样,刷新 grid 数据时,提交到服务器的数据将包含这 userName 和 userCode两项。
07. Editing form 提交时,动态添加数据项
在以 Form Editing 方式添加或修改数据,如何在提交时动态的添加或修改一些项目呢?
一个典型的例子是添加文章记录时,在提交的数据中添加当前时间这个项目。
参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing 可以知道:
在表单提交前,将触发事件 beforeSubmit , 所以我们可以在这个事件里做些事情。
// 提交前 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 );
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
系列文章列表:
评论
pGridId 是 你的 jqgrid 的 id,我定义的是一个变量,你根据需要换成自己的。
// 保持垂直滚动条
// $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
// 保持水平滚动条
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });
}
不起作用怎么办?还是放错位置了?
发表评论
-
使用jQuery操控IFrame
2011-11-14 14:50 37451. 调整IFrame滚动条的位 ... -
jQuery升级的几个问题和解决方案
2012-07-10 12:58 1331将 jQuery 从 1.3 升级到 1.4 以后,常会遇到以 ... -
使用JQuery 操控 window.open
2011-05-26 13:31 10481简单应用 window.open的情况,使用 jqu ... -
jqGrid 问题笔记(3)
2011-05-26 13:29 13149所谓问题可能不是jqgrid本身问题,而是浏览器或应用的 ... -
jQuery插件备忘
2010-09-14 09:20 1783使用并推荐的插件: Dropdown Che ... -
开源书籍介绍的软件
2010-09-07 08:35 1231《开源技术选型手册》所介绍的软件 第1章 闲话开源 ... -
swfupload 在 IE 下的销毁问题
2010-07-01 13:32 4221近日使用 SwfUpload做上传程序,在 Firef ... -
UI Dialog 中使用 AJAX 装载内容
2010-06-26 09:58 2196如何在显示 jQuery UI Dialog 中,以 ajax ... -
jQuery选择器示例
2010-06-19 11:24 011 22 22 ... -
jQuery AJAX 中使用 JSON 传递数据
2010-06-02 11:30 0使用 ajax 方式调用页面,一方面需要向被调用的页面传 ... -
jqGrid 问题笔记(2)
2010-05-21 09:22 13870预览文章: jqGrid 问题 ... -
jqGrid 应用文章链接
2010-03-11 10:12 0*** jqGrid Wiki 文档 htt ... -
jQuery UI Datepicker 应用举例
2010-01-05 14:26 10347jQuery UI Datepicker 样例 界面效 ... -
jQuery Dialog 笔记
2009-12-29 15:46 3500头部加入 : <link type=" ... -
Eclipse 插件
2009-12-10 11:37 0Properties Editor 属性文件编辑器 htt ... -
Eclipse、MyEclipse配置
2009-12-10 11:26 0Eclipse、MyEclipse安装配置 安 ... -
jQuery UI Datepicker
2009-11-14 10:42 0UI/API/1.7/Datepicker 中文版: ... -
jQuery plugin: Validation 样例
2009-11-04 14:29 2124链接: http://plugins.jquery.com/p ... -
jQuery plugin: Masked Input
2009-10-29 11:54 1567jQuery plugin: Masked Input ... -
jQuery 资源
2009-10-27 15:51 962jQuery Plugin http://plug ...
相关推荐
这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。 首先,jqGrid支持多种数据源,包括JSON、XML、HTML、CSV等,这使得它能灵活地与各种后端服务进行...
1. **editRow**: 此方法用于将指定行切换到编辑模式。调用格式为 `editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc)`。其中: - `rowid` 指定要编辑...
**jqGrid 使用笔记:开始** jqGrid 是一个强大的 jQuery 插件,用于创建灵活、功能丰富的数据网格。这篇笔记将引导我们逐步了解如何在项目中开始使用 jqGrid。jqGrid 提供了丰富的特性,包括数据分页、排序、过滤、...
1. **安装jqGrid**: 安装 jqGrid 非常简单,只需要将相关的 CSS 和 JavaScript 文件包含在你的 HTML 页面中。例如,你需要包含 `ui.jqgrid.css` 以应用样式,`jquery-ui-1.7.2.custom.css` 用于 jQuery UI 主题,...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,提供数据的分页、排序、筛选等功能。在jqGrid的进阶篇中,我们主要会探讨如何在jqGrid中进行更复杂的配置和操作,包括自定义列、本地数据加载、编辑功能...
在本篇Java中jqGrid的学习笔记整理中,我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库,用于创建动态、交互式的表格,而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...
"Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...
1. **数据加载**:通过`$.ajax`异步请求数据,然后使用`addJSONData`方法将数据添加到表格中。 2. **验证**:在`afterShowForm`和`afterclickPgButtons`事件中,对编辑日期进行验证,确保只能修改当月之后的计划。 3...
本篇学习笔记将详细介绍如何使用jqGrid实现分页和搜索功能。 首先,要使用jqGrid,你需要在HTML页面中引入必要的CSS和JavaScript文件。这些文件包括jqGrid的样式表`ui.jqgrid.css`,jQuery库`jquery-2.0.3.min.js`...
1. 数据展示:jqGrid能够以表格的形式展示数据,支持多种数据源,如JSON、XML、CSV等。通过配置列模型(colModel),可以定义列的标题、宽度、对齐方式、是否可排序等属性。 2. 数据操作:提供排序、筛选、分页、...
1. **初始化表格**:首先,你需要在HTML中定义一个表格元素,并在JavaScript中使用jqGrid的`$("#gridID").jqGrid()`方法来初始化这个表格。在这里,`gridID`是表格的ID,需要与HTML中的id属性匹配。 2. **配置参数*...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...