jqGrid单元格编辑select联动示例

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

jqGrid:treeGrid邻接模型

评论(0)浏览(2074)分类:jqGrid中文API
jqGrid:treeGrid邻接模型  如jqGrid treegrid配置中提到的,treeReader属性很重要。了解分层数据管理-邻接表模型模式的基本概念,将会更容易配置这个属性。treeReader配置  默认邻接模型的(adjacency model)treeReader配置如下treeReader = { level_field: level, parent_id_field: parent, // then why does your table use parent_id? leaf_field: isLeaf..

jqGrid单字段查询

评论(0)浏览(2072)分类:jqGrid中文API
jqGrid单字段查询  单字段查询从服务器查询数据,一次只对一个字段进行查询。使用这个方法构造一个模态表单,用户可以选择一个字段用于查询。这个方法使用url提交数据,自定义和工具栏查询方法不一样。不同就是提交的数据不是键值对,参考下面数据如何提交安装要使用这个模块,你需要在下载页面勾选Common, Form Edit, filter插件,下载地址:http://www.trira..

jqGrid显示和隐藏列示例

评论(0)浏览(2008)分类: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..

Grid作为Subgrid

评论(0)浏览(1996)分类:jqGrid中文API
Grid作为Subgrid  此方法和事件比较像解决方案,而不是专门的方法。作为子表格的替代,调用父表格subGrid方法创建的为一个表格,不是子表格,拥有父表格的所有属性和功能,只是出现在展开记录的下面,效果如下图所示安装要使用这个方法,需要在下载页面勾选Subgrid后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.subgrid.js在..

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

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

jqGrid自定义查询

评论(0)浏览(1707)分类:jqGrid中文API
jqGrid自定义查询  为grid构造一个自定义查询表单,此方法使用jqGrid使用的url地址用于提交数据,提交查询后,键值对对象提交到服务器,这个数据被附加到postData参数中,仅提交输入过内容的字段。清空表单时,查询内容将会从postData中删除。提交服务器的数据,不是name,而是colModel中配置的index,当找不到index配置时才使用name,同时附加额外的数据 a _s..

jqGrid如何使用jQuery UI

评论(0)浏览(1451)分类: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布局结构

评论(0)浏览(1432)分类:jqGrid中文API
jqGrid布局结构jqGrid布局结构有下面4个部分组成Caption layer(标题)Header layer(表头)Body layer(表格数据内容)Navigation layer(导航)Caption layer :包含了代表数据的常见信息。Header layer:表格列头信息。Body layer:通过column model配置显示从服务器下载的信息Navigation layer:通过请求得到的数据得到其他的信息和计算后得到的导航信息。..

jqgrid自动滚动数据内容demo

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

jqGrid如何设置上下导航条

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

jqGrid自定义格式化类型

评论(0)浏览(1299)分类:jqGrid中文API
jqGrid自定义格式化类型  可以对指定的列定义自定义格式化函数。注意配置这个值可以为函数名称,不能用引号括起或者以()结束,如格式化函数名称为func,不能配置formatter为func或者func(),直接func即可,可以直接配置一个匿名函数,示例jQuery(#grid_id).jqGrid({// ... colModel: [ // ... {name:'price', index:'price', width:60..

jqGrid导入和导出

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

jqGrid查询配置

评论(0)浏览(1134)分类:jqGrid中文API
jqGrid查询配置  jqGrid的列可以用于查询表单。表格查询按照规则从服务器加载数据。目前没有查询本地数据的模块当datatype设置为local。所有查询都是通过服务器(Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching is done server side).有4中查询方法工具栏查询( toolbar se..

jqGrid,强大的jquery表格插件

评论(0)浏览(982)分类:jqGrid中文API
jqGrid,强大的jquery表格插件  jqGrid是一款基于jQuery框架功能强大表格显示数据处理插件,使用jqGrid通过jquery ajax加载动态页返回的json或者xml等其他数据,实现数据表格的显示。 底层表格(Basic Grid):jqGrid开发简单,用户很容易安装管理。CSS控制样式:jqGrid兼容jquery UI主题。开发者可以使用UI CSS Framework改变表格的皮肤。速度快:最新版本渲染引擎改进加..

jqGrid datatype配置为function

评论(0)浏览(910)分类:jqGrid中文API
jqGrid datatype配置为functionjqGrid datatype配置为function  设置为function实际并不是定义数据类型,而是如何处理从服务器返回的数据(可能未xml或者json)。 配置的方法需要(或者可以)调用addXMLData, addJSONData或者addRowData方法当接收到数据时。如果需要分页,可以在此调用 jqGrid实例名称setGridParam({lastpage: your_number}) 定义页数。  示例datatype : ..

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

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

jqGrid自定义数据

评论(0)浏览(844)分类:jqGrid中文API
jqGrid自定义数据jqGrid自定义数据  在一些情况下,我们需要请求返回一些自定义的数据,这些数据不在jqGrid中显示,而是在一些后续的操作或者显示一些和jqGrid有联系的附加的信息在html页面,为了实现这些共可以使用userdata配置。  xmlReader的定义如下xmlReader: { // ... userdata: userdata,// ...}  指定从哪个节点包含自定义数据,注意:自定义数据..

jqGrid集成jQuery UI介绍

评论(0)浏览(546)分类: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 XML数据源读取器选项配置

评论(0)浏览(542)分类:jqGrid中文API
jqGrid XML数据源读取器选项配置  本章介绍jqGrid配置datatype为xml/xmlstring数据类型时,如何设置xml数据的读取器。  默认xml数据读取器默认配置如下jQuery(#gridid).jqGrid({//... xmlReader : { root: rows, row: row, page: rowspage, total: rowstotal, records : rowsrecords, repeatitems: true, cell: cell, i..

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

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

jqGrid获取选中数据行

评论(0)浏览(528)分类: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 3.8.x 升级到 4.0.0相关更新

评论(0)浏览(507)分类:jqGrid中文API
jqGrid 3.8.x 升级到 4.0.0相关更新1.grid.postext.js 不再集成在jqGrid核心js文件里面  这个模块被移动到插件目录中独立出来,如果要使用这个功能需要手动导入到页面中。如果你想升级你的代码,修改作出如下的修改。(旧版本的jqGrid直接扩展了jQuery的对象方法,很容易和其他插件方法名称冲突,所以进行了改进,通过扩展jQuery的jqGrid方法来调用jqGrid内置的方法)旧方法替代..

jqGrid提交数据模块

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

将表格转为jqGrid

评论(0)浏览(254)分类: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..