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

$("#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',
);

2.统计运算的功能

将footerrow设为true,绑定gridComplete事件。
统计时利用getCol方法,
第一个参数为colMode的name值,
第二个设为false,否则会返回一个数组而不是但一个数据,
第三个是设置统计方式,有'sum','avg'和'count'。 $("#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 });
}

3.排序

只要单击列的标题,就可以对该列进行升序或降序的排序。设置该列是否允许排序,在列的属性里设置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},
],
);

4.分组

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-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"5",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"
});

5.筛选

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');

6.增删改查工具栏及分页栏

jqGrid附带了分页栏,在分页栏上可以添加增加,修改,删除以及查询按钮。
在html多添加一个层,这个层就存放分页栏:
记得要在colModel里给可供编辑的列的editable赋值为true,才可以编辑。
<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
{},
// edit options
  {height: 280, reloadAfterSubmit: false },
// add options
  {height: 280, reloadAfterSubmit: false },
// del options
  {reloadAfterSubmit: false },
// search options
  {}
);

7.分页读取数据

既然上面已提及到分页,下面则介绍另一种分页方式,通过滚动条进行翻页。
在这种分页方式中,数据库的所有数据并非一下子读取出来填充到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"
});

8.父子表

通过以下设置可使用子表
$("#grid1").jqgrid(
......
//启用子表
subGrid : true,
subGridUrl: '............',
//设置子表的属性
subGridModel: [{
name : ['name1','name2',......,'nameN'],
width : [width1,width2,.....,widthN] } ],
);
这里子表的设置只是最基本的,更多属性的资料可参阅
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

9.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

10.数据验证

通过设置colModel的editrules属性,可以对输入的数据进行验证
jQuery("#grid_id").jqGrid({
...
colModel: [
{name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
]
});
下面则是可用的验证选项

11.设置条带状的列

jQuery("#ghcs").jqGrid(
'setGroupHeaders', { 
//设置列头是否启用colSpan效果
useColSpanStyle: false,
groupHeaders:[{
startColumnName: 'colName',
//合并列组的第一个列名     
numberOfColumns: number,
//合并列的数量    
titleText: 'title'
//合并列的标题   
},]
}

12.编辑器

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

13.模板列调用其他编辑器

上面介绍的编辑器只是使用了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插件作为日历编辑器。
如果想在一个模板列里放置多种控件,可以用一下方式
这个其实是在grid的单元格内通过编辑其html来实现。
jQuery("#grid_id").jqGrid({
...
afterInsertRow: function (rowid, aData) {
var controls="";
//放置在模板里的控件
$("#grid_id").jqGrid('setCell', rowid, 'tag', controls);
}
});

14.模仿Excel移动选择单元格

设置单元格编辑模式后,可以通过上下左右的导航键跳到需要编辑的单元格,
按回车进入编辑状态,按Esc键不保存更改内容,按回车保存更改内容
jQuery("#grid_id").jqGrid({
...
cellEdit:true,
cellsubmit:'clientArray', //定义了单元格内容保存位置 默认值是'remote'
});

jqGrid用法汇总(全经典)的更多相关文章

  1. Linux中find命令的用法汇总

    Linux中find命令的用法汇总 https://www.jb51.net/article/108198.htm

  2. Python Enum 枚举 用法汇总

    Python Enum 枚举 用法汇总 import os import sys if sys.version_info.major + sys.version_info.minor * 0.1 &l ...

  3. WPF中DataGrid中的DataGridCheckBoxColumn用法(全选,全否,反选)

    原文:WPF中DataGrid中的DataGridCheckBoxColumn用法(全选,全否,反选) 前台代码 <DataGrid.Columns> <DataGridCheckB ...

  4. C#中DllImport用法汇总

    最近使用DllImport,从网上google后发现,大部分内容都是相同,又从MSDN中搜集下,现将内容汇总,与大家分享. 大家在实际工作学习C#的时候,可能会问:为什么我们要为一些已经存在的功能(比 ...

  5. 拷贝别人的drawRect绘图分类用途、用法很全。

    拷贝被人的drawRect绘图分类用途,用法很全.留着.供用时参考 // Only override drawRect: if you perform custom drawing. // An em ...

  6. ANDROID内存优化(大汇总——全)

    写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上把网上搜集的各种内存零散知识点进行汇总.挑选.简化后整理而成. 所以我将本文定义为一个工具类的文章,如果你在A ...

  7. 正则表达式常用用法汇总 __西科大C语言

    正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列 ...

  8. XStream 用法汇总

            XStream是一家Java对象和XML转换工具,很好很强大.它提供了所有的基本型.排列.收集和其他类型的支持,直接转换.因此XML在数据交换经常使用.对象序列化(和Java对象的序列 ...

  9. 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例

    #用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...

随机推荐

  1. linux开始之旅-01 linux需要知道的这几位

    首先介绍几个人,没有这几个人就没有linux. 第一个:肯·汤普逊(左)和丹尼斯·里奇(右)  ------ C语言之父   ------学计算机的人都应该认识吧,计算机学院楼道里面都会有这两位. 美 ...

  2. 如何在Linux下禁用IPv6

    如何在Linux下禁用IPv6 echo 1 > /proc/sys/net/ipv6/conf/all/disable_ipv6                            禁用IP ...

  3. dataTable 从服务器获取数据源的两种表现形式

    var table = $('#example1').DataTable({ "processing": true,//加载效果 "autoWidth": fa ...

  4. ES6 (一)变量声明方法 & 解构赋值

    就是最新的JavaScript 原来的是var,要求不严格,不能限制修改,函数级 es6要求严格 1.防止重复声明 let      变量=var const 常量 2.控制修改 const常量不能修 ...

  5. 基础篇:3.2)规范化:3d零件建模

    本章目的:规范化零件建模,这是机械的基本功夫. 1.建模的总体原则和总体要求 1.1 建模总体原则 a)零件模型应能准确表达零件的设计信息:b)零件模型包含零件的几何要素.约束要素和工程要素:c)零件 ...

  6. 基础篇:6)形位公差标注(GD&T标准)-总章

    本章目的:理解GD&T概念,读懂和绘制GD&T图纸.本章是GD&T指引章节. 1.GD&T概念 GD&T  是 Geometric  Dimensioning ...

  7. Python之人工智能(一)

    是不是看到标题感觉很高大上?其实就是人工智障啦hhh~,本篇文档是典型的标题党,虽然是人工智能,但是没有算法,只是站在巨人的肩膀上而已. 好了,步入正题.此篇是人工智能应用的重点,只用现成的技术不做底 ...

  8. request.upload.addEventListener in not a function。

    本人在使用vue开发一套后台系统时,碰到了一个上传文件的需求,因为平时做的上传是使用ajax的方式来进行上传. 现在是使用axios来进行上传,方式没有什么改变: npm i  axios  直接上 ...

  9. Java学习之路(二):流程控制语句

    Java流程控制语句 java的流程控制语句: 默认,顺序执行 if...else...条件控制语句 switch 选择语句 for循环 while循环 do...while循环 break,cont ...

  10. android 拍照和从相册选择组件

    android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...