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></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] } ], ....... );
这里子表的设置只是最基本的，更多属性的资料可参阅
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的方法
数据验证
通过设置colModel的editrules属性，可以对输入的数据进行验证
jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true }, ... ] ... });
下面则是可用的验证选项
设置条带状的列