jqGrid没有数据标题超出容器部分无法滚动解决办法

评论(0)浏览(504)分类:jqGrid中文API
jqGrid没有数据标题超出容器部分无法滚动解决办法  jqGrid没有数据时,标题超出容器部分无法滚动,如下图所示jqGrid有数据,可以出现水平滚动条jqGrid无数据,没有滚动条,无法滚动显示其他部分页头  因为jqGrid页头使用js来移动的,页头容器默认overflow:hidden,只需要添加loadComplete事件判断没有数据往head添加样式允许出现水平滚动条即可。本示例居于4.6版本jqgrid,其他版本注意修改..

jqGrid获取选中数据行

评论(0)浏览(854)分类:jqGrid中文API
jqGrid获取选中数据行  jqGrid没有提供类似easyui datagrid的getChecked/getSelected方法获取勾选的或者选中的数据行api,所以jqGrid要获取multiselect为true时被勾选的记录,需要自己遍历勾选的checkbox获取id后通过getRowData方法获取数据行。  jqGrid获取选中数据行源代码如下html headmeta http-equiv=content-type content=text/html;charset=utf-8 /tit..

jqGrid显示和隐藏列示例

评论(0)浏览(1863)分类:jqGrid中文API
jqGrid显示和隐藏列示例  jqGrid显示和隐藏列示例,相关配置查看:jqGrid显示和隐藏列html headmeta http-equiv=content-type content=text/html;charset=utf-8 /titlejqGrid显示和隐藏列示例/titlelink href=css/ui.jqgrid.css rel=stylesheet type=text/css /link href=css/jquery-ui-1.8.2.custom.css rel=stylesheet type=text/css /script src=js/jquery-1.7..

jqGrid预定义格式化类型

评论(0)浏览(2883)分类:jqGrid中文API
jqGrid预定义格式化类型  格式化程序支持在表单,行,单元格编辑中将内容以自定义想要的格式来显示。格式化程序有2种形式,预定义的和自定义的,这节我们介绍的为预定义的格式化程序。jqGrid模块需求要使用格式化特性,需要在下载页面勾选 Formatter module后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。语言选项格式化选项语言在语言文件中定..

jqGrid表单编辑配置

评论(1)浏览(16907)分类:jqGrid中文API
jqGrid表单编辑配置jqGrid表单编辑jqGrid支持一个浮动的表单用于查看,添加,编辑,删除和查询表格数据,下面为添加记录的效果图  在你的项目中可以使用模态盒子和行编辑。其中,行编辑只能用于编辑已经存在的行,不能用于查询,删除,添加数据。实际应用中,不推荐同时使用这2中方法,因为选择同一行时这2者存在冲突(在这种情况下,当你选择一行来编辑,点击编..

jqgrid自动滚动数据内容demo

评论(0)浏览(1440)分类:jqGrid中文API
jqgrid自动滚动数据内容demo  如果jqgrid一次行加载的数据太多,而不想通过拖动滚动条来查看数据,需要javascript代码自动滚动滚动条,实现数据自动滚动展示,可以通过下面的办法实现。  jqgrid数据加载生成完毕后(gridComplete事件),获取数据数据的容器,用计时器来设置容器的scrollTop来实现。jqgrid的数据容器样式为.ui-jqgrid-bdiv,获取这个div。  jqgrid自动..

jqGrid行编辑配置

评论(0)浏览(19174)分类:jqGrid中文API
jqGrid行编辑配置jqGrid行编辑配置,方法,事件  行编辑可以在行修改后更新数据,如下图所示  用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示。不可编辑的列,如id,不会转为可输入单元,而是保持不变。可以通过配置colModel来实现。完成修改后,按下enter键提交数据到服务器。软件要求和安装  要使用行编辑功能,需要在j..

jqGrid如何设置上下导航条

评论(0)浏览(1254)分类:jqGrid中文API
jqGrid如何设置上下导航条  jqGrid的删除添加等工具栏目条默认是放在jqGrid数据项底部的,如果要想在jqGrid顶部同时放置工具条,需要用jquery克隆工具栏,然后添加到顶部的工具栏容器中,经测试这样克隆后添加的工具条相关事件也会一起克隆了,虽然控件id会出现重复。  jqGrid如何设置上下导航条源代码如下 div id=pp1/div table id =grid /table ..

jqGrid获取本地查询后匹配的所有数据

评论(0)浏览(1642)分类:jqGrid中文API
jqGrid获取本地查询后匹配的所有数据  jqGrid使用本地数据时,当jqGrid配置的rowNum小于本地总数据量(records属性记录总数据,可以通过records获取到本地总数据量),调用getRowData方法获取到的只是显示的部分内容,而本地所有数据行。  如果是通过data或者datastr配置的本地数据,获取所有数据很简单,调用$('#gridid').jqGrid('getGridParam','data..

jqGrid方法再次执行无效无法刷新数据

评论(0)浏览(6505)分类:jqGrid中文API
jqGrid方法再次执行无效无法刷新数据  今天在csdn看到一个使用jqGrid构造方法执行刷新jqGrid表格操作的问题,将jqGrid构造写成一个函数,然后重复调用这个函数重构jqGrid来实现刷新,但是没有效果。  其实jqGrid提供了刷新的功能$('#gridi').trigger('reloadGrid')  不知道这个童鞋有现成的方法不用,而是需要重构jqGrid,这样效率那么低,需要重新生成jqGri..

jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例

评论(0)浏览(4493)分类:jqGrid中文API
jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例  之前有写过一篇jqGrid单元格编辑select联动示例的文章,通过使用自定义编辑类型来实现依据某字段值加载select选项,此文将通过setColProp方法来动态修改colModel配置中的editoptions,dataUrl来实现select数据加载,相关文件去jqGrid单元格编辑select联动示例文中查看详细,本文就补贴出重复内容,只贴出js实现逻辑。  不过jqGrid单元格编..

jqGrid单元格编辑为select取值和显示示例

评论(0)浏览(5143)分类:jqGrid中文API
jqGrid单元格编辑为select取值和显示示例  jqGrid设置某个单元格的编辑类型为select,select的option为键值对应的格式(value和text不一样),当此单元格转为文本模式后,单元格显示的内容为option的text内容,并且对应单元格的数据存储也被更新为text,而一般情况下我们希望存储的数据为value,而单元格显示的内容为text。示例代码及效果图如下html headmeta http-equiv=content-..

jqGrid单元格自定义显示设置及getRowData获取原始数据示例

评论(0)浏览(4360)分类:jqGrid中文API
jqGrid单元格自定义显示设置及getRowData获取原始数据示例  jqGrid要格式化某个单元格的显示,可以使用colModel的formatter配置,如果仅仅用于显示,而不进行编辑或者调用getRowData获取数据,不会出现什么大问题,示例代码如下data.txt{list:[{id:1,name:test1,sex:1},{id:2,name:test2,sex:0}]}html headmeta http-equiv=content-type content=text/html;charset=utf-8 /titlejqGrid单元格自定义..

jqGrid单元格编辑select联动示例

评论(0)浏览(2961)分类:jqGrid中文API
jqGrid单元格编辑select联动示例  2013-09-18更新:更正colModel不可动态修改,colModel配置可以动态的通过setColProp方法进行修改,包括editoptions配置。具体示例查看这篇文章:jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例  jqGrid启用单元格编辑,当设置编辑元素为select,如何依据另外一列的值来动态加载select的option。如省市联动,修改市的内容..

jqGrid隐藏表头

评论(0)浏览(4585)分类:jqGrid中文API
jqGrid隐藏表头  jqGrid如何隐藏表头,jqGrid的表头放在一个样式为ui-jqgrid-hdiv的div中,所以如果哪个jqGrid不需要表头,可以添加gridComplete事件,然后找到样式为ui-jqgrid-hdiv的div,隐藏起来就行,效果对比 gridComplete: function () {//this对象为数据列表表格,所以找到数据内容表格和表头的容器后在查找ui-jqgrid-hdiv,表头容器 $(this).close..

jqGrid限制某些列只有在特定条件下才能编辑

评论(0)浏览(4561)分类:jqGrid中文API
jqGrid限制某些列只有在特定条件下才能编辑  jqGrid编辑某行数据时,如何限制某些列的数据只有满足一些特定的条件下时才允许编辑,下面为示例,单元格编辑,行编辑和表单编辑。jqGrid单元格编辑示例  配置beforeEditCell,判断这个单元格是否为要限制的编辑的列,是的话不满足条件则setTimeout restoreCell还原为未编辑状态(会有闪动,因为要转为input后再还原为文本显示)或者设置输..

jqGrid单元格/行编辑模式下getRowData如何获取数据行

评论(0)浏览(834)分类:jqGrid中文API
jqGrid单元格/行编辑模式下getRowData如何获取数据行  jqGrid API已经明说过,编辑模式下不要调用getRowData,要不得到数据行列信息包含的是单元格的innerHTML,而不是实际输入控件的值。参考jqGrid的源代码,getRowData的实现方法是遍历tr获取td的innerhTML。  getRowData在单元格和行编辑模式下受到影响,在表单编辑模式没问题,因为表单没有直接修改jqGrid生成输入对象,而是在新的控件中生..

jqGrid获取服务服务器返回的所有数据

评论(0)浏览(6315)分类:jqGrid中文API
jqGrid获取服务服务器返回的所有数据  当jqGrid配置的rowNum小于服务器返回的总数据量(records属性记录总数据),调用getRowData方法获取到的只是显示的部分内容,而非服务器返回的所有数据行。  要想获取jqGrid返回的所有数据行,可以添加loadComplete事件,此事件参数只有一个(类型取决于datatype的配置,如果为json,则是服务器返回的json格式的字符串,转为json对象后的。..

jqGrid4.0最新版本中文API

评论(4)浏览(9027)分类:jqGrid中文API
jqGrid4.0最新版本中文API  jqGrid4.0最新版本中文API,直接从http://www.trirand.com/jqgridwiki /doku.php?id=wiki:jqgriddocs翻译来的,部分可能翻译得不是好理解,直接硬翻译出来的,呵呵。。由于不常用,没有全部测试所 有配置,要不翻译不好的部分应该可以自己组织文字来描述。jqGrid一些疑难问题和解决方案jqGrid获取服务服务器返回的所有数据jqGrid获取本地查询..

jqGrid如何使用jQuery UI

评论(0)浏览(1435)分类:jqGrid中文API
jqGrid如何使用jQuery UISortable Columns(可排序列)  这个方法已经集成在jqGrid中,所有不需要附加的其他内容。这个方法通过鼠标点击对列表头对行进行重新排序,只需要在设置jqGrid的sortable为true即可,示例代码如下jQuery(document).ready(function(){ jQuery(#list).jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET..

jqGrid集成jQuery UI介绍

评论(0)浏览(612)分类:jqGrid中文API
jqGrid集成jQuery UI介绍  jqGrid为jQuery的一个插件,所以一些情况下可以使用jQuery一些辅助插件,所以为什么在这里讨论 jQuery UI类库。要求和安装jqGrid要使用jQuery UI这个功能,需要在head标签内将jQuery UI类库导入到当前页面。如何下载 jQuery UI library 参考这里: here。下载完jQuery UI后,页面结构示例如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 St..

jqGrid提交数据模块

评论(0)浏览(530)分类:jqGrid中文API
jqGrid提交数据模块  有些时候需要精确操作提交的数据对象。setGridParam有些时候不能满足要求,所以需要提交数据模块。作者Paul Tiseo安装要使用这个方法,需要在下载页面勾选Post methods模块后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.postext.js在src目录中。描述这个模块的主要目的是操作传递给夫妻的数据和从服务器获..

将表格转为jqGrid

评论(0)浏览(363)分类:jqGrid中文API
将表格转为jqGrid描述将存在的html表格转为grid作者Peter Romianowski安装要使用这个方法,需要在下载页面勾选Table to Grid模块后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.tbltogrid.js在src目录中。调用方式tableToGrid(selector, options)此方法为函数,不是方法。方法参数说明selector(string) :有效的table选择器(cs..

jqGrid导入和导出

评论(0)浏览(1426)分类:jqGrid中文API
jqGrid导入和导出  有些时候将表格的全部配置导入或者导出到另外一种格式将比较有用在服务器端构造的表格,在排序或者分页后可以重新构造,所以如果需要,不同的配置可以立马启用可以通过服务器端构造表格视觉,然后从xml字符中加载表格的配置可以作为xml保存到数据库中,然后从数据库中加载  jqGrid可以一次性加载配置和数据。安装要使用这个方法,需要在下..

jqGrid页头分组

评论(0)浏览(4305)分类:jqGrid中文API
jqGrid页头分组通用规则页头分组就是在表头行上增加附加的列,将需要分组列归并到一起,效果如下  有2种类型的分组方式,colSpan启用或者禁用。默认为禁用,没有分组的列表头上增加一个空白的行,如上所示的Notes列。启用colSpan,那么不会在没有分组的列上增加空白行,此列的表头作为一个整体(如上面的Notes列的2行合并到一起,如最下面那张图所示)下面将..

jqGrid工具栏查询

评论(0)浏览(2958)分类:jqGrid中文API
jqGrid工具栏查询  这个方法在grid表头下面构造搜索表单。当表头改变宽度,搜索元素也会自动调整大小适应新表头宽度。此方法使用jqGrid配置的url作为查询服务器获取数据的接口。当执行查询时,键值对对象被提交到服务器(配置的url地址),此数据附加到postData参数,仅提交输入过内容的字段。当清空查询表单,附加的数据会从postData中删除。提交服务器的数据..

jqGrid数据分组

评论(0)浏览(3334)分类:jqGrid中文API
jqGrid数据分组通用规则  按照不同标准对数据进行分组,目前只支持一个级别的分组。在jqGrid中配置grouping:true,groupingView:{groupField:需要分组的列名称(来自colModel的name)},启用分组功能。  如果你希望正确分组,服务器返回的数据需要按照配置的列排序过。如果为本地模式(local mode ,data为数组),数据会自动分组(排序),不需要定义任何..

jqGrid frozencolumn

评论(0)浏览(3403)分类:jqGrid中文API
jqGrid frozencolumn  开发者很容易冻结/锁定jqGrid的一些列。锁定的列不会滚动出可见区域当滚动jqGrid的水平滚动条时,这样如果有很多列grid出现水平滚动条时,可以保持某些列始终可见。设置  首先需要设置哪些列需要冻结或者锁定,可以在colModel中设置frozen:true,下面为示例jQuery(#grid).jqGrid({//... colNames: ['Date', 'Client', ..

jqGrid treegrid配置

评论(0)浏览(8185)分类:jqGrid中文API
jqGrid treegrid配置  树形表格用于显示在jqGrid中显示分层数据。树形表格支持嵌套集合模型( Nested Set model )和邻接模型(Adjacency model)。描述嵌套集合模型的相关文章推荐http://ftp.ntu.edu.tw/MySQL/tech-resources/articles/hierarchical-data.htmlhttp://www.sitepoint.com/article/hierarchical-data-database分层数据管理-嵌套集合模型分层数据管理..

jqGrid:treeGrid嵌套集合模型

评论(0)浏览(2622)分类:jqGrid中文API
jqGrid:treeGrid嵌套集合模型  如jqGrid treegrid配置中提到的,treeReader属性很重要。了解分层数据管理-嵌套集合模式的基本概念,将会更容易配置这个属性。treeReader配置  默认嵌套集合模型的(nested set model)treeReader配置如下treeReader : { level_field: level, left_field:lft, right_field: rgt, leaf_field: isLeaf, expanded_field: expa..