`

jqGrid表格插件源码概览

阅读更多

作为jQuery的表格插件,jqGrid我觉得是最好的,此文有一定jqGrid基础的阅读较好

此文一为大家阅读,二为自己笔记,如有差错,请不吝赐教!

打开jqGrid的src文件夹如下

Css是样式表

I18n是本地化文件

接下来的就是主要的js文件了

 

clip_image002

 

一,非jqGrid自有

jqDnR.js Drag'n'Resize 拖拽和拉伸

jquery.searchFilter.js 查询

jquery.fmatter.js 格式化

JsonXml.js xml转换json,纯js,非jquery插件

jqModal.js 遮罩层,jquery插件

 

二,jqGrid基本js

  grid.base.js 结构:

  1):为jquery扩展一个jqrid函数 $.extend($.jgrid,{}),用法如$.jgrid.htmlDecode(value)

  2):制作插件主体(80行附近) $.fn.jqGrid = function( pin ) {}

主要包含:

1,排序 可否排序由colModel中的sortable决定

2,subGrid

3,ondblClickRow function(rowid){}

4,onRightClickRow function(rowid){}

5,onSelectRow function(rowid){}

6,multiselect 多选,默认false

7,treeGrid

8,toolbar 可自定义的工具栏

9,scroll 此项与rowlist[]互斥,当scroll为true时,rowlist[]即时有值也将置为rowlist[]的初始空值

10,rownumbers 自动生成客户端序列号

主体功能区在377行左右开始声明至1169行左右结束,主要的功能都包含在其中的代码

1195行至1219行左右声明了默认的xmlReader和jsonReader构造,可以在设置jqGrid参数时修改,如:jsonReader: { repeatitems : true, cell:"cell", id: "keyid" }

1124行至1250行左右开始构造grid的表头,并在1250行至1351行左右为表头绑定各项功能

  3):对外开放的API接口(1619行附近) $.jgrid.extend({})

  主要API接口为getGridParam和setGridParam,可以得到或设置参数

  getGridParam方法:

getGridParam("url") the current url from options array 获取当前的AJAX的URL

getGridParam("sortname") the name of last sorted column 排序的字段

getGridParam("sortorder") the last sorted order 排序的顺序

getGridParam("selrow") the id of the selected row, null if row is not selected 很有用,得到选中行的ID

getGridParam("page") the current page number. 当前的页数

getGridParam("rowNum") the current number of requested rows 当前有多少地

getGridParam("datatype") the current datatype. 得到当前的datatype

getGridParam("records") the current number of records in grid. 得到总记录数

getGridParam("selarrrow") array of id's of the selected rows when multiselect options is

true. Empty array if not selection. 可以多选时,返回选中行的ID

  setGridParam方法:

setGridParam({url:newvalue}) Parameters: url - string Set a new url, replacing the older.

  可以设置一个grid的ajax url,可配合trigger("reloadGrid")使用

setGridParam({sortname:newvalue}) Parameters: sortname - string Set a new sort name

  设置排序的字段

setGridParam({sortorder:newvalue}) Parameters: sortorder - string (asc or desc) Set a new sort order

  设置排序的顺序asc or desc

setGridParam({page:newvalue}) Parameters: page - integer >0 Set a new page number

  设置翻到第几页

setGridParam({rowNum:newvalue}) Parameters: rownum - integer > 0 Set a new number of requested rows.

  设置当前每页显示的行数

setGridParam({datatype:newvalue}) Parameters:datatype-string xml,json.xmlstring,jsonstring, clientSide) Set a new datatype.

  设置新的datatype(xml,json)

 

  grid.loader.js    加载所有必要的jqGrid组件,This file should be used if you want to debug,如果需要debug就需要加载此项

  grid.formedit.js   与form相关的增加,删除,修改,查看,刷新,查询,FormToGrid,GridToForm等,这个文件有较多的扩展功能

 

三,jqGrid colModel表体结构配置

align       left,center,right

detefmt     date:true

editable     flase

editoptions   edittype为先决条件,此为值,[]

editrules     编辑规范

edittype     text,textarea,select,checkbox,password

formatoptions

formatter

hidedlg     false (appear in the modal dialog)

hidden     false 在加载时是否隐藏列

index      为排序用,最方便的是设为数据库字段

jsonmap     声明json的格式

key        false

label       当没有设置colNames时,在列里用此代替,此项也为空时,就是name代替

name       必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性

resizable      true,列宽可调节

search       true

sortable     true

sorttype     text,int,float,date

width      150

xmlmap     声明xml的格式

--------------------------------------------------------------------------------------------------------------------------------

另:当要grid的不是table结构,如是一个div时,会出错

分享到:
评论

相关推荐

    jqGrid插件--JQuery表格插件

    `src`通常包含jqGrid的核心源码,`js`和`css`包含所需的JavaScript库和样式文件,而`plugins`则包含各种扩展功能的插件代码。通过正确配置和组合这些资源,可以构建出功能完备且用户体验优秀的数据网格。

    jqGrid插件源码

    在"jqGrid插件源码"中,我们可以深入理解其内部工作机制,学习如何自定义功能或优化性能。源码分为以下几个关键部分: 1. **src**:这是jqGrid的主要源代码目录,包含了核心功能的JavaScript文件。在这里,你可以...

    PHP+jqGrid表格插件实现增删改查

    jqGrid是一款基于jQuery的表格插件,它提供了一套强大的功能,如数据分页、排序、搜索和编辑。jqGrid支持AJAX无刷新加载,使得用户可以在不刷新整个页面的情况下,进行数据的增删改查操作,提高了用户体验。此外,...

    jqGrid表格插件(带中文/英文文档)

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它支持多种功能,如数据分页、排序、过滤、编辑和 AJAX 交互。这款插件基于 jQuery 库,使得开发者能够轻松地在网页上创建交互式、...

    jquery表格插件jqgrid

    **jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件,它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展,专为处理大量数据和实现复杂的表格...

    jqGrid表格数据展示插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于网页数据的展示、编辑和管理。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得网页上的表格操作变得更加便捷和高效。在...

    jqgrid 表格插件 CURD操作完整例子

    主要参考www helloweba com 作者:月光光 qGrid表格应用 读取与查询数据 还有其他网上作者无私奉献心得 鄙视官方jqgrid Demo 修改了代码中的错误 增加了编辑功能 和jqueryUI 日历datepicker插件

    jqGrid 3.5源码+DEMO+DOC

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的...

    jqGrid表格插件学习(一) 第一个Demo

    以下是对jqGrid插件的一些关键知识点的详细说明: 1. **安装与引入**: 在开始使用jqGrid前,你需要下载jqGrid的库文件,包括JavaScript文件(如`grid.base.js`, `grid.common.js`等)和CSS文件。这些文件可以从...

    jqGrid表格内容查询读取代码.zip

    jqGrid是一款功能强大的JavaScript库,专门用于创建交互式的表格,其在Web开发中广泛应用于数据展示和管理。这款开源插件基于jQuery库,提供了一系列高级功能,如分页、排序、筛选、编辑、添加和删除数据等。在...

    MVC4网站中集成jqGrid表格插件-示例源代码.zip

    在本文中,我们将深入探讨如何在ASP.NET MVC4框架中集成jqGrid表格插件,并通过一个实际的示例源代码来展示具体实现过程。jqGrid是一个功能强大的jQuery插件,用于创建交互式、数据丰富的网格视图,适用于各种Web...

    MVC4网站中集成jqGrid表格插件-示例源代码

    在本文中,我们将深入探讨如何在MVC4(Model-View-Controller)应用程序中集成jqGrid,这是一个功能强大的JavaScript表格插件,用于实现数据的动态显示和管理。jqGrid允许开发人员创建高度交互式和可定制的数据网格...

    jqgrid表格插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、分页、搜索、编辑等,使得开发者能够轻松创建交互式的表格。本篇文章将深入探讨...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    jqgrid表格

    jqGrid是一款功能强大的JavaScript数据网格插件,常用于创建交互式的数据展示和管理表格。它提供了丰富的特性,如数据分页、排序、过滤、编辑、导入导出等,支持多种数据源,包括本地数据和远程服务(如JSON、XML、...

    jquery导出jqgrid表格

    之前网上没找到现成的jqgrid表格前台导出插件,都或多或少带后台,也不想换表格插件,所以参照extjs自己改了个前台导出插件,支持多表头和分组table带表头导出,引用方法文件有详细注释,直接能用,如有不足还请见谅...

    jqGrid实例下载(数据交互,统计,时间插件都已实现)

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web应用中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、分页、搜索、编辑等,支持JSON、XML、CSV等多种数据格式,适用于创建复杂的网格...

    jqgrid jquery 表格插件

    **jqGrid jQuery 表格插件** jqGrid是一款基于jQuery的开源数据网格插件,它为Web应用程序提供了强大的数据展示和管理能力。这个插件深受开发者喜爱,因为它提供了丰富的功能和自定义选项,使得在网页上创建交互式...

Global site tag (gtag.js) - Google Analytics