时间:2021-05-26
支持多种类型的数据集合作为数据源
jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组)
下面则列举各种数据类型的格式
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:
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多添加一个层,这个层就存放分页栏:
记得要在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://mon_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键不保存更改内容,按回车保存更改内容
以上所述是小编给大家介绍的jqGrid用法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jqGrid提供了表格底部汇总、合计行功能,我们先看下user-guide关于jqGrid合计行都有哪些说明?然后再看个DEMO,看看jqGrid表格底部汇总、
ColModel是jqGrid里最重要的一个属性,设置表格列的属性。用法:Java代码:复制代码代码如下:jQuery("#gridid").jqGrid({.
jqGrid是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。一、要引用的文件要使用jqGrid,
在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的ur
javascript中$(function(){....})是jQuery中的经典用法,等同于$(document).ready(function(){....