- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
jqGrid包说明:
? jquery.js is the jQuery library,
? jquery.jqGrid.js 主单元,包含的功能取决您的选择
grid.basic.js 主插件,其他插件包依赖于该插件正常运行
? grid.custom.js Grid高级插件功能包
? grid.formedit.js 用于表格编辑、增加、删除功能
? grid.inlinedit.js 线条编辑
? grid.subgrid.js一个处理表格的插件
? grid.postext.js 一个可以用来操作post数据的包
? jqModal.js 模态对话框的编辑
? jqDnR.js可拖拉的表格编辑
? themes 包含gird需要的样式表
功能描述:
jqGrid包主要用于将需要展示的数据动态的展示在页面的上,即动态画出表格,并封装了增、删、改、查、分类显示、在线编辑修改等功能。
关键使用说明:
导入jqGrid包,在首页属性里面添加如下包的信息
link rel=\stylesheet\ type=\text/css\ media=\screen\ href=\/SedSoft/jqGrid/themes/basic/grid.css\
link rel=\stylesheet\ type=\text/css\ media=\screen\ href=\/SedSoft/jqGrid/themes/jqModal.css\
script type=\text/javascript\ src=\/sedsoft/jqGrid/jquery.js\ /script
script type=\text/javascript\ src=\/sedsoft/jqGrid/jquery.jqGrid.js\ /script
script type=\text/javascript\ src=\/sedsoft/jqGrid/js/jqModal.js\ /script
script type=\text/javascript\ src=\/sedsoft/jqGrid/js/jqDnR.js\ /script
注:由于加载js包 会耗费大量资源,建议动态加载这些js包,优化页面初始化效率。
在页面上需要添加表格的地方, 增加
table id=list class=scroll/table
div id=pager class=scroll style=text-align:center;/div
/body
list表格id,pager为表格导航条id
写jqGrid函数
jQuery(document).ready(function(){
jQuery(#list).jqGrid({
url:example.php,
datatype: xml,
mtype: GET,
colNames:[Inv No,Date, Amount,Tax,Total,Notes],
colModel :[
{name:invid, index:invid, width:55},
{name:invdate, index:invdate, width:90},
{name:amount, index:amount, width:80, align:right},
{name:tax, index:tax, width:80, align:right},
{name:total, index:total, width:80, align:right},
{name:note, index:note, width:150, sortable:false} ],
pager: jQuery(#pager),
rowNum:10,
rowList:[10,20,30],
sortname: id,
sortorder: desc,
viewrecords: true,
imgpath: themes/basic/images,
caption: My first grid
});
});
以上代码基本可以将要展示的表格展示出来了,现在对一些属性说明:
jQuery(“#list”).jqGrid list为将要显示表格的table 的id
altRows : 设置表格显示斑马条纹属性,默认值为true
caption: 定义表格标题名
cellEdit: 设置表格单元是否可以编辑,默认值为true,详见cellEdit介绍
cellsubmit: 决定cell容器如何被保存,使用’remote’或者‘clientArray’,详见cellEdit
cellurl: 处理cell编辑的
文档评论(0)