jquery jqGrid的使用

秦才
2023-12-01

jquery jqGrid的使用

1.先引入jqgrid的js文件,

 

<script type="text/javascript"
				src="${ctx}/common/jqgrid/js/jquery.jqGrid.src.js"></script>

2.jqGrid的使用方法如下:

 

(一),html文件加入一个表格table标签:table

<table  style="width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; padding-top: 3px" id="list2"></table>

(二),在使用jqGrid的具体方法:

jQuery("#list2")//
		.jqGrid(//
		{
		url : WWWROOT+ "/sys/userMgr/loadUsersExceptAuthorizes?defaultOrgId="+OrgId+"&sysId="+sysId,// 组件创建完成之后请求数据的url
		shrinkToFit : true,
		utowidth : true,//
		height : "100%",//
                datatype : "json",// 请求数据返回的类型。可选json,xml,txt//
		colNames : ['userId', '用户姓名', '登录账号', '性别', '公司', '部门' ],// jqGrid的列显示名字 //
		colModel : [ // jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式..... //colNames和colModel的列是相对应的
		{name : 'userId',width : 55,hidden:true},//这一列对应到colNames的userId列
		{
		name : 'userName',width : 55}, {//后台返回的json数据中的userName显示到colNames的用户姓名这一列的
		name : 'account',
		width : 55,
		align : "center"
							}, {
		name : 'sex',
		width : 55,
		edittype : 'select',
		formatter : 'select',
		editoptions : {
		value : "true:男;false:女"
		},
		lign : "center"
							}, {
		name : 'userOrgNames',
		width : 55,
		align : "center"
							}, {
		name : 'userOrgDepNames',
		width : 55,
		align : "center"
							}
							],
		rowNum : 10,// 一页显示多少条
		rowList : [ 10, 20, 30 ],// 可供用户选择一页显示多少条
		pager : '#pager2',// 表格页脚的占位符(一般是div)的id
		multiselect : true,
		/*
		* sortname : 'OrgID',//初始化的时候排序的字段 sortorder :
		* "desc",//排序方式,可选desc,asc
		*/mtype : "post",// 向后台请求数据的ajax的类型。可选post,get
						
		caption : "用户列表"// 表格的标题名字
						});
 

 

 类似资料: