jqGrid基本实现
第一步：定义实体类Sensor，SensorType 包含如下属性
public class SensorType {
protected String name;
}
public class Sensor {
protected String name;
protected String code;
private Float upperLimit;
private Float lowerLimit;
private SensorType sensorType; //SensorType是另一实体类
//get set方法
}
第二步：html代码
<div class="panel-body">
<table id="list"></table>
<div id="pager"></div>
</div>
<style>
/*表格内容过长时，换行显示*/
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height: auto;
}
/*表格列标题过长时，换行显示*/
th.ui-th-column div {
/* jqGrid columns name wrap */
white-space: normal !important;
height: auto !important;
padding: 0px;
}
/*表格内容过长（以表格宽度为准），用省略号表示*/
.ui-jqgrid-btable tr.jqgrow td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>第三步：js代码
1.表格内容过长，换行显示
1.表格列标题过长，换行显示
2.表格宽度自适应或者定宽，横向滚动条的设置 （ 属性autowidth、width、shrinkToFit）
3.表格高度自适应后者定高：（属性heigth）
4.只显示前20个字符，鼠标放上去才显示所有 StrLenFormat
4.给表格添加序号
4.给表格添加序号（分页后不从0开始排）
5.表格中行的排序 （属性sortname 、sortorder ）
6.表格内容格式化 （属性formatter）
7.通过url往后台传参数
8.不分页显示，修改rowNum : 0, 注释掉 rowList : [ 10, 20, 30 ]，添加pgbuttons : false,pginput : false,
9.隐藏列 colModel 中的hidden属性
10.表格初始化时不加载数据，根据条件再触发加载：
(1)初始化时 datatype : “local”
(2)加载数据时
$("#list").jqGrid('setGridParam', {
datatype : 'json'
}).trigger('reloadGrid');<script language="JavaScript">
var id = 9;
jQuery("#list")
.jqGrid(
{
url : 'DRBluePrint/json/all'+id,//组件创建完成之后请求数据的url
datatype : "json",//请求数据返回的类型。可选json,xml,txt
autowidth : true,//宽度自适应
shrinkToFit : false,//会出现横向滚动条
height : 'auto',//高度自适应，不会出现滚动条
//height : 200,//高度写死，可能会出现滚动条
//pgbuttons : false,//上下按钮
//pginput : false,//输入框即可
colNames : [ '序号','序号2', '线路', '执行区间', '里程', '开始时间', '操作' ],//jqGrid的列显示名字
colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
{
name : 'myrn',index : 'myrn',width : 80,sortable : false,align : "left"
}, {
name : 'myrn2',index : 'myrn2',width : 80,sortable : false,align : "left"
}, {
name : 'section.railway.name',index : 'section.railway.name',width : 100,align : "left"
}, {
name : 'section.name',index : 'section.name',width : 200,align : "left"
}, {
name : 'rangeMileage',
width : 100,
align : "left",
hidedlg : true, //隐藏列
hidden : true//隐藏列
}, {
name : 'beginTime',index : 'beginTime',formatter : timeFormatter,width : 180,align : "left"
}, {
name : 'edit',index : 'edit',width : 240,
} ],
rowNum : 10,//一页显示多少条 传后台
rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
pager : '#pager',//表格页脚的占位符(一般是div)的id
sortname : 'id',//初始化的时候排序的字段 默认的排序列 传后台
sortorder : "desc",//排序方式,可选desc,asc
mtype : "post",//向后台请求数据的ajax的类型。可选post,get
viewrecords : true,
jsonReader : {
root : "content", //数据
page : "", //*当前页，这样才能实现翻页*
total : "totalPages", // 总页数
records : "totalElements",//从服务器端返回的记录数
repeatitems : false,
id : "id"
},
gridComplete : function() { // 数据加载完成后 执行的操作
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var page = $('#list').getGridParam('page');//当前页码
var rowNum = $('#list').getGridParam('rowNum');//当前每页显示数量
var editBtn = "<a href='javascript:void(0)' onclick='updateItem(\"DRBluePrint/prepareUpdate/"
+ id
+ "\")'><i class='glyphicon glyphicon-edit'></i> 编辑</a> |"
+ "<a href='javascript:void(0)' class='deleteTr' onclick='deleteItem("
+ id
+ ")'><i class='glyphicon glyphicon-remove'></i> 删除</a>";
jQuery("#list").jqGrid('setRowData', ids[i], {
myrn : i + 1,
myrn2 : (page - 1) * rowNum + i + 1,
edit : editBtn
});
}//end for
},//end gridComplete
caption : ""//表格的标题名字
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
search : false
});
/*把时间戳转换为字符串形式*/
function timeFormatter(cellvalue, options, rowObject) {
//rowObject是对应这一行的对象，cellvalue是这个对应这个表格的内容
//可以通过对应的字段名，拿到这个字段的内容如 var rangeMileage=rowObject['rangeMileage']
if (cellvalue == null) {
return '';
} else {
var date = new Date(cellvalue);
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());
var result = Y + M + D + h + m + s;
return result; //result转换后的String类变量
}
}
//只显示前20个字符，鼠标放上去才显示所有
function StrLenFormat(cellvalue, options, rowObject) {
var oldstrlen = cellvalue.length;
var newstr = "";
if (oldstrlen > 20) { //如果文本多于20个字符，截取前100个字符显示
newstr = cellvalue.substring(0, 20) + "...";
newstr = "<div title='"+cellvalue+"'>" + newstr + "</div>";
} else {
newstr = cellvalue;
}
return newstr;
}
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle : true, //没有表头的列是否与表头列位置的空单元格合并
groupHeaders : [
//合并 startColumnName(开始列),以myrn列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为'两个序号'
{
startColumnName : 'myrn',
numberOfColumns : 2,
titleText : '两个序号'
}, {
startColumnName : 'section.railway.name',
numberOfColumns : 2,
titleText : '线路和区间'
}, {
startColumnName : 'beginTime',
numberOfColumns : 2,
titleText : '时间和操作'
}, ]
});
</script>第四步：控制器方法
import com.alibaba.fastjson.serializer.SerializerFeature;
@RequiresPermissions("sensor:menu")
@RequestMapping(value = "sensor/DRBluePrint/json/all/{id}", method = RequestMethod.POST)
public void getAllSensors(Model model, @RequestParam(value = "page", defaultValue = "1") int pageNumber,
@RequestParam(value = "rows", defaultValue = Constants.PAGE_SIZE + "") int pageSize,
@RequestParam(value = "sord", defaultValue = "desc") String sord,
@RequestParam(value = "sidx", defaultValue = "id") String sidx, @PathVariable("id") Long id,ServletRequest request,
ServletResponse response) throws IOException {
//使用参数id
/**第1步：生成Pageable类对象*/
Sort sort = new Sort(Direction.fromString(sord), sidx);
Pageable pageable = buildPageRequest(pageNumber, pageSize, sort);
/**第2步：调用本来就有的findAll()函数*/
Page<Sensor> sensor =deviceService.findAll(pageable)
/**第3步：返回到页面*/
response.setContentType("application/json; charset=UTF-8");
/*不会重复引用*/
response.getWriter().print(JSON.toJSONString(sensor, SerializerFeature.DisableCircularReferenceDetect));
}最后，自定义生成Pageable类对象的函数
/**分页函数就，可选分页数极其排序规则分页*/
public Pageable buildPageRequest(int pageNumber, int pageSize, Sort sort) {
if (pageNumber < 1) {
pageNumber = 1;
}
return new PageRequest(pageNumber - 1, pageSize, sort);
}
/**可选分页数量，默认排序*/
public Pageable buildPageRequest(int pageNumber, int pageSize) {
if (pageNumber < 1) {
pageNumber = 1;
}
Sort sort = new Sort(Direction.DESC, "id");
return new PageRequest(pageNumber - 1, pageSize, sort);
}表格宽度，横向滚动条
autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。
width:如果没有设置，则宽度应为所有的列宽之和。 如果设置了宽度，则每列的宽度会根据shrinkToFit选项的设置进行时设置。。。
shrinkToFit：根据width计算每列宽度的算法。。默认是true。。如果shrinkToFit为true并且设置了width值，则每列的宽度会根据width成比例的缩放。。如果shrinkToFit为false并且设置了width值或者设置了autowidth为true，则每列的宽度不会成比例缩放，而是每列的宽度保持原有设置，而Grid会有滚动条。。。
表格的宽度已autowidth或者width为准。。。是不是有滚动条已shrinkToFit为准。。。
表格高度，纵向滚动条
height ：Grid的高度，可以接受数字、%值、auto，默认值为150。
如果是设置了数字，并且表格的行太多，就会自动出现纵向滚动条
