相关文章
更多最近更新
更多jQuery表格插件jqGrid(jquery.jqGrid.js)
2019-03-07 23:41|来源: 网路
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。
不知是不是官方地址,不过有像http://www.trirand.com/blog/
引用一篇文章:http://mj4d.iteye.com/blog/1628851
jqGrid是一款处理表格展现的jQuery插件,支持分页、滚动加载、搜索、锁定、拖动等一系列对表格的常规操作。以下是最近项目中实践jqGrid的整理
1、引入到项目中来 jqGrid的主页在http://www.trirand.com/blog/ ,上面提供了下载、demo、wiki等文档,都比较详尽。特别是http://www.trirand.com/jqgridwiki/doku.php 中值得开发中多多关注。好了,下载后需要在项目的头文件中引入:
jqGrid采用了jQueryUI的CSS主题,需要下载相应的主题http://jqueryui.com/themeroller/ 找到相应的主题下载,如果使用了datepicker控件,还需要ui。如下:
2、在页面中使用 在页面中如vm、jsp中使用,需要两个基本的元素
然后在js中
这样就是一个最基本的设置,重点是在这里的options上,包括基本参数设定和函数。具体可见官网的文档: 写道 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
3、参数(options) 参数是指jqGrid对象中设置各种特性的属性,具体的设置在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options 下面一个例子,罗列了常用的参数,并对参数进行了说明:
以上各个参数的含义已经做了说明,具体可见上面文档的详细介绍。
prmNames: 这些参数每次会作为请求参数传递给server端,一般维持分页、排序等信息。可在查询对象中统一声明这些属性,与这里设置保持一致。如:
jsonReader: 与prmNames一样,是与server端Json格式交互的解析方式,root元素是一个json数组,解析colModel中的元素,而其他则涉及分页等信息。比如我们在Action中每次返回的对象为PageModule,可定义为:
colModel: colModel对json数组中对象如何解析填充到表格的cell的设定,包括基本的name、index、width、formater等,具体见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options 比如下设置:
以上个参数含义来自http://blog.csdn.net/jpr1990/article/details/6891115 比如对价格需要加前缀和分割可以如下设定:
支持下拉select的设定:
显示链接:
4、常用方法(methods) http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods jqGrid支持两种方式调用函数方法:
下面是新的API,推荐使用新的调用方法,也支持链式调用,如:
1、新增{rowid, data, position(first、before、last、after)}
2、清空grid
3、返回当前grid序号
4、根据rowID获取当前row的值
5、设置某row值
一个例子:需要对grid中的数据进行循环遍历获取、设置、更改
6、获取grid参数. name表示grid的options:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
7、设置grid参数,与上面的方法对应
如下常见需要获取的参数:
例子:对当前默认请求添加新的请求参数
同时,在实际的使用场景中,我们可能是需要选择通过选择表单的值再进行查询:
8、删除
在使用上述API进行批量删除时,是根据rowid去删除指定的行,但是在删除过程中rowid会导致变化,如果采用下面的方式删除会导致某些行不能被删除:
在网上找到一个解决方案是:
上述API是前端删除,对于前后台交互的删除的API:
下面是一个删除的例子:
5、事件(Event) 作为jqGrid的各种事件属性,用来监听相应的事件,如选择行、完成加载、多选等时候触发。API参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events,这里还介绍了关联事件的执行顺序: 写道 Below is the execution order of the events when a ajax request is made 1、beforeRequest 2、loadBeforeSend 3、serializeGridData 4、loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.) 5、beforeProcessing 6、gridComplete 7、loadComplete 下面的例子是在开发中比较关注的onSelectRow和gridComplete事件,完成如下功能:在选中行时获取当前行的数据并以某种方式查看数据,在列表加载完时计算列表中各个行的某列的合计值等:
考虑如下一种场景,在列表的最后一列一般会有要求操作栏,提供删除、修改等操作,那么同样也可以通过gridComplete事件来实现:
在gridComplete事件中:
6、其他 冻结行、列
jqGrid有提供对column、header、column with group header的冻结, 需要设置两处:
但是jqGrid对冻结的支持并不是那么强大,只能支持依次从左到右冻结,如果中间设置有一个cell没有设置,那么该row以后的cell即使设置了也不起作用 在官方的DOC中列出了使用限制: 写道 The following limitations tell you when frozen columns can not be set-up When TreeGrid is enabled When SubGrid is enabled When cellEdit is enabled When inline edit is used - the frozen columns can not be edit. When sortable columns are enabled - grid parameter sortable is set to true or is function When scroll is set to true or 1 When Data grouping is enabled 动态改变设置:当然这里id、name都是依次从左到右的元素 $("#changeBtn").bind("click", function() {
7、参考以下文章 doc: 其他 http://blog.csdn.net/gengv/article/category/648499 http://www.trirand.com/jqgridwiki/doku.php http://trirand.com/blog/jqgrid/jqgrid.html |
本文链接: jQuery表格插件jqGrid(jquery.jqGrid.js)【http://www.656463.com/article/488】
相关问答
更多-
下载的jquery表格插件jqgrid没有图片[2021-10-23]
应该是你的样式表中对应的图片,你没有下载吧····就是说你缺少了一个包含图片的文件夹···· -
jqgrid 表格中怎么使用日期插件[2022-04-10]
引用正确路径下的WdatePicker.js后可以用以下两种方式 1.在定义列时在editoptions的dataInit写一个function,好处是不管是添加还是修改时都能显示日历控件,如下 {name:'dt',index:'dt',editable:true, editoptions:{ dataInit:function(el){ $(el).click(function(){ WdatePicker(); }); } } } 2.在分别添加和修改中的beforeShowForm写一个 ... -
尝试这个: myGrid.navButtonAdd("#pagerId",{caption:"Search", buttonicon:"ui-icon-search", onClickButton:customSearch, position: "last", title:"", cursor: "pointer"}); function customSearch() { //Custom Search Logic } 在网格 ...
-
是jquery $(这个)被jqgrid gridunload方法打破了吗?(Is Jquery $(this) broken by jqgrid gridunload method?)[2023-02-22]
清理未来的读者: 所以这里有一种工作小提琴: http : //jsfiddle.net/s3MsW/10/ 我说“有点”因为底层代码是可疑的(jqGrid本身)。 但是我们马上就会到达那里......第一件事:如果你为插件记录“this”,它实际上是jQuery对象,而不是节点。 从理论上讲,我们可以用你的原始代码替换$(this) ,并且一切都应该有效。 除外。 实际上,您可以使用this来卸载Grid,但是函数会将this作为不指向呈现页面上的表的引用。 有一些方法可以显示旧节点仍然存在( http: ... -
首先,检查您是否正在获取数据。 使用FF / Chrome / IE中的开发控制台,您可以使用F12访问它,您可以看到网络选项卡并检查您的请求和响应。 在那里你可以看到javascript代码上的任何错误,检查控制台输出 First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your re ...
-
我找到了另一种方法来使用以下方法在jqGrid的标题中获取填充的下拉列表。 JSP代码: - {name:'Age',index:'age',width:120,hidden:false,search:true,stype:'select',searchoptions:{value:'${age}'}}, 在java代码中我修改了我的方法,该方法负责获取jsp,其中我有我的jqGrid代码。 Java代码 - @RequestMapping({"/appPage.html"}) publi ...
-
发现它,yeap victor是正确的,虽然我没有及早检查回来,但是我用setGridParam做了它... jQuery("#list").jqGrid('setGridParam',{url:"AJAX/JSON/json_member_mail_sent.aspx?message_mask="+message_mask,page:1}).trigger("reloadGrid"); found it, yeap victor is right though I didn't check back ...
-
简单地在页面中的那一点添加类是不够的。 您的输入是在应用蒙版后创建的。 您可能希望使用beforeEditCell事件将掩码应用于单元格,使其成为可编辑的,并将input元素插入到DOM中。 不确定这是否是最好的事件,但看起来是文档中的正确事件: http : //www.trirand.com/jqgridwiki/doku.php?id = wiki: cell_editing 希望有所帮助。 Simply adding the class at that point in the page is in ...
-
最好是使用免费的jqgrid最新版本。 你可以从下载 http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js 以下是如何使jquery自动完成工作在最新的免费jqgrid中的示例代码,该jqgrid在jqgrid中使用jqm autocomplete你犯了很多小错误: 所有JavaScript文件只能包含一次。 你下载了例如jquery.ui.core.js ,然后包含它的jquery-ui-1.8.5.custom.min.js 。 你加载了jquery.jqGrid.min.js twic等等。 在 jquery.jqGrid.min.js 之前必须包含grid.locale-en.js 你应该把你写在jQuery(document).ready(function () {/*you code mus be here*/});地方)中的所有Java ...