jqGrid用法汇总(全经典)


Posted in Javascript onJune 28, 2016

支持多种类型的数据集合作为数据源

jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组)

$("#grid1").jqgrid(
........
datatype: "xml",
........
);

下面则列举各种数据类型的格式

XML格式: 

<rows>
<page></page>
<total></total>
<records></records>
<row id="rowid">
<cell>value1</cell>
.........
<cell>valueN</cell>
</row>
</rows>

  json格式

{"page":"页号","rows":[{name1:'value1',name2:'value2',.....nameN:'valueN'},.... {....} ], "total":记录数,"records":总记录数}

数组格式

var datas=[
{name1:'value1',name2:'value2',..... nameN:'valueN'},
.... 
{....} 
];
//把数据添加到jqgrid里
for (var i = 0; i <= mydata.length; i++) {
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}

或者设置data属性

$("#grid1").jqgrid(
......
data:mydata,
datatype:'local',
.......
);

统计运算的功能

将footerrow设为true,绑定gridComplete事件。

$("#grid1").jqgrid(......
footerrow: true,
gridComplete: completeMethod,
.......);
function completeMethod()
{
var sum_amount=$("#grid1").getCol('amount',false,'sum');
var sum_tax=$("#grid1").getCol('tax',false,'sum');
var sum_total=$("#grid1").getCol('total',false,'sum');
$("#grid1").footerData('set', { name: '合计:', amount: sum_amount, tax: sum_tax, total: sum_total });
}

统计时利用getCol方法,第一个参数为colMode的name值,第二个设为false,否则会返回一个数组而不是但一个数据,第三个是设置统计方式,有'sum','avg'和'count'。

排序

只要单击列的标题,就可以对该列进行升序或降序的排序。设置该列是否允许排序,在列的属性里设置sortable,同时对于不同的数据类型,也需要设置其相应的排序类型sorttype,类型有int/integer 整型,float/number/currency 浮点型,date 日期,text 文本,function 定义函数来实现自定的排序规则。

$("#grid1").jqgrid( ........
colModel: [
.........
{ name: 'id', index: 'id', width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},
.............
],
........);

分组

var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
jQuery("#list48").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true}, 
{name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
{name:'note',index:'note', width:150, sortable:false} 
],
pager: "#plist48",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name']
},
caption: "Grouping Array Data"
});

还有复杂一点的排序,那还是上jqGrid Demos看看吧!

筛选

jqGrid的筛选并不是在grid里面的内容进行筛选,其实是对数据库里的数据筛选查询。

html:

<table id="s2list"></table>
<div id="s2pager"></div>

javascript:

jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false}); jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', 
onClickButton:function(){


 mygrid[0].toggleToolbar() 
}});jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',

 onClickButton:function(){ 


mygrid[0].clearToolbar() 
}}); jQuery("#s3list").jqGrid('filterToolbar');

增删改查工具栏及分页栏

jqGrid附带了分页栏,在分页栏上可以添加增加,修改,删除以及查询按钮。

在html多添加一个层,这个层就存放分页栏:

<div id="pager"></div>
$("#grid1").jqgrid(
......
pager:"#pager",
 //通过这属性还可以设置可选的页面大小

 rowList: [10, 20, 30],
.......
);//这里的 edit,add等就是对应编辑新增等按钮,通过设置布尔值来决定是否显示
jQuery("#grid1").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true});//或者用这种形式 

jQuery("#grid1").jqGrid('navGrid', '#pager',


{}, //options


{height: 280, reloadAfterSubmit: false }, // edit options


{height: 280, reloadAfterSubmit: false }, // add options


{reloadAfterSubmit: false }, // del options


{} // search options

);

记得要在colModel里给可供编辑的列的editable赋值为true,才可以编辑。

分页读取数据

既然上面已提及到分页,下面则介绍另一种分页方式,通过滚动条进行翻页。在这种分页方式中,数据库的所有数据并非一下子读取出来填充到grid中,而是通过滚动条的位置得出当前浏览到的哪一页数据,才从数据库读取那部分的数据。

$("#grid1").jqgrid(
......
//设置了这个才会根据滚动分页读取数据
scroll: 1,
 //设置页面的大小

 rowNum: 10,
.......
);

下面的例子只是用到本地的数据,同样也是实现了滚动翻页的效果

jQuery("#scrolling").jqGrid({
scroll: 1,
datatype: "local",
data:mydata,
height: 100,
width: 600,
colNames: ['Index', 'Name', 'Code'],
colModel: [
{ name: 'id', index: 'id', width: 65 },
{ name: 'name', index: 'name', width: 150 },
{ name: 'note', index: 'note', width: 100 }
],
rowNum: 5,
gridview: true,
pager: '#pscrolling',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data while scrolling"
});

父子表

通过以下设置可使用子表

$("#grid1").jqgrid(
......
//启用子表
subGrid : true,
subGridUrl: '............',
//设置子表的属性
subGridModel: [{
name : ['name1','name2',......,'nameN'], 
width : [width1,width2,.....,widthN] } ],
.......
);

这里子表的设置只是最基本的,更多属性的资料可参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

Get/Set 单元格的值

获取某个单元格的值就调用getCell(rowid, iCol) 。iCol既可以是当前列在colModel中的位置索引也可以是name值。注意:在编辑行或者单元格时不能使用此方法,此时返回的并不是改变的值,而是原始值。

设置某个单元格的值就调用setCell(rowid,colname, data, class, properties)。rowid:当前行id;colname:列名称,也可以是列的位置索引,从0开始;data:改变单元格的内容,如果为空则不更 新;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置单元格属性colModel。

当然也可以Get/Set 行或者列,在这里可查阅更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?

id=wiki:methods

数据验证

通过设置colModel的editrules属性,可以对输入的数据进行验证

jQuery("#grid_id").jqGrid({
...
colModel: [ 
... 
{name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
...
]
...
});

下面则是可用的验证选项

jqGrid用法汇总(全经典)

设置条带状的列

jQuery("#ghcs").jqGrid('setGroupHeaders', { //设置列头是否启用colSpan效果
useColSpanStyle: false, 
groupHeaders:[
{

startColumnName: 'colName', //合并列组的第一个列名 

numberOfColumns: number, //合并列的数量

titleText: 'title' //合并列的标题
 },

........
] 
}

编辑器

jqGrid的模板列自带了一些很基本的编辑器,包括:'text'单行文本框, 'textarea'多行文本框, 'select'下拉框, 'checkbox'复选框, 'password'密码框, 'button'按钮, 'image'图片按钮, 'file'文件上传框 以及'custom'自定义编辑器。

在colModel里设置edittype则可

jQuery("#grid_id").jqGrid({
...
colModel: [ 
... 
{name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}....},
 ... 
] 
... });

其中editoption是对编辑器的一些设置,文本框就可以设置size,maxlength等;复选框可设置value ;

ditoptions: { value:"Yes:No" }

下拉框以这种形式

editoptions: { value: “val1:text1; val2:text2; val3:text3” }

更多资料参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype

模板列调用其他编辑器

上面介绍的编辑器只是使用了html的表单元素而已,下面介绍的是调用插件。

<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
function InitDatePicker(cl) {
$(cl).click(function () {
WdatePicker();
});
}
....
jQuery("#grid_id").jqGrid({
...
colModel: [ 
... 
{name:'date', ..., editable:true, edittype:'text',editoptions: {dataInit:InitDatePicker}....},

 ... 

 ] ,

 ... 
});
.......
</script>

这里调用了My97DatePicker插件作为日历编辑器。

如果想在一个模板列里放置多种控件,可以用一下方式

jQuery("#grid_id").jqGrid({
...
afterInsertRow: function (rowid, aData) {
var controls=" "; //放置在模板里的控件
.......
$("#grid_id").jqGrid('setCell', rowid, 'tag', controls);
}
 ... 
});

这个其实是在grid的单元格内通过编辑其html来实现。

模仿Excel移动选择单元格

设置单元格编辑模式后,可以通过上下左右的导航键跳到需要编辑的单元格,按回车进入编辑状态,按Esc键不保存更改内容,按回车保存更改内容

jQuery("#grid_id").jqGrid({
...
cellEdit:true,
cellsubmit:'clientArray', //定义了单元格内容保存位置 默认值是'remote'
 ... 
});

以上所述是小编给大家介绍的jqGrid用法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
actionscript与javascript的区别
May 25 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
js密码强度校验
Nov 10 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 #Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
JavaScript中点击事件的写法
Jun 28 #Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP简单日历实现方法
2016/07/20 PHP
浅谈php://filter的妙用
2019/03/05 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python目录和文件处理总结详解
2019/09/02 Python
python绘制规则网络图形实例
2019/12/09 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
UML设计模式笔试题
2014/06/07 面试题
优秀教师事迹简介
2014/02/02 职场文书
爱心倡议书范文
2014/05/12 职场文书
司机工作自我鉴定
2014/09/19 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP