作为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 排序的顺序
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表格插件(带中文/英文文档)
jqGrid表格插件——参数配置,使用举例
无刷新增删改查,网上都有免费下载,所以就不设置积分了。
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
最新jqgrid插件
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
MVC4网站中集成jqGrid表格插件-示例源代码
jquery表格插件
主要参考www helloweba com 作者:月光光 qGrid表格应用 读取与查询数据 还有其他网上作者无私奉献心得 鄙视官方jqgrid Demo 修改了代码中的错误 增加了编辑功能 和jqueryUI 日历datepicker插件
好用的jquery表格插件jqGrid。 本压缩包含源码和DEMO,还有一个3.4的DOC。
jqgrid表格,单元格合并,并显示,demo版本
代码简介:jqGrid表格内容查询读取代码是一款列表详细页表格布局,生成表格内容,表格查询代码等。
NULL 博文链接:https://lkf009.iteye.com/blog/1707013
表格插件
之前网上没找到现成的jqgrid表格前台导出插件,都或多或少带后台,也不想换表格插件,所以参照extjs自己改了个前台导出插件,支持多表头和分组table带表头导出,引用方法文件有详细注释,直接能用,如有不足还请见谅...
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能,该版本为官方最新版,附带Demo
实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网:http://www.xueit.com/asp.net/show-9768-3.aspx实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网:...
前端页面点击导出jqgrid表格为excel表格代码,有表格样式设置的代码,可以参考一下,这是我刚开始工作的时候写的,希望可以帮助像我一样的菜鸟。