EasyUI_dataGrid

数据表格属性：
$(function (){
$("#ID").datagrid({
url:basePath+"",//远程站点请求数据的地址
loadMsg:"加载数据中...",//载入数据时显示的一条快捷信息
method:"post",//请求远程数据的方法类型
rownumbers:boolean,//true显示行数
singleSelect:boolean,//true只允许选择一行
idField:"id",//表明该列是一个唯一列
toolbar:"#Id",//数据表格顶部面板的工具栏，可做查询
pagePosition:"top",//定义的分页栏的位置,'top','bottom','both'
pagination:boolean,//true在数据表格底部显示分页工具栏(未测试)--设置分页插件
pageSize:number,//设置分页属性时，初始化每页记录数
queryParams:{name:value,},//发送额外参数
columns:[[{}]],//数据表格列配置对象，列
//----------------
frozenColumns:,//同列属性，固定在左边不滚动
fitColumns:boolean,//true自动使列适应表格宽度防止水平滚动
striped:boolean,//true替显示行背景
nowrap:boolean,//true当数据长度超出列宽将自动截取
pageNumber:number,//设置分页属性时，初始化分页码
showFooter:boolean,//是否显示行底（做统计表格可以显示总计等/未测试）
})
})
列属性：
columns:[[
{field:"",//列字段
title:"",//列标题
width:number,//列宽
rowspan/colspan:number,//一个单元格跨几行/列
align:"left",//列数据位置,'left'，'right'，'center'
hidden:boolean,//true隐藏列
checkbox:boolean,//true显示复选框
formatter:function(value,row,index){},//格式化单元格函数
editor:{type:"",options:{}},//type编辑类型：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree--options：对象，对象于编辑类型的编辑器属性
}
]]
事件:
onLoadSuccess:function(){},//数据载入成功时触发
onLoadError,//载入远程数据发生错误时触发
onBeforeLoad,//请求载入数据之前触发，如果返回false将取消载入
onClickRow,//点击行时触发，参数rowIndex：被点击的行索引，从0开始。rowData：被点击的行记录
onDblClickRow,//双击一行时触发,参数同上
onClickCell，//点击单元格时触发
onDblClickCell，//双击单元格时触发
onSelect,//选择一行时触发
onUnselect,//取消选择一行时触发
onSelectAll,//选择所有行时触发
onUnselectAll,//取消选择所有行时触发
onBeforeEdit,//开始编辑一行时触发
onAfterEdit,//编辑完成时触发
onCancelEdit,//取消编辑行时触发
onHeaderContextMenu,//数据表格的列标题被鼠标右键单击时触发
onRowContextMenu,//当一行被鼠标右键单击时触发
方法：
options,//返回属性对象
getPager,//返回页面对象
getPanel,//返回控制面板对象
getColumnFields,//返回列字段，如果设置了frozen属性为true，将返回固定列的字段名
getColumnOption,//返回特定的列属性
getData,//返回已载入数据
getRows,//返回当前页的记录
getFooterRows,//返回行底记录
getRowIndex,//返回指定行的索引，row参数可以是行记录或者是一个id字段的值
getSelected,//返回第一个被选择的行记录或null
getSelections,//返回所有被选择的行，当没有记录被选择时，将返回一个空数组
clearSelections,//取消所有的已选择项
selectAll,//选择所有页面的行
unselectAll,//取消选择所有页面的行
selectRow,//选择一行，行索引从0开始/参数Index
selectRecord,//通过传递id参数来选择一行/参数idValue
beginEdit,//开始编辑一行/index
endEdit,//结束编辑/index
cancelEdit,//取消编辑/index
getEditors,//获取指定行的编辑器/index,编辑器属性-actions/编辑器可做行为;target/目标编辑器jQuery对象;field/字段名;type/编辑器类型.
getEditor,//获取特定的编辑器/options,参数属性-index/行索引;field/字段名.
refreshRow,//刷新一行/index
validateRow,//校验指定的行，如果有效返回true/index
appendRow,//添加一行。 新的行会被添加到最后一个位置/row
insertRow,//插入一个新行/param,属性-index/要插入的行索引，没有定义添加最后一行；row/行数据
deleteRow,//删除一行/index
getChanges,//获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行
acceptChanges,//提交所有修改的数据，提交后的数据将不能再修改或者回滚
rejectChanges,//回滚自创建以来或自上次调用AcceptChanges，所有的变化数据
showColumn,//显示特定的列
hideColumn,//隐藏特定的列
//--------------------------示例----------------------
datagrid前，后台获得关联数据(下拉等)
$.ajax({
url:basePath + "/baseData!getForecast.dhtml",
type:'POST',
async:false,
success:function(data) {
client = data;
}
});
columns:{field:'uId',title:'用户id-name',hidden:false,width:100,
editor:{
id:'uid',
type:'combobox',
options:{
data:client,
valueField:'u_id',
textField:'u_name',
panelHeight:'auto',
required:true
}
},
formatter:function(value,row,index) {
for(var i = 0; i < client.length; i++) {
if(client[i].u_id == value) {
return client[i].u_name;
}
}
return value;
}
}
//日期控件
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
if(parseInt(m) < 10) {
m = "0" + m;
}
if(parseInt(d) < 10) {
d = "0" + d;
}
return y + "-" + m + "-" + d;
};
columns:{field:'sDate',title:'日期',hidden:false,width:100,editor:'datebox',
formatter:function(date) {
if(date == null || date == undefined || date == "") {
return "";
}
return date.split(" ")[0];
}},
//时间控件
$.extend($.fn.datagrid.defaults.editors, {
timespinner : {
init : function (container, options) {
var input = $('<input/>').appendTo(container);
input.timespinner(options);
return input;
},
getValue : function (target) {
var val = $(target).timespinner('getValue');
return val;
},
setValue : function (target, value) {
$(target).timespinner('setValue', value);
},
resize : function (target, width) {
var input = $(target);
if ($.boxModel == true) {
input.resize('resize', width - (input.outerWidth() - input.width()));
} else {
input.resize('resize', width);
}
}
}
});
columns:{field:'sTime',title:'时间',hidden:false,width:100,
editor:{
type:'timespinner',
options:{  
showSeconds: false,
width:100
}
}
}
//纯文本编辑
{field:'sNote',title:'文本',hidden:false,width:100,
editor:{type:'text',options:{required:true}}}
//数字编辑--两位小数
{field:'amount',title:'费用',hidden:false,width:100,
editor:{type:'numberbox',options:{required:true,precision: 2}}}
//给js数组添加删除功能
Array.prototype.removeData = function(data) {
for(var i = 0; i < this.length; i++) {
if(this[i] == data) {
this.splice(i, 1);
}
}
};
//-
function endEditing() {
var flag = true;
/*if(editIndex == undefined) {
return flag;
}*/
var sum = $("#List").datagrid('getRows');
for(var i = 0; i < sum.length; i++) {
if(!$("#List").datagrid('validateRow', i)) {
alert("请填写完整信息");
//here.endEdit(index);
flag = false;
return flag;
}
endEdit(i);
}
editIndex = undefined;
return flag;
}
//-
function endEdit(index) {
if(index >= 0) {
//here.selectRow(index);
$("#List").datagrid('selectRow', index);
$("#List").datagrid('endEdit', index);
//deleteRowIndex(index);
}
};
//获取所有被选择的行索引
function getSelectRowIndex() {
var r = [];
var rows = $("#List").datagrid("getSelections");
if(rows.length <= 0) {
alert("请选择一行记录");
return r;
}

for(var i = 0; i < rows.length; i++) {
var index = $("#List").datagrid("getRowIndex",rows[i]);
r.push(index);
}
return r;
}
//开始编辑所选某一行
function editRow() {
var row = $("#List").datagrid('getSelected');
var index = $("#List").datagrid('getRowIndex', row);
$("#List").datagrid('beginEdit', index);
if(!isExist()) {
if(editIndex == undefined) {
editIndex = [];
}
editIndex.push(index);
}
}
//开始编辑所选所有行
function editRowAll() {
var indexs = getSelectRowIndex();
if(indexs == undefined) {
return;
}
for(var i = 0; i < indexs.length; i++) {
var index = indexs[i];
$("#List").datagrid('selectRow', index);
$("#List").datagrid('beginEdit', index);
if(!isExist(index)) {
if(editIndex == undefined) {
editIndex = [];
}
//here.editIndex.push(index);
addRowIndex(index);
}
}
}
//停止编辑所有行
function endEditAll() {
if(editIndex == undefined) {
return;
}
var array = editIndex.slice(0);
for(var i = 0; i < array.length; i++) {
var index = array[i];
selectRow(index);
$("#List").datagrid('endEdit', index);
editIndex.removeData(index);
}
//here.editIndex = array;
if(editIndex.length <= 0) {
editIndex = undefined;
}
}
//添加一行时更新索引信息
function addRowIndex(index) {
if(index >= 0) {
if(editIndex == undefined) {
editIndex = [];
editIndex.push(index);
return;
}
if(!isExist(index)) {
editIndex.push(index);
}
}
}
//判断索引在数组中是否已存在
function isExist(index) {
var flag = false;
if(editIndex == undefined) {
return flag;
}
for(var i = 0; i < editIndex.length; i++) {
var id = parseInt(editIndex[i]);
if(index == id) {
flag = true;
return flag;
}
}
return flag;
}
//取消所有操作
function cencel() {
$("#List").datagrid("rejectChanges");
/*开始修复数据代码 easyui-1.3.2 rejectChanges方法造成的表格瘫痪*/
var data = $.data($("#List")[0], "datagrid");
var selectedRows = data.selectedRows;
var checkedRows = data.checkedRows;
var newSelectedRows = [], newCheckedRows = [];
for (var i = 0; i < selectedRows.length; i++) {
if (selectedRows[i] != undefined) {
newSelectedRows.push(selectedRows[i]);
}
}
for (var i = 0; i < checkedRows.length; i++) {
if (checkedRows[i] != undefined) {
newCheckedRows.push(checkedRows[i]);
}
}
data.selectedRows = newSelectedRows;
data.checkedRows = newCheckedRows;
/*修复数据代码结束*/
editIndex = undefined;
}
//新增、修改保存
function saveOne(){
if (endEditing()) {
var inserted = $("#List").datagrid('getChanges', 'inserted');
var deleted = $("#List").datagrid('getChanges', 'deleted');
var updated = $("#List").datagrid('getChanges', 'updated');

var dataRow = new Object();
if (inserted.length) {
dataRow["insertData"] = JSON.stringify(inserted).replace(/\"/g, "'");
}
if (updated.length) {
dataRow["updateData"] = JSON.stringify(updated).replace(/\"/g, "'");
}
if (deleted.length) {
dataRow["deleteData"] = JSON.stringify(deleted).replace(/\"/g, "'");
}


var dataInfo = JSON.stringify(dataRow);
$.ajax({
url:basePath + '/xx!xx.dhtml',
type:'POST',
data:{dataInfo:dataInfo},
beforeSend:function(XHR) {
if(!endEditing()) {
alert('信息填写不完整');
return false;
}
parent.$.messager.progress({
text:'保存中请稍候...'
});
return true;
},
success:function(data, textStatus, jqXHR) {
parent.$.messager.progress('close');
if(data.status == "N") {
alert(date.info);
return false;
}
$("#List").datagrid("load");
},
error:function() {
parent.$.messager.progress('close');
alert("未知错误");
return false;
}
});
}
}
//datagrid外设置主页分页插件
var p = $("#List").datagrid('getPager');
$(p).pagination({
pageSize:20,
pageList:[20],
beforePageText:'第',
afterPageText:'页     共{pages}页',
displayMsg:'共{total}条记录',
buttons:[{
iconCls:'icon-add',
text:'弹窗',
handler:function(){
if(endEditing()) {
$("#add").dialog("open");
query();
}
}
},'-',{iconCls:'icon-add',
text:'添加',
handler:function(){
$("#List").datagrid('insertRow', {
index: 0,
row: {}
});
$("#List").datagrid('beginEdit', 0);
$("#List").datagrid('selectRow', 0);
editIndex = 0;
}
},'-',{iconCls:'icon-delete',
text:'删除',
handler:function(){
var row = $("#allList").datagrid('getSelected');
var index = $("#allList").datagrid('getRowIndex', row);
if(row!=null){
$.messager.confirm('确认','确认删除?',function(res){
if(res){
if(endEditing()){
$("#allList").datagrid("deleteRow",index);
editIndex = index;
saveItem();
}
}
})
}else{
alert("请选择要删除的数据");
}
}
},'-',{iconCls:'icon-edit',
text:'单个编辑',
handler:function(){
var index = $("#List").datagrid('getRowIndex', row);
if(index != editIndex) {
if(endEditing()) {
$("#List").datagrid('beginEdit', index);
editIndex = index;
}
}
}
}'-',{iconCls:'icon-edit',
text:'点击进入全部编辑',
handler:function(){
var rows = $("#LiftEleOwnList").datagrid('getRows');
for(var i = 0; i < rows.length; i++) {
$("#List").datagrid("selectRow", i);
$("#List").datagrid("beginEdit", i);
}
}
}'-',{iconCls:'icon-cancel',
text:'取消',
handler:function() {
cencel();
}
},'-',{iconCls:'icon-save',
text:'保存',
handler:function() {
saveItem();
}
}]
});
//添加窗口
$("#add").dialog({
title:'添加窗口',
width:800,
height:400,
closed:true,
modal:true
});
//设置弹出框分页插件
var pp = $("#itemList").datagrid('getPager');
$(pp).pagination({
pageSize:10,
pageList:[10],
beforePageText:'第',
afterPageText:'页     共{pages}页',
displayMsg:'共{total}条记录',
buttons:[{
iconCls:'icon-add',
text:'确认',
handler:function(){
var rows =  $("#itemList").datagrid("getSelections");
if(rows.length < 1) {
alert("请选择要添加的行！");
return;
}
add(rows);
$("#add").dialog("close");
}
}]
});
//add弹出窗传递数据
function add(rows) {
for(var i = 0; i < rows.length; i++) {
var date = "";
var time = "";
var dateStr = "";
if(rows[i]['Date'] != "" && rows[i]['Date'] != undefined && rows[i]['Date'] != null) {
date = rows[i]['Date'].split(" ");
dateStr = date[0];
time = date[1];
}
$("#List").datagrid("insertRow", {
index:0,
row:{
xx:rows[i]['xx'],
Date:dateStr,
Time:time,
}
});
addRowIndex(0);
$("#List").datagrid('selectRow', 0);
$("#List").datagrid('beginEdit', 0);
}
}
//过滤查询
function query() {
$("#List").datagrid("load",{
Date:$("#Date").datebox("getValue"),
xx:$("#xx").val()
});
}
//--------------------------后台----------------------------
Action--
//获取列表
public void getList() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
Map<String, Object> params = new HashMap<String, Object>();
int intPage = Integer.parseInt((page == null || page == "0") ? "1": page);
int number = Integer.parseInt((rows == null || rows == "0") ? "20": rows);
int start = (intPage - 1) * number;
PrintWriter out = null;
try {
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(Date.class,new JsonDateValueProcessor());
//前台传递过滤条件
if(null != xx && !"".equals(xx.trim())) {
params.put("x.xx", xx);
}
List = xxService.findAll(start, number,params);
StringBuffer str = JsonUtil.dataGrid(List, jsonConfig);
out = response.getWriter();
out.write(str.toString());
out.flush();
} catch (IOException e) {
logger.error("查询失败：" + e.getMessage());
} finally {
if (null != out) {
out.close();
}
}
}
//保存数据--新增、修改、删除
@Result(name = "save", type = "json", params = { "root", "message" })
public String save() {
message = new HashMap<String, Object>();
Map<String, Object> data = JsonUtil.jsonChanMap(dataInfo);
try {
message.put("status", CommonInfo.NO);
message.put("info", "保存失败");
if (xxService.save(data)) {
message.put("status", CommonInfo.YES);
message.put("info", "保存成功");
}
} catch (Exception e) {
logger.error("保存列表失败：" + e.getMessage());
}
return "save";
}
DaoImpl层--
public Map<String, Object> findAll( Integer start, Integer end,Map<String, Object> params) {
Map<String, Object> data = new HashMap<String, Object>(); 
StringBuilder where = new StringBuilder();
StringBuilder sql = new StringBuilder();
StringBuilder sqlCount = new StringBuilder("SELECT COUNT(*) ");
sql.append("SELECT x.xx AS xx ");

where.append("FROM xxx x ");
where.append("WHERE 1=1 ");

for(Map.Entry<String, Object> e:params.entrySet()) {
where.append(" AND ").append(e.getKey()).append(" LIKE '%").append(e.getValue()).append("%' ");
}
sqlCount.append(where);
long count = JdbcUtils.count(sqlCount.toString());
data.put("total", count);
where.append(" ORDER BY mo.leo_enter_date DESC LIMIT ?,?");
sql.append(where.toString());
System.out.println("输出sql语句：" + sql.toString());
List<XX> dataList = JdbcUtils.query(XX.class, sql.toString(), start, end);
data.put("data", dataList);
return data;
}
ServiceImpl层--
//转换数据
public List<XX> changeBean(List<Map<String, Object>> xlist) {
List<XX> list = new ArrayList<XX>();
DateFormat format = new SimpleDateFormat("yyyy-MM-dd");
if(null != xlist) {
for(Map<String, Object> l:xlist) {
XX x = new XX();
if(!CommonUtils.isEmpty(l.get("xx"))) {
x.set((String) l.get("xx"));
}
if(!CommonUtils.isEmpty(st.get("Date"))) {
try {
Date date = format.parse((String) st.get("Date"));
mle.setDate(date);
} catch (ParseException e) {
e.printStackTrace();
}
}
Double fees =0.0;
if(!CommonUtils.isEmpty(l.get("num"))) {
if(l.get("num") instanceof Integer){
fees = ((Integer)l.get("num")).doubleValue();
mle.setNum(num);
}else if(l.get("num") instanceof String){
fees = Double.valueOf((String) l.get("num"));
mle.setNum(num);
}
}
list.add(mle);
}
}
return list;
}
//增删改保存
public boolean save(Map<String, Object> data) throws Exception {
try{
JdbcUtils.beginTransaction();
List<> inserts = this.changeBean((List<Map<String, Object>>) data.get("inserted"));
List<> deletes = this.changeBean((List<Map<String, Object>>) data.get("deleted"));
List<> updates = this.changeBean((List<Map<String, Object>>) data.get("updated"));
if(null != inserts && inserts.size() > 0) {
for(X le:inserts) {
le.setLeoId(String.valueOf(UUID.randomUUID()));
Dao.insert(le);
}
}
if(null != deletes && deletes.size() > 0) {
for(X le:deletes) {
Dao.deleteOne(Leoid);
}
}
if(null != updates && updates.size() > 0) {
for(X le:updates) {
Dao.updateOne(le);
}
}
JdbcUtils.commitTransaction();
return true;
}catch(Exception e) {
JdbcUtils.rollbackTransaction();
e.printStackTrace();
throw e;
}

}