欢迎光临
我们一直在努力

jqGrid表格插件源码概览

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

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

打开jqGrid的src文件夹如下

Css是样式表

I18n是本地化文件

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

一,非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

排序的顺序

很有用,得到选中行的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就需要加载此项

 

三,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时,会出错

文档方面的话,第一,只有英文的,我也没全看完,第二,只有到3.4的,所以没办法,自己来研究一下源码

在用scroll代替翻页时,效果是很牛比的,但是有些bug,谁用谁知道,继续看源码看能不能解决这个问题中

 

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《jqGrid表格插件源码概览》
文章链接:https://www.456zj.com/20185.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址