jQuery("#grid_id").jqGrid({ //<table id="grid_id"></div>
url: "UserServlet?method=getList", // 加载数据时访问的url 具体的返回可以是xml,json
datarype:"json" //返回的数据类型,后台需要返回一个json字符串 json,xml,xmlstring,local,javascript,function
mtype : 'GET' //请求的方式 GET,POST
height: $(window).height(), //设置表格高度 auto,%值
autowidth:ture, //打开浏览器‘宽度自测’
colName:['用户名','密码'], // 表格表头
colModel:[
{name : 'myac',index :'myac',width : 80,formatter:'actions',delOption:true},
{label : '用户',name : 'user',index :'user',width : 80,},
],
pager : "#gridPager", //导航栏,分页组件<div id="gridPager"></div>
rowNum : 10, //设置显示记录条数,默认20,若返回的记录条数大于rowNum,grid只会显示rowNum规定的条数
rowList : [10,20,30], //用与设置grid能够接受的rowNum值
viewrecords:true, //设置是否显示总条数
sortname : "time",
sortorder : 'asc', //排序的列,倒序、顺序 asc/desc
multiselect: true, //开启多选
rownumber : true, //左侧的行号
loadonce: //若设置成true,则只从服务器请求一次数据,datatype被修改为local,且以后所有的操作都是基于客户端的操作
subGrid: ture //默认为false,展开子格
subGridUrl
subGridModel
subGridRowExpanded:function(){} //当点击“+”展开子表格时,将触发此选项定义的事件方法;
subGridRowColapsed //当点击“-”收起子表格时,将触发此选项定义的事件方法;
width: //调整表格大小
height //调整表格大小
pamNames :[] //用于设置jqgrid要向server传递的参数名称
jsonReader:[] //用于解析server放回的json数据
});
//jQuery(window).height()代表了当前可见区域的大小,
//而jQuery(document).height()则代表了整个文档的高度,可视具体情况使
pamNames:默认值
prmNames : {
page:"page", // 表示请求页码的参数名称
rows:"rows", // 表示请求行数的参数名称
sort: "sidx", // 表示用于排序的列名的参数名称
order: "sord", // 表示采用的排序方式的参数名称
search:"_search", // 表示是否是搜索请求的参数名称
nd:"nd", // 表示已经发送请求的次数的参数名称
id:"id", // 表示当在编辑数据模块中发送数据时,使用的id的名称
oper:"oper", // operation参数名称
editoper:"edit", // 当在edit模式中提交数据时,操作的名称
addoper:"add", // 当在add模式中提交数据时,操作的名称
deloper:"del", // 当在delete模式中提交数据时,操作的名称
subgridid:"id", // 当点击以载入数据到子表时,传递的数据名称
npage: null,
totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称,参见jqGrid选项中的rowTotal
}
列名:colNames
colNames : [ '操作', '用户帐号', '用户密码', '所属权限组', '员工id'],
列属性:colMode
label:标签,标记 当colNames数组为空时,定义此列的标题。
name:对象的属性名 其中保留字包括subgrid、cb、rn
index:索引 //排序,和向server传递参数的名称
align //日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期
key //设置主键列
hidedlg //该值不会出现在模式对话框中,默认值为false
width:宽度 // px单位
hidden:false //该列是否隐藏,默认false
align:center //居中
editable:可编辑的
editoptios:
edittype 定义行编辑和表单模式的编辑类型,可以是text、textarea、select、checkbox、 password、button、image和file。
editrules
datefmt //日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期
sortable:true //该列是否可以排序 ,默认true
sorttype 当datatype为local时,用于定义排序列类型。可取int/integer(整数)、float/number/currency(小数)、date(日期)、text(文本)
resizable: true, //该列尺寸是否能更改,默认true
fromoptions // 定义表单编辑的各种选项
formatter:'actions' //用来预设类型或格式化该列的自定义函数名 ,常用预设格式:integer,date,currency、number
formatteroptions
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";
if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";
}
delOption:true
删除(使用给出的actions)
editurl:"userServlet?method=delete",
jqGrid API:
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); //加载本地数据 datatype:local
jQuery("#gird_id").jqGrid('navGrid','#gridGager',{edit:false,add:false,del:false,position:'right'});
//设置的就是不显示编辑、添加、删除按钮(在分页组件里)
jQuery("#grid_id").jqGrid('getGridParam','selrow'); //返回选中行的id
jQuery("#grid_id").jqGrid('getRowData',rowId); //获得选中行数据,rowId 行号
jQuery("#grid_id").jqGrid('delRowData',rowId); //删除一行记录,servser不会删除
jQuery("#grid_id").jqGrid('setRowData',rowId,datarow); //更新一行数据,server不更新
jQuery("#grid_id").jqGrid('addRowData',rowId,datarow); //添加一行数据,server不添加
jQuery("#grid_id").jqGrid('setSelection',"rowId"); //选中某一行
jQuery("#grid_id").jqGrid('editRow',rowId) //编行行
jQuery("#rowed1").jqGrid('saveRow',rowId); //保存
jQuery("#rowed1").jqGrid('restoreRow',rowId); //取消
jQuery("#grid_id").jqGrid('getGridParam','selarrrow'); //返回多行被选中的id,
jQuery("#grid_id").jqGrid('getDataIDs'); //获得所有巨鹿的id
jQuery("#grid_id").jqGrid('getGridParam','records') //获得总记录条数
重新载入数据:
jQuery(grid_selector).setGridParam({
data : data[0].dataList
}).trigger("reloadGrid");
清空数据:
$(grid_selector).clearGridData();
JQuery.jqGrid()入门
最新推荐文章于 2022-06-21 08:23:05 发布