效果图:
-
首先分析easyUI Datagrid 的columns 属性:
[[{
title: ‘字段名称’,
field: ‘name’,
width: 160,
rowspan: 2,
align: ‘center’,
sortable: true
}, {
title: ‘字段名称’,
field: ‘des1’,
width: 120,
colspan: 3,
align: ‘center’,
sortable: true
}],
[{
title: ‘字段名称’,
field: ‘des2’,
width: 40,
align: ‘center’,
sortable: true
}]] -
根据上面的数据构建实体类 ColumnInfo:
private String field;
// 表头名字
private String title;
// 单元格宽度
private int width;
// 合并行
private int rowspan;
// 合并列
private int colspan;
// 对齐方式
private String align;
// 单元格的格式化函数
private String formatter;
// 允许被排序
private boolean sortable;
// 是否隐藏
private boolean hidden;
// 编辑
private Map<String, Object> editor;
- 在controller中根据上面的数据进行组装表头:
// 获取表头
@RequestMapping(value = { "getHeader" }, method = RequestMethod.POST)
@ResponseBody
public List<List<ColumnInfo>> getHeader() {
List<ColumnInfo> columnInfoList = new ArrayList<>();
int index = 1;
// 该方法时查询出要组装的title
List<VipLevelInfo> vipLevelInfoList = vipLevelInfoService.getHeader();
for (VipLevelInfo vipLevelInfo : vipLevelInfoList) {
Map<String, Object> editor = getEditoe();
// "levelName" + index 有规律的定义field
ColumnInfo columnInfo = setColumnInfo("levelName" + index, vipLevelInfo.getLevelName(),80,false,"",editor);
columnInfoList.add(columnInfo);
index++;
}
List<List<ColumnInfo>> headerList = new ArrayList<>();
headerList.add(columnInfoList);
return headerList;
}
private ColumnInfo setColumnInfo(String field, String title,Integer width,boolean hidden,String formatter,Map<String, Object> editor) {
ColumnInfo columnInfo = new ColumnInfo();
columnInfo.setTitle(title);
columnInfo.setField(field);
columnInfo.setAlign("center");
columnInfo.setWidth(width);
columnInfo.setColspan(0);
columnInfo.setRowspan(0);
columnInfo.setSortable(false);
columnInfo.setFormatter(formatter);
columnInfo.setHidden(hidden);
columnInfo.setEditor(editor);
return columnInfo;
}
// 获取editor属性
private Map<String, Object> getEditoe() {
// "editor": { "type": "combobox", "options":{ "data": [{ "value": "0", "text": "否" }, { "value": "1", "text": "是" }] , "valueField": "value", "textField": "text" } }},';
Map<String, Object> editor = new HashMap<>();
editor.put("type", "combobox");
Map<String, Object> options = new HashMap<>();
List<Map<String, Object>> dataList = new ArrayList<>();
Map<String, Object> data1 = new HashMap<>();
data1.put("value", "0");
data1.put("text", "否");
Map<String, Object> data2 = new HashMap<>();
data2.put("value", "1");
data2.put("text", "是");
dataList.add(data1);
dataList.add(data2);
options.put("data", dataList);
options.put("valueField", "value");
options.put("textField", "text");
editor.put("options", options);
return editor;
}
- 页面请求
显示位置
引入的文件:
js代码:
$(function() {
initDatagrid();//初始化,dataGrid
});
function initDatagrid() {
var editRow = undefined;
$.ajax({
url : "<%=request.getContextPath()%>/vip/getHeader", //获取表头
type : "POST",
contentType : "application/json",
dataType : "json",
data : {
},
error : function(response) {
console.log("获取表头失败!");
},
success : function(columns) {
// 该方法为添加 formatter 属性
for(var j in columns){
var d = columns[j];
for(var i in d){
if(d[i].formatter =="undefined"){
delete d[i].formatter;
}else{
d[i].formatter = function(val,row,index){
if(val == "0"){
return "<span style='color: red'>χ</span>";
}else if(val=='1'){
return "<span style='color: blue '>√</span>";
}else{
return "<span style='color: red'>χ</span>";
}
}
}
}
}
$("#roleGrid").datagrid({
title:"vip权益信息列表",
emptyMsg : "没有记录",
rownumbers : true,
singleSelect: true,
pagination: true,
singleSelect : true,
idField: "datainfoId",
fit:true,
toolbar : '#tb',
columns : columns,
onDblClickRow: function (rowIndex, rowData) {
// 双击进行修改
if (editRow != undefined) {
$("#roleGrid").datagrid('endEdit', editRow);
}
if (editRow == undefined) {
$("#roleGrid").datagrid('beginEdit', rowIndex);
editRow = rowIndex;
}
},
onClickRow: function (rowIndex, rowData) {
// 单击进行保存
if (editRow != undefined) {
$("#roleGrid").datagrid('endEdit', editRow);
updateDatagrid(editRow);
editRow = undefined;
}
}
});
getDataGridData();//加载数据
//$("#roleGrid").datagrid("loadData", msg.rows); //动态取数据
}
});
function updateDatagrid(editRow) {
var rows = $('#roleGrid').datagrid('getRows');
var entities = "";
entities = JSON.stringify(rows[editRow]);
console.info(entities);
$.ajax({
url: "<%=request.getContextPath()%>/vip/save",
type: 'POST',
async: true,
dataType: 'json',
data: {
'entities': entities
},
success: function(data) {
if(data.message == 'success') {
alert(data.message);
} else {
alert(data.message);
return;
}
$('#roleGrid').datagrid('reload');
}
});
}
function getDataGridData() {
$.ajax({
url : "<%=request.getContextPath()%>/vip/getData",
type : "POST",
contentType : "application/json",
dataType : "json",
data : {
},
error : function(response) {
console.log("error");
},
success : function(data) {
$("#roleGrid").datagrid({
data : data
})
}
})
}
}