jqGrid表格插件常用方法及函数留档

原创 2016年06月01日 21:19:25

以下列出在实际开发中频繁使用的方法及函数,完整的api文档见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

/*jqGrid表格插件常用方法:

*rowid:行主键

*iCol   列字段,在colModel中定义的

*/

//获取单行数据

var rowdata=$("#gridId").getRowData(rowid);

//获取表格所有数据

var data=$("#gridId").getRowData();      

/*获取表格单列数据

*returntype   默认false,返回value组成的数组[cellvalue,cellvalue],为true时返回对象组成的数组,[{id:rowid, value:cellvalue},{id:rowid, value:cellvalue}]

*/

var coldata=$("#gridId").getCol(iCol,returntype);      

//获取单元格数据

var rowdata=$("#gridId").getCell(rowid,iCol); 

//赋值单元格数据,data为字符串

var rowdata=$("#gridId").setCell(rowid,iCol,data);

//插入行

$("#jqgrid").addRowData(rowId, data, pos, idx); //pos可以为[first,last,before,after], 为后两者是需要指定相对的行ID 

//赋值行数据,data为数组{name1:value1,name2: value2…}

var rowdata=$("#gridId").setRowData(rowid,iCol,data);

//表格重置,datatype: "json"时有效,为"local"时无效

var rowdata=$("#gridId").trigger(“reloadGrid”);

//表格销毁

$("#gridId").jqGrid(“GridUnload”);


/*jqGrid表格插件常用函数:

*rowid:行主键

*iCol   列字段,在colModel中定义的

*/

//表格数据获取并生成表格后触发

gridComplete()

//表格数据获取后在生成表格前触发,data为服务端返回的数据

loadComplete(data)

//双击表格行触发

ondblClickRow(rowid, iRow, iCol)

//单击行触发,status为true或false表示行是否选中

onSelectRow(rowid,status)

//选中行前触发

beforeSelectRow(rowid)



//通过插件自带ajax生成表格写法:

$("#gridId").jqGrid({
        url:ratetemp_g_url.list,//ajax的url
        datatype: "json",  //数据类型
        height: "100%",
        colNames:['操作','模板ID','模板名称','配置人','配置时间','备注'],
        colModel:[
        	{name:'',index:'', width:80,align:'center',formatter:function(cellvalue,options,rowObject){
				return '<a href="javascript:;" class="ui-btn-bg1" onclick="global_ratetemp_show(\''+rowObject.id+'\')">查看</a><a href="javascript:;" class="ui-btn-bg1" onclick="ratetemp_edit_click(\''+rowObject.id+'\')">编辑</a><a href="javascript:;" class="ui-btn-bg1" onclick="ratetemp_del_click(\''+rowObject.id+'\')">删除</a>';
			},sortable:false},
        	{name:'id',index:'id', width:100,align:'center',key:true,sortable:false},
			{name:'name',index:'name', width:100,align:'center',sortable:false},
			{name:'createUserName',index:'createUserName', width:100,align:'center',sortable:false},
			{name:'createTime',index:'createTime', width:100,align:'center',sortable:false},
			{name:'memo',index:'memo', width:150,sortable:false}
        ],
	toolbar:[true,"top"],   //是否包含顶部条
        rowNum:15,         //行数
        sortname:"id",     //排序主键
        sortorder:"desc",  //升序还是降序
        pager:"#grid_pager1",  //分页容器id
        jsonReader : {       //返回值定义
            repeatitems: false,
            id:"id"
        },
	autowidth:true,//宽度自适应
        viewrecords: true,//是否显示页码
rownumbers: true//是否显示序号
        caption: null   //标题
    });
	//状态栏按钮
    var buts=[];
	buts.push('<div class="p10">');
	buts.push('<a href="javascript:void(0)" class="ui-btn-bg2" onclick="ratetemp_add_click()"><span class="add-icon">新增</span></a>');
	buts.push('</div>');
    $("#t_ratetemp_list").html(buts.join(""));

//通过ajax返回数据生成表格写法:(不可分页)

$.post(rateqdhset_g_url.templist,{},function(data){
$("#gridId").jqGrid({
        datatype: "local",//注意不通过ajax时要设置成local
        autowidth:true,
        height: "100%",
        colNames:['id','分期期数','名义月服务费率(%)','名义年服务费率(%)','实际月服务费率(%)','实际年服务费率(%)','基准费率参数(%)'],
        colModel:[
        	{name:'id',index:'id', width:50,hidden:true},
        	{name:'installmentNum',index:'installmentNum', width:50,align:'center',sortable:false,key:true},
        	{name:'monthServiceFee',index:'monthServiceFee', width:100,align:'center',formatter:function(cellvalue,options,rowObject){
				return '<div class="ptb10"><span class="posir"><input type="text" class="textstyle" id="ratetemp_monthServiceFee_'+rowObject.installmentNum+'" size="10" value="'+rowObject.monthServiceFee+'" datatype="price" nullmsg="请输入名义月服务费率" onblur="ratetemp_getline_blur('+rowObject.installmentNum+',\'ratetemp_monthServiceFee_'+rowObject.installmentNum+'\')"/><span class="Validform_checktip"></span></span></div>';
			},unformat:function(cellvalue,options,rowObject){
				return $(rowObject).find("input").val();
			},sortable:false},
			{name:'yearServiceFee',index:'yearServiceFee', width:100,align:'center',sortable:false},
			{name:'realMonthServiceFee',index:'realMonthServiceFee', width:100,align:'center',sortable:false},
			{name:'realYearServiceFee',index:'realYearServiceFee', width:100,align:'center',sortable:false},
			{name:'referenceRates',index:'referenceRates', width:100,align:'center',sortable:false}
        ],
        rowNum:data.length,
        data:data,  //注意不通过ajax时要设置data
	autowidth:true,
        caption:"分期费率规则"
    });
}











版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jqgrid实现子表格

表格的子表格支持

jqgrid的函数与操作

jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式: $("#grid_id").jqGridMethod( parameter1,...,par...

jQuery插件之【jqGrid】常用语法整理-【更新】

jqGrid常用语法整理,包含数据获取、常用函数、触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowData");...

如何给jqGrid表格按照字段进行分组

1、问题场景      (1)利用jqGrid生成表格      (2)表格按照字段name进行分组 2、实现源码 [html] view pl...

jqGrid:grid重载

在刚做的项目中,需要两个grid,他们分别都是与下拉框-联动的,其中一个grid表头固定,一个是动态的(即根据下拉框中内容不同,grid中列不同)。需要在每次更改下拉框中内容后,重载数据,即grid需...

jqgrid动态改变colModel属性

今天开发的过程中遇到一个问题:jqgrid 第一次初始化完成后,有个操作需要重新去加载grid,并将某一列的显示改变。因为grid第一次加载的时候这一列是直接显示其值的,并没有去formatter它的...

Jqgrid 方法

Jqgrid 之常用方法 ========================================================== 1.setGridParam 这个方法...
  • seng3018
  • seng3018
  • 2012年07月17日 18:18
  • 19697

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jqGrid 各种参数详解

转载地址:http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html jqGrid 各种参数 详解 JQGrid JQGr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqGrid表格插件常用方法及函数留档
举报原因:
原因补充:

(最多只允许输入30个字)