jqgrid简单总结

2020-03-02 08:52:58 来源：范文大全收藏下载本文

jqgrid

一、主要API接口getGridParam、setGridParam：

getGridParam方法：

getGridParam(\"url\")：获取当前的AJAX的URL

getGridParam(\"sortname\")：排序的字段

getGridParam(\"sortorder\")：排序的顺序

getGridParam(\"selrow\")：得到选中行的ID

getGridParam(\"page\")：当前的页数

getGridParam(\"rowNum\")：当前有多少行

getGridParam(\"datatype\")：得到当前的datatype

getGridParam(\"records\")：得到总记录数

getGridParam(\"selarrrow\")：可以多选时，返回选中行的ID

setGridParam方法：

setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger(\"reloadGrid\")使用

setGridParam({sortname:newvalue})：设置排序的字段

setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc

setGridParam({page:newvalue})：设置翻到第几页

setGridParam({rowNum:newvalue})：设置当前每页显示的行数

setGridParam({datatype:newvalue})：设置新的datatype(xml,json)

形式2：jQuery(\'#tableID\').jqGrid(\'getGridParam\',\'url\'))

jQuery(\"#tableID\").jqGrid(\'setGridParam\',{page:2}).trigger(\"reloadGrid\")

二、jqGrid colModel表体结构配置

name必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性

index为排序用，最方便的是设为数据库字段

width150，宽度，数值

alignleft,center,right

detefmtdate:true

editable flase

editoptions edittype为先决条件，此为值，[]

editrules 编辑规范

edittype text,textarea,select,checkbox,paword

formatoptions

formatter

hidedlgfalse (appear in the modal dialog)

hiddenfalse 在加载时是否隐藏列

jsonmap声明json的格式

keyfalse

label当没有设置colNames时，在列里用此代替，此项也为空时，就是name代替

resizable true，列宽可调节

searchtrue，可搜索

sortable true，可排序

sorttype text,int,float,date，排序子段类型

xmlmap声明xml的格式

三、一个例子[Array Data]

jQuery(\"#list4\").jqGrid({

datatype: \"local\",

height: 250,

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\"}, {name:\'name\',index:\'name\', width:100},

{name:\'amount\',index:\'amount\', width:80, align:\"right\",sorttype:\"float\"},

{name:\'tax\',index:\'tax\', width:80, align:\"right\",sorttype:\"float\"},{name:\'total\',index:\'total\', width:80,align:\"right\",sorttype:\"float\"},

{name:\'note\',index:\'note\', width:150, sortable:false}

multiselect: true,

caption: \"Manipulating Array Data\"

});

var mydata = [

{id:\"1\",invdate:\"2007-10-01\",name:\"test\",note:\"note\",amount:\"200.00\",tax:\"10.00\",total:\"210.00\"},

{id:\"2\",invdate:\"2007-10-02\",name:\"test2\",note:\"note2\",amount:\"300.00\",tax:\"20.00\",total:\"320.00\"},

{id:\"3\",invdate:\"2007-09-01\",name:\"test3\",note:\"note3\",amount:\"400.00

\",tax:\"30.00\",total:\"430.00\"},

{id:\"4\",invdate:\"2007-10-04\",name:\"test\",note:\"note\",amount:\"200.00\",tax:\"10.00\",total:\"210.00\"},

{id:\"5\",invdate:\"2007-10-05\",name:\"test2\",note:\"note2\",amount:\"300.00\",tax:\"20.00\",total:\"320.00\"},

{id:\"6\",invdate:\"2007-09-06\",name:\"test3\",note:\"note3\",amount:\"400.00\",tax:\"30.00\",total:\"430.00\"},

{id:\"7\",invdate:\"2007-10-04\",name:\"test\",note:\"note\",amount:\"200.00\",tax:\"10.00\",total:\"210.00\"},

{id:\"8\",invdate:\"2007-10-03\",name:\"test2\",note:\"note2\",amount:\"300.00\",tax:\"20.00\",total:\"320.00\"},

{id:\"9\",invdate:\"2007-09-01\",name:\"test3\",note:\"note3\",amount:\"400.00\",tax:\"30.00\",total:\"430.00\"}

];

for(var i=0;i

jQuery(\"#list4\").jqGrid(\'addRowData\',i+1,mydata[i]);

四、行操作

//获取选中行数据

jQuery(\"#a1\").click( function(){

var id = jQuery(\"#list5\").jqGrid(\'getGridParam\',\'selrow\');

if (id) {

var ret = jQuery(\"#list5\").jqGrid(\'getRowData\',id);

alert(\"id=\"+ret.id+\" invdate=\"+ret.invdate+\"...\");

} else { alert(\"请选择一行！\");}

});

//删除

jQuery(\"#a2\").click( function(){

var su=jQuery(\"#list5\").jqGrid(\'delRowData\',12);

if(su) alert(\"成功删除第12行\"); else alert(\"删除失败\");

});

//更新

jQuery(\"#a3\").click( function(){

var su=jQuery(\"#list5\").jqGrid(\'setRowData\',11,{amount:\"333.00\",tax:\"33.00\",total:\"366.00\",note:\"\"});

if(su) alert(\"更新成功\"); else alert(\"更新失败\");

});

//新增

jQuery(\"#a4\").click( function(){

var datarow = {id:\"99\",invdate:\"2007-09-01\",name:\"test3\",note:\"note3\",amount:\"400.00\",tax:\"30.00\",total:\"430.00\"};

var su=jQuery(\"#list5\").jqGrid(\'addRowData\',99,datarow);

if(su) alert(\"新增成功\"); else alert(\"新增失败\");

});

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

jqgrid简单总结

相关推荐