关于Jquery jqGrid的使用

官方文档： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

jqGrid预定义的格式化类型formatter http://www.cnblogs.com/qing123/p/3801686.html
jqGrid使用总结 http://blog.csdn.net/wpcxyking/article/details/5909180
jqGrid的属性列表: http://www.helloweba.com/view-blog-162.html
jqgrid 的一些操作 动态增加列 用本地 数据 修改表格 http://www.17jquery.com/javascript/47180/
初始化JqGrid的方法大概参数http://www.cnblogs.com/zzjj296/archive/2009/11/29/1613341.html
jqGrid操作说明 http://wenku.baidu.com/view/e4a66b8683d049649b6658bf
jqGrid 属性说明 http://www.cnblogs.com/Gavinzhao/archive/2010/11/26/1888503.html
jqGrid中文说明文档-事件http://www.helloweba.com/view-blog-163.html
jqGrid中文说明文档-方法 http://a3mao.iteye.com/blog/541541
jqGrid编辑单元格的事件 备忘1 http://blog.chinaunix.net/uid-7276097-id-3298044.html
jQuery学习笔记–JqGrid相关操作 方法列表 备忘 重点讲解(超重要) http://blog.csdn.net/jpr1990/article/details/6891115
支持多种类型的数据集合作为数据源[jqGrid的若干种用法] http://www.cnblogs.com/HopeGi/archive/2012/10/16/jqGrid.html,讲述许多特殊功能，比如滚动条进行翻页等…..
jqgrid使用：常用属性用法和含义【转贴】 http://rautinee.iteye.com/blog/875988, 对于滚动翻页的设置不一样。。。待确认哪种是有效的。
//设置了这个才会根据滚动分页读取数据
scroll: 1, 或者 scroll:true, 好像也没问题
jqgrid合并单元格 http://bbs.blueidea.com/thread-3067461-1-1.html
JQGrid导航按钮栏(Navigator) http://crazy.leanote.com/post/JQGrid%E5%AF%BC%E8%88%AA%E6%8C%89%E9%92%AE%E6%A0%8F-Navigator-3
关于获得所有rowId: http://blog.sina.com.cn/s/blog_025270e901015yad.html
其实跟getDataIDs()这个方法一模一样，这个方法就是获得所有rowId的。

jqGrid中的formatter http://mj4d.iteye.com/blog/1634857

jqgrid 行内删除 传参 http://www.dewen.net.cn/q/14549/jqgrid+%E8%A1%8C%E5%86%85%E5%88%A0%E9%99%A4+%E4%BC%A0%E5%8F%82

 

 

 

获得某一个属性的访问格式:

相反，设定使用setGridParam
Grid属性:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
列属性：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
事件：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
方法：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

获得被选择的行：

下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id：

如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下：

如果想获取选择的行的数据，只要传入rowId即可，如下：

而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：

当然你这个对象得有name这个属性才行

jqGrid获得所有行数据的方法

1.到这里下载：http://www.trirand.com/blog/
2.导入：没有在下载里面找到，那么去网上找。

3.使用

4.临时问题:
A:不知道怎么显示不了Datepicker，官方的例子，我没运行成功，不知道是ui.datepikcer.js的版本都对还是咋滴。
所以只好在

B:调用它提供的方法使用类似:
jQuery(‘#rowed5’).jqGrid(‘restoreRow’,lastsel2);

自行调用:
假如不想直接save到服务器，而是保存到本地array，然后自行调用服务器
http://stackoverflow.com/questions/4485970/jqgrid-rowobject-inconsistencies/4486142#4486142
1.初始化Grid:

2.得到数据:

重载   JQuery的jqGrid的重载
重新设置jqGrid的url，并调用重载方法，可实现jqGrid的重载刷新；
示例：
var url = “getList.jsp?name=ling”;
jQuery(“#tableId”).jqGrid(‘setGridParam’,{url:url}).trigger(“reloadGrid”);
其中，tableId是所在列表table的id；
重新初始化,假如改变了colnum的结构, 然后重新初始化. 只能先卸载Grid再进行重绘，才能达到改变列的目的。

编辑：

修改，保存，重置三个方法

注意：传入editUrl里面的数据，只包括可编辑的数据，除id外，id并不是根据column name来定义的，直接是是id这个字符串。提交方式是post

jqGrid编辑框动态加载Combo下拉菜单选项
参考：http://lvjava.com/?p=710
http://stackoverflow.com/questions/16104664/jqgrid-dataurl-in-searchoptions-not-working-with-jqgrid4-4-5

修改导航信息，添加保存成功回调函数
inlineNav:这个方式，在传到后台的时候，自动得到主键id字段，要自己根据需要来获取。

subGrid: JQGrid的Subgrid http://my.oschina.net/firnice/blog/77312
1,subgrid 4.0之后才支持json
2,  subgrid是根据jqgrid对象再次绑定一个列表。

后台需要定义一个id变量 用来接受点击加号传过来的id，此id就是主表的key。
private String id;
其余的思路与主表一样，对应的action写方法 给root的subgridchid赋值
注意:在自己的使用的时候，只有两个repeatitems=false才不会报错

导航：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator&s[]=navgrid，使用参数参考官方文档。
1.设定grid的自己的导航

， 国际化界面要在cn.js文件修改。
2. 自定义导航：跟下面自动以导航相似

自定义导航按钮：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons&s[]=navgrid

editUrl的返回值，回调函数 http://rautinee.iteye.com/blog/660000

参数格式：jQuery(“#grid_id”).jqGrid(‘navGrid’,’#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
改变参数并重新加载

设定列宽度
http://stackoverflow.com/questions/12171640/jqgrid-changing-the-width-of-a-column-dynamically

等比放缩: shrinkToFit：默认值为true。
如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；
如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。

设定某一rowid被选中：$(“#temptableid”).setSelection(1);

jqgrid的一些参数说明：http://lbxhappy.iteye.com/blog/1533400
1、colNames:列名称,用于描述在界面上显示的列名称
colNames: [‘编号’,’科室名称’,’联系人’,’联系电话’,’主管科室’,’状态’,’备注’,’opertype’],
2、colModel:列名称对应的model，该model内的各个列要和colNames的各个列进行一一对应
可以对各个列设置属性，name属性药设置为json数据的key名称,也就是我们的Bean的对应属性名称，width：宽度,editable代表是否可编辑，edittype代表编辑框的类型，可以是  text、select、texare、checkbox等类型,formatter:格式化显示的数据，unformat：处于编辑状态后反格式化到以前的数据
如：
colModel: [
{name:’dpt_code’,index:’dpt_code’,width:110,editable: true,edittype:”text”,cellEdit:false,editrules:{required:true}},
{name:’dpt_name’,index:’dpt_name’,width:110,editable: true,edittype:”text”},
{name:’dpt_manager’,index:’dpt_manager’,width:100,editable: true,edittype:”text”},
{name:’dpt_tel’,index:’dpt_tel’,width:120,editable: true,edittype:”text”, editrules:{custom:true, custom_func:telcheck}},
{name:’dpt_mandpt’,index:’dpt_mandpt’,editable: true,edittype:”text”},
{name:’dpt_status’,index:’dpt_status’,formatter:formatStatus,width:60,editable: true,edittype:”select”,unformat:unformatStatus,                                   editoptions :{value:’STP:停用’+’;’+’USE:使用’}},
{name:’dpt_remark’,index:’dpt_remark’,editable: true,edittype:”text”},
{name:’opertype’,index:’opertype’,editable: false,edittype:”text”,hidden:true},
],
3、id:代表整个数据表格的一个ID，没条数据的ID必须是唯一的，常和后台数据表ID对应,
id:dpt_code
4、caption:设置数据表格的标题名称
caption: “科室管理11”,
5、rowNum:设置表格默认显示记录的条数，用于分页
rowNum:20
6、rowList:供用户选择每页显示的记录数
rowList:[10,20,30,40],
7、pager: 用指定表格的工具栏
pager: ‘#pageDiv’,pageDiv是页面某个DIV的ID
8、pgbuttons:true, 是否显示页面分页按钮
9、 multiselect:’true’，是指是否可以进行多选
10、altRows:’true’,是否开启，提示功能
11、 multiboxonly:true 是否在多选的时候，显示复选框
12、height: 398，代表表格的高度
13、cellEdit:true,是否开启单元格的编辑功能
14、cellsubmit:’remote’,remote代表每次编辑提交后进行服务器保存，clientArray只保存到数据表格不保存到服务器
15、cellurl:’departmentAction!updateCell.action’,cellsubmit要提交的后台路径
16、scrollrows:true是否可以出现滚动条
17、shrinkToFit:false是否固定每列的宽度
18、editurl:表格的添加、修改、删除按钮所提交的路径
editurl:’departmentAction!updateDepartment2.action’,
19、sortname:默认排序的列
sortname: ‘dpt_sort’,
20、jsonReader:解析json数据的参数
jsonReader: {
repeatitems : false,
id: “dpt_code” //对应后台数据的ID
},
21、prmNames :向后台交互时，所设置的参数名称对应的值
prmNames : {
page:”department.curr_page”,    // 表示请求页码的参数名称
rows:”department.page_size”,    // 表示请求行数的参数名称
sort: “department.sort_field”, // 表示用于排序的列名的参数名称
order: “department.sord”, // 表示采用的排序方式的参数名称
search:”search”, // 表示是否是搜索请求的参数名称
totalrows:”department.totalrows” // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal
}
22、gridComplete:设置表格数据加载完毕后，所执行的操作
gridComplete:function(){
if($(“#gridTable”).getDataIDs().length>0){
$(“#gridTable”).jqGrid(‘setSelection’,$(“#gridTable”).getDataIDs()[0]);//默认选中第一行
}
},
23、onSelectRow:表格某行被选中后执行的操作：
onSelectRow:function(){
loadDataGrid();
},
24、ondblClickRow:数据某行所执行的操作
25、beforeSelectRow：某行记录在被选中前执行操作
26、afterSelectRow:某行记录再被选中后所执行操作
27、设置表格的添加、删除、修改、查询按钮是否显示，也可以自定义按钮
search:false不显示查询按钮，add_options主要设置点添加按钮后弹出框的样式及模式
navButtonAdd：通过该方法可以添加自定义的按钮
var add_options={
width:400,
height:290,
left:20,
top:30,
reloadAfterSubmit:false,
jqModal:false,
addCaption: “添加部门信息”,
bSubmit: “保存”,
bCancel: “关闭”,
closeAfterAdd:true

};
jQuery(“#gridTable”).jqGrid(‘navGrid’,’#pageDiv’,{search:false,edit:true,add:true,del:true},edit_options,add_options,{},{},{}).navButtonAdd(‘#pageDiv’,{
caption:”添加”,edit:true显示编辑按钮
title:’添加药品信息’,
buttonicon:”ui-icon-update”,
onClickButton:function(){
tb_show(‘添加科室信息’,’/simpleProj/bsic/departmentAction!addDepartment.action?TB_iframe=true&height=420&width=630&keepThis=false”‘,true);
},
position:”last”
});
28、获取表格总行数
var ids = $(“#gridTable”).getDataIDs();获得所有数据的ID数组
29、按ID获取某行数据操作：
$(“#gridTable”).jqGrid(“getRowData”,id);
30、获取选中行的记录，如果设置的multiselect为true那么获取的是数组反正是一个对象
var re = $(“#gridTable”).jqGrid(‘getGridParam’,’selrow’),返回一个json对象，可以通过如下方式访问：
re.dpt_name,re.dpt_tel
31、在数据网格动态增加行操作
rowid代表行号、dataRow一条josn数据，last指向表格最后一行追加
$(“#gridTable”).jqGrid(“addRowData”, rowid, dataRow, “last”);

32 设定行和列的颜色，表格行颜色和单元格颜色

15. jqGrid的搜索框下拉 http://www.cnblogs.com/linguoguo/p/4076279.html