关于Jquery jqGrid的使用

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

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编辑单元格的事件备忘1http://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

关于获得所有rowId:http://blog.sina.com.cn/s/blog_025270e901015yad.html

其实跟getDataIDs()这个方法一模一样，这个方法就是获得所有rowId的。

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

var colModel = grid.jqGrid("getGridParam",'colModel');
var colNames= grid.jqGrid("getGridParam",'colNames');

相反，设定使用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

获得被选择的行：

getSelectedGridData : function(grid){
			var selarrrowIDs =JQGridUtils.getGridParam(grid,"selarrrow");
			var array=[];
            if (selr.length) {
                for (var i = 0; i < selarrrowIDs.lenght; i++) {
                    var myrow = jQuery('#grid').jqGrid('getRowData', selarrrowIDs[i]);
					array[array.length]=myrow.NIF;
                }
            }
			return array;
		}

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

var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);

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

var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’);

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

var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);

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

var rowName=rowData.name;

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

jqGrid获得所有行数据的方法

function testJqfrid(){
    var obj = $("#tablename").jqGrid("getRowData");
    alert(obj.length);
    jQuery(obj).each(function(){
        alert(this.RECEIPT_ORDER_NO);
    });

    var ret = $("#tablename").jqGrid("getRowData", 0);   //获得第一行的数据
}

1.到这里下载：http://www.trirand.com/blog/

2.导入：没有在下载里面找到，那么去网上找。

<!-- Grid Start -->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/common/js/jquery.jqGrid/css/jquery-ui-1.8.1.custom.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/common/js/jquery.jqGrid/css/ui.jqgrid.css">
	
	<script src="<%=basePath%>/common/js/jquery.jqGrid/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
	<script src="<%=basePath%>/common/js/jquery.jqGrid/jquery.layout-latest.js" type="text/javascript"></script>
	<script src="<%=basePath%>/common/js/jquery.jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script type="text/javascript">
		$.jgrid.no_legacy_api = true;
		$.jgrid.useJSON = true;
	</script>
	<script src="<%=basePath%>/common/js/jquery.jqGrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
	<!-- datepicker of grid and page -->
	<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/jquery.ui.datepicker.css" />
	<script src="<%=basePath%>/common/js/jquery.ui.datepicker.js" type="text/javascript"></script>
	<!-- Grid Start -->

3.使用

var lastsel2;
var mydata2 = [
		{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
		{id:"12346",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"}
		];


jQuery("#rowed5").jqGrid({
		datatype: "local",
		height: 250,
	   	colNames:['ID','Name', 'Stock', 'Ship via','Notes','Date'],
	   	colModel:[
	   		{name:'id',index:'id', width:100, sorttype:"int", editable: true},
	   		{name:'name',index:'name', width:100,editable: true,editoptions:{size:"20",maxlength:"30"}},
	   		{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
	   		{name:'ship',index:'ship', width:150, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},		
	   		{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
			{name:'sdate',index:'sdate',width:100, editable:true, sorttype:"date"},		
	   	],
		onSelectRow: function(id){
			if(id && id!==lastsel2){
				jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
				jQuery('#rowed5').jqGrid('editRow',id,true);
				lastsel2=id;
				$( "#"+id+"_sdate" ).datepicker();
			}
		},
		editurl: "server.php",
		caption: "Data of Cost Centre"
	});

for (var i = 0; i < mydata2.length; i++) {
		jQuery("#rowed5").jqGrid('addRowData', mydata2[i].id, mydata2[i]);
	}

4.临时问题:

A:不知道怎么显示不了Datepicker，官方的例子，我没运行成功，不知道是ui.datepikcer.js的版本都对还是咋滴。

所以只好在

onSelectRow: function(id){  
            if(id && id!==lastsel2){  
                $( "#"+id+"_sdate" ).datepicker(); //解决弹出DatePicker问题。 
            }  
        }

B:调用它提供的方法使用类似:

jQuery('#rowed5').jqGrid('restoreRow',lastsel2);

自行调用:

假如不想直接save到服务器，而是保存到本地array，然后自行调用服务器

http://stackoverflow.com/questions/4485970/jqgrid-rowobject-inconsistencies/4486142#4486142

1.初始化Grid:

jQuery("#rowed5").jqGrid({
		datatype: "local",
                //这里随便给一个能调用的地址就好。不设定的话，总是出错。
		editurl: "ServerAction.action?p=pandy",
		cellsubmit : "clientArray",
                ......
}

2.得到数据:

var gridData = $("#rowed5").jqGrid('getGridParam', 'data');

重载JQuery的jqGrid的重载

重新设置jqGrid的url，并调用重载方法，可实现jqGrid的重载刷新；

示例：

varurl="getList.jsp?name=ling";

jQuery("#tableId").jqGrid('setGridParam',{url:url}).trigger("reloadGrid");

其中，tableId是所在列表table的id；

重新初始化,假如改变了colnum的结构,然后重新初始化.只能先卸载Grid再进行重绘，才能达到改变列的目的。

jQuery("#list47").GridUnload();
reloadGrid();//重新初始化并载入数据

编辑：

var lastsel;
.....
jQuery("#tb_grid").jqGrid({
        ......
        colModel:[
            {name:'wellcome_title',index:'wellcome_title', width:80, editable:true},
            ......
        ],
        onSelectRow: function(id){
            if(id && id!==lastsel){
                jQuery('#tb_grid').jqGrid('restoreRow',lastsel);
                jQuery('#tb_grid').jqGrid('editRow',id,true);
                lastsel=id;
            }
        },
        editurl: "server.php",
        ......
    });

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

jQuery('#rowed2').editRow('"+cl+"');
jQuery('#rowed2').saveRow('"+cl+"');
jQuery('#rowed2').restoreRow('"+cl+"');

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

jqGrid编辑框动态加载Combo下拉菜单选项

参考：http://lvjava.com/?p=710

http://stackoverflow.com/questions/16104664/jqgrid-dataurl-in-searchoptions-not-working-with-jqgrid4-4-5

{ name: 'destinations', ditable: true, edittype:'select',
  editoptions: { dataUrl:'<%= Url.Action("GetDestinationList","Home") %>',
                 buildSelect: function(data) {
                     var response = jQuery.parseJSON(data.responseText);
                     var s = '<select>';
                     if (response && response.length) {
                         for (var i = 0, l=response.length; i<l ; i++) {
                             var ri = response[i];
                             s += '<option value="'+ri+'">'+ri+'</option>';
                         }
                     }
                     return s + "</select>";
                 }
                }
}

修改导航信息，添加保存成功回调函数

inlineNav:这个方式，在传到后台的时候，自动得到主键id字段，要自己根据需要来获取。

var myEditOptions = {
        keys: true,
        oneditfunc: function (rowid) {
            alert("row with rowid=" + rowid + " is editing.");
        },
        aftersavefunc: function (rowid, response, options) {
            alert("row with rowid=" + rowid + " is successfuly modified.");
        }
    };

    jQuery("#tb_grid").jqGrid('navGrid', "#div_pg", {edit: false, add: false, del: false, save: false});
    jQuery("#tb_grid").jqGrid('inlineNav', "#div_pg",{
        addtext: "Add",
        edittext: "Edit",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: {
            position: "afterSelected",
            addRowParams: myEditOptions
        },
        addedrow: "last",
        editParams: myEditOptions
    });

subGrid:JQGrid的Subgridhttp://my.oschina.net/firnice/blog/77312

1,subgrid4.0之后才支持json

2,subgrid是根据jqgrid对象再次绑定一个列表。

jsonReader:{  
       root:"jqgridJson", // 从服务端返回的实际数据，名字随意起，但是在Action类中必须有与之匹配的属性,可以是rows
       repeatitems : false,
       subgrid: {
      root:"subgridchid", //子级的内容 Action类中必须有与之匹配的属性,可以是rows
      repeatitems: false  //false之后 subGridModel的mapping才起作用
   }	        
}，

        subGrid : true,
        subGridUrl: '<%=path%>/jqgridTest/subgridchid.action',
   subGridModel: [{ name:['标号','内容','备注'],
                   width : [55,80,80],
                   mapping  : ['no','item','qty']} 
   ]

后台需要定义一个id变量用来接受点击加号传过来的id，此id就是主表的key。

privateStringid;

其余的思路与主表一样，对应的action写方法给root的subgridchid赋值

注意:在自己的使用的时候，只有两个repeatitems=false才不会报错

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

1.设定grid的自己的导航

jQuery("#" + gId).jqGrid('navGrid', "#" + pId, {edit: true, add: true, del: true, save: true});

，国际化界面要在cn.js文件修改。

2.自定义导航：跟下面自动以导航相似

jQuery("#" + gId).jqGrid('inlineNav', "#" + pId, {
                addtext: "增加",
                edittext: "修改",
                savetext: "保存",
                deltext: "删除",
                canceltext: "取消",
                /*addParams: {
                 position: "afterSelected",
                 addRowParams: myEditOptions
                 },*/
                addedrow: "last",
                editParams: myEditOptions
            });

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

jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{
   caption:"Add", 
   buttonicon:"ui-icon-add", 
   onClickButton: function(){ 
     alert("Adding Row");
   }, 
   position:"last"
})
.navButtonAdd('#pager',{
   caption:"Del", 
   buttonicon:"ui-icon-del", 
   onClickButton: function(){ 
      alert("Deleting Row");
   }, 
   position:"last"
});

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

var editOptions={
                afterSubmit: function(response,postdata){
                    alert("SAVE:"+response.responseText);//显示返回值
                    //这里是否需要返回，得看源码或者帮助文档
                }
            }
            var delOptions={
                afterSubmit: function(response,postdata){
                    var r= $.parseJSON(response.responseText);//动态页返回json格式的字符串，如{success:true/false}之类的，为false添加err属性什么的，成功则返回new_id
                    //这里要返回一个数组,
                    // 1.true/false，表示是否成功。
                    // 2.message字符串
                    // 3. delete_id
                    return [r.success,r.message,r.new_id];
                }
            }
            jQuery("#" + gId).jqGrid('navGrid', "#" + pId, {edit: true, add: true, del: true, save: true},editOptions,{},delOptions,{},{});

参数格式：jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit,prmAdd,prmDel,prmSearch,prmView);

改变参数并重新加载

jQuery("#" + gridId).jqGrid('setGridParam',{postData:{.......}});
jQuery("#" + gridId).trigger("reloadGrid");

设定列宽度

http://stackoverflow.com/questions/12171640/jqgrid-changing-the-width-of-a-column-dynamically

$("#mygrid").jqGrid('setColProp','amount',{width:new_width});
var gw = $("#mygrid").jqGrid('getGridParam','width');
$("#mygrid").jqGrid('setGridWidth',gw);

等比放缩: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：通过该方法可以添加自定义的按钮

varadd_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、获取表格总行数

varids=$("#gridTable").getDataIDs();获得所有数据的ID数组

29、按ID获取某行数据操作：

$("#gridTable").jqGrid("getRowData",id);

30、获取选中行的记录，如果设置的multiselect为true那么获取的是数组反正是一个对象

varre=$("#gridTable").jqGrid('getGridParam','selrow'),返回一个json对象，可以通过如下方式访问：

re.dpt_name,re.dpt_tel

31、在数据网格动态增加行操作

rowid代表行号、dataRow一条josn数据，last指向表格最后一行追加

$("#gridTable").jqGrid("addRowData",rowid,dataRow,"last");

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

,rowattr: function (rd) { //grid配置
                if (rd.realSum == 0) {
                    return {"style": "color:red;"};
                }
                return null;
            }
    ,cellattr: function (rowId, val, rawObject, cm, rdata) {//module配置
                            return 'style="color:red; font-weight: bold;"';
                        }

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

关于Jquery jqGrid的使用

相关推荐