Web开发网 > Web前端开发 > Web前端开发框架 > jqGrid中文API > 热门博文
格式化程序支持在表单,行,单元格编辑中将内容以自定义想要的格式来显示。格式化程序有2种形式,预定义的和自定义的,这节我们介绍的为预定义的格式化程序。jqGrid模块需求要使用格式化特性,需要在下载页面勾选 Formatter module后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。语言选项格式化选项语言在语言文件中定..
如jqGrid treegrid配置中提到的,treeReader属性很重要。了解分层数据管理-嵌套集合模式的基本概念,将会更容易配置这个属性。treeReader配置 默认嵌套集合模型的(nested set model)treeReader配置如下treeReader : { level_field: level, left_field:lft, right_field: rgt, leaf_field: isLeaf, expanded_field: expa..
单字段查询从服务器查询数据,一次只对一个字段进行查询。使用这个方法构造一个模态表单,用户可以选择一个字段用于查询。这个方法使用url提交数据,自定义和工具栏查询方法不一样。不同就是提交的数据不是键值对,参考下面数据如何提交安装要使用这个模块,你需要在下载页面勾选Common, Form Edit, filter插件,下载地址:http://www.trira..
如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..
此方法和事件比较像解决方案,而不是专门的方法。作为子表格的替代,调用父表格subGrid方法创建的为一个表格,不是子表格,拥有父表格的所有属性和功能,只是出现在展开记录的下面,效果如下图所示安装要使用这个方法,需要在下载页面勾选Subgrid后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.subgrid.js在..
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构造一个自定义查询表单,此方法使用jqGrid使用的url地址用于提交数据,提交查询后,键值对对象提交到服务器,这个数据被附加到postData参数中,仅提交输入过内容的字段。清空表单时,查询内容将会从postData中删除。提交服务器的数据,不是name,而是colModel中配置的index,当找不到index配置时才使用name,同时附加额外的数据 a _s..
jqGrid使用本地数据时,当jqGrid配置的rowNum小于本地总数据量(records属性记录总数据,可以通过records获取到本地总数据量),调用getRowData方法获取到的只是显示的部分内容,而本地所有数据行。 如果是通过data或者datastr配置的本地数据,获取所有数据很简单,调用$('#gridid').jqGrid('getGridParam','data..
可以对指定的列定义自定义格式化函数。注意配置这个值可以为函数名称,不能用引号括起或者以()结束,如格式化函数名称为func,不能配置formatter为func或者func(),直接func即可,可以直接配置一个匿名函数,示例jQuery(#grid_id).jqGrid({// ... colModel: [ // ... {name:'price', index:'price', width:60..
jqGrid布局结构有下面4个部分组成Caption layer(标题)Header layer(表头)Body layer(表格数据内容)Navigation layer(导航)Caption layer :包含了代表数据的常见信息。Header layer:表格列头信息。Body layer:通过column model配置显示从服务器下载的信息Navigation layer:通过请求得到的数据得到其他的信息和计算后得到的导航信息。..
如果jqgrid一次行加载的数据太多,而不想通过拖动滚动条来查看数据,需要javascript代码自动滚动滚动条,实现数据自动滚动展示,可以通过下面的办法实现。 jqgrid数据加载生成完毕后(gridComplete事件),获取数据数据的容器,用计时器来设置容器的scrollTop来实现。jqgrid的数据容器样式为.ui-jqgrid-bdiv,获取这个div。 jqgrid自动..
Sortable Columns(可排序列) 这个方法已经集成在jqGrid中,所有不需要附加的其他内容。这个方法通过鼠标点击对列表头对行进行重新排序,只需要在设置jqGrid的sortable为true即可,示例代码如下jQuery(document).ready(function(){ jQuery(#list).jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET..
有些时候将表格的全部配置导入或者导出到另外一种格式将比较有用在服务器端构造的表格,在排序或者分页后可以重新构造,所以如果需要,不同的配置可以立马启用可以通过服务器端构造表格视觉,然后从xml字符中加载表格的配置可以作为xml保存到数据库中,然后从数据库中加载 jqGrid可以一次性加载配置和数据。安装要使用这个方法,需要在下..
jqGrid的删除添加等工具栏目条默认是放在jqGrid数据项底部的,如果要想在jqGrid顶部同时放置工具条,需要用jquery克隆工具栏,然后添加到顶部的工具栏容器中,经测试这样克隆后添加的工具条相关事件也会一起克隆了,虽然控件id会出现重复。 jqGrid如何设置上下导航条源代码如下 div id=pp1/div table id =grid /table ..
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自定义数据 在一些情况下,我们需要请求返回一些自定义的数据,这些数据不在jqGrid中显示,而是在一些后续的操作或者显示一些和jqGrid有联系的附加的信息在html页面,为了实现这些共可以使用userdata配置。 xmlReader的定义如下xmlReader: { // ... userdata: userdata,// ...} 指定从哪个节点包含自定义数据,注意:自定义数据..
jqGrid datatype配置为function 设置为function实际并不是定义数据类型,而是如何处理从服务器返回的数据(可能未xml或者json)。 配置的方法需要(或者可以)调用addXMLData, addJSONData或者addRowData方法当接收到数据时。如果需要分页,可以在此调用 jqGrid实例名称setGridParam({lastpage: your_number}) 定义页数。 示例datatype : ..
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 API已经明说过,编辑模式下不要调用getRowData,要不得到数据行列信息包含的是单元格的innerHTML,而不是实际输入控件的值。参考jqGrid的源代码,getRowData的实现方法是遍历tr获取td的innerhTML。 getRowData在单元格和行编辑模式下受到影响,在表单编辑模式没问题,因为表单没有直接修改jqGrid生成输入对象,而是在新的控件中生..
1.grid.postext.js 不再集成在jqGrid核心js文件里面 这个模块被移动到插件目录中独立出来,如果要使用这个功能需要手动导入到页面中。如果你想升级你的代码,修改作出如下的修改。(旧版本的jqGrid直接扩展了jQuery的对象方法,很容易和其他插件方法名称冲突,所以进行了改进,通过扩展jQuery的jqGrid方法来调用jqGrid内置的方法)旧方法替代..
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配置datatype为xml/xmlstring数据类型时,如何设置xml数据的读取器。 默认xml数据读取器默认配置如下jQuery(#gridid).jqGrid({//... xmlReader : { root: rows, row: row, page: rowspage, total: rowstotal, records : rowsrecords, repeatitems: true, cell: cell, i..
有些时候需要精确操作提交的数据对象。setGridParam有些时候不能满足要求,所以需要提交数据模块。作者Paul Tiseo安装要使用这个方法,需要在下载页面勾选Post methods模块后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.postext.js在src目录中。描述这个模块的主要目的是操作传递给夫妻的数据和从服务器获..
jqGrid没有数据时,标题超出容器部分无法滚动,如下图所示jqGrid有数据,可以出现水平滚动条jqGrid无数据,没有滚动条,无法滚动显示其他部分页头 因为jqGrid页头使用js来移动的,页头容器默认overflow:hidden,只需要添加loadComplete事件判断没有数据往head添加样式允许出现水平滚动条即可。本示例居于4.6版本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.. 首页 上一页 [1] [2] 下一页 尾页 2/2页,每页显示30条,共55条相关记录