ACE前台框架的使用心得1—TABLE 表格的使用

1.html页面中定义table

<div class="row-fluid">
        <div class="span12">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>

其中的table（grid-table）代表的是表格；id为grid-pager 用于放分页时用到的数据包括（当前是第几页、总共多少页、每页多少条、当前页是第几条到第几条、总共多少条记录）

2.js
（1）首先在js中定义定义表格id和 page id
 // 定义表格id
var grid_selector = "#grid-table";
 // 定义分页id
var pager_selector = "#grid-pager";
（2）在jQuery(function($) {})初始化表格;

jQuery(grid_selector).jqGrid({
		subGrid : false, // 此处设置为true时可以打开子项,子项用不到已删除
		url : "",// 获取数据的地址
		rownumbers : true, 
		datatype : "json",
		mtype : "POST",
		hidegrid : false,//收缩列表按钮
		prmNames : {
			page : "pageNumInput",
			rows : "pageSize"
		},// 重新定义分页信息
		height : 385, // 表格高度
		colNames : ['手机号', '意见内容','提交时间'],
		colModel : [ {
			name : 'phone',
			index : 'phone',
			width : 100,
			editable : true,
		}, {
			name : 'idea',
			index : 'idea',
			width : 120,
			editable : false,
		}, {
			name : 'timestamp',
			index : 'timestamp',
			width : 120,
			editable : false,
		}],
		viewrecords : true,
		rowNum : 20,
		rowList : [20, 50, 100,200],
		pager : pager_selector,
		altRows : true,
		multiselect : false,
		multiboxonly : true,
		emptyrecords : "无数据",
		loadComplete : function(data) {
			var table = this;
			setTimeout(function() {
				styleCheckbox(table);
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0);
			if (data.status == "success") {
				$("#alert_success").show();
				setTimeout(function() {
					$("#alert_success").hide();
				}, 1000);
			}


		},
		jsonReader : { // jsonReader来跟服务器端返回的数据做对应
			root : "dataRows", // 包含实际数据的数组
			page : "currPage", // 当前页
			total : "totalPage",// 总页数
			records : "totalCount", // 查询出的记录数
			id : "id",
			repeatitems : false
		},
		editurl : "",// nothing is saved
		caption : ""
	});

注意：

 1.需要主要的是colNames的个数要和colModel集合中的个数要相同；如果要隐藏列表中的你某个字段时只需要加上hidden：true；

  2.字段显示格式化如下：
 formatter : function(cellValue, options, rowObject){
//其中cellValue是指当前列的值
//rowObject指的是这一行的值
//options 来设置对应formatter的参数，jqGrid中预定义了常见的格式及其options（有待确定）

}

例如时间格式化显示：

 {
			name : 'registrationTime',
			index : 'registrationTime',
			width : 100,
			editable : true,
			formatter : function(cellValue, options, rowObject){
				return getTime(cellValue);
			}
		}

function getTime(time){
	var item ="";
	if(time!=null){
		var date = new Date(time);
		Y = date.getFullYear() + '-';
		M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		D = (date.getDate() < 10  ? '0'+(date.getDate()) : date.getDate())+ ' ';
		h = (date.getHours()< 10  ? '0' +(date.getHours()) : date.getHours() )+ ':';
		m = (date.getMinutes()< 10  ? '0' +(date.getMinutes()) : date.getMinutes() )+ ':';
		s = (date.getSeconds()<10  ? '0' +(date.getSeconds()) : date.getSeconds()); 
		item=Y+M+D+h+m+s;
	}
	return item;
}

注：

registrationTime在实体类中为Date 类型；

例如将某个字段作为连接调到另一个页面

{
		name : 'id',
		index : 'id',
		width : 100,
		editable : true,
		formatter:function(cellvalue,options,rowObject){
			var temp="<a href=\"javascript:void(0)\"  οnclick=\"viewMember("+cellvalue+")\">"+cellvalue+"</a>";
			return temp;	
		}
}

function viewMember(id){
	window.location.href="viewMember.do?id="+id;
}

   

3.将js文件引入到HTML中去