修改表格数据
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>DataGrid数据表格</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/DataGrid5.js"></script>
<style rel="stylesheet" type="text/css">
.textbox{
height:20px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<table id="box"></table>
<div id="tb" style="padding: 5px; height: auto;">
<div style="margin-bottom: 5px;">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="obj.add();">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="obj.edit();" >修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" >删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" style="display: none;" id="save" onclick="obj.save();" >保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-redo" style="display: none;" id="redo" onclick="obj.redo();">取消编辑</a>
</div>
<div style="padding:0 0 0 7px;">
查询账号：<input type="text" class="textbox" name = "user" style="width:130px;">
创建时间从：<input type="text" class="easyui-datebox" editable="false" name="date_from" style="width:130px;">
到：<input type="text" class="easyui-datebox" editable="false" name="date_to" style="width:130px;">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search();">查询</a>
</div>
</div>
</body>
</html>
Js文件
$(function () {
//注意；如果定义在外面的话，可以不加var，也可以加var定义
//但是写在这里面就不能写var将其变成隐式全局变量，否则无法访问
obj = {
editRow: false,
editCurrentIndex:-1,
search: function () {
$('#box').datagrid("load", {
user: $.trim($("input[name='user']").val()),
dateFrom: $.trim($("input[name='date_from']").val()),
dateTo: $.trim($("input[name='date_to']").val())
});
},
add: function () {
//在本页末尾追加一行
/* $('#box').datagrid("appendRow",{
user : "admin",
email: "[email protected]",
date: "2018-8-8",
});*/
//在指定索引添加一行
/*$("#box").datagrid("insertRow",{
index:0,
row:{
user : "admin",
email: "[email protected]",
date: "2018-8-8",
}
});*/
if (this.editRow == false) {//设置只能添加一行
this.editRow = true;
$("#box").datagrid("insertRow", {
index: 0,
row: {}
});
$("#box").datagrid("beginEdit", 0);
// $("#save").css("display","inline-block");
// $("#redo").css("display","inline-block");
$("#save,#redo").show();
obj.editCurrentIndex = 0;
} else {
alert("不允许重复添加");
}
},
save: function () {
//需要在保存操作成功之后再执行。
// $("#box,#redo").hide();
// this.editRow = false;
//将第一行设置为结束编辑
$("#box").datagrid("endEdit", obj.editCurrentIndex);
},
redo: function () {
$("#box").datagrid("rejectChanges");
$("#save,#redo").hide();
this.editRow = false;
},
edit: function () {
var rows = $("#box").datagrid("getSelected");
var index = $("#box").datagrid("getRowIndex",rows);
console.log(index);
$("#box").datagrid("beginEdit", index);
// this.editRow = true;
$("#box").datagrid("endEdit", obj.editCurrentIndex);
$("#save,#redo").show();
obj.editCurrentIndex = index;
}
};
$("#box").datagrid({
//设置请求路径
url: "getDataGridList.action",
//设置表格宽度
width: 700,
//设置请求方式
type: "GET",
//设置表头图标
iconCls: "icon-search",
//方式一
toolbar: "#tb",
//方式二
/*toolbar:[
{
text:"添加",
iconCls:"icon-add",
handler:function () {
alert("添加");//进行相应的事件处理
}
},{
text:"修改",
iconCls:"icon-edit",
handler:function () {
alert("修改");
}
},{
text:"删除",
iconCls:"icon-remove",
handler:function () {
alert("删除");
}
}
],*/
singleSelect: true,
//设置表头标题
title: "EasyUI数据表格",
//设置是否显示斑马线效果
striped: true,
//设置列适应
fitColumns: true,
//设置是否显示行号
rownumbers: true,
//设置是否分页
pagination: true,
//设置分页时初始化页数
pageNumber: 1,
//设置每页显示的条数
pageSize: 5,
//设置显示条数的下拉列表
pageList: [5, 10, 20],
//设置是否远程加载进行排序
remoteSort: false,
//设置默认排序的名称
sortName: "user",
//设置默认排序的方式
sortOrder: "asc",
//设置分页导航的位置
pagePosition: "bottom",
//设置表格中的列
columns: [[
{
//每一列的名字
title: "用户名",
//数据中的字段名（数据库中的字段名）
field: "user",
//每一列的宽度
width: 100,
//设置列的对齐方式
align: "center",
editor: {
// type:"text",
type: "validatebox",
options: {
required: true,
}
}
}, {
title: "邮箱",
field: "email",
width: 100,
sortable: true,
order: "desc",
editor: {
// type:"text",
type: "validatebox",
options: {
required: true,
validType: "email",
}
}
}, {
title: "日期",
field: "date",
width: 100,
sortable: true,
order: "desc",
// //进行了日期的格式化
// formatter: function (value, row, index) {
//
// return 2018-01-10;
//
// // var time = row.date;
// // var date = new Date(time);
// // // return date;
// // return (date.getFullYear()<=9?'0'+date.getFullYear():date.getFullYear()) + "-" +
// // ((date.getMonth() + 1)<=9?'0'+date.getMonth():date.getMonth()) + "-" +
// // (date.getDate()<=9?'0'+date.getDate():date.getDate());
// // // + " " + (date.getHours()<=9?'0'+date.getHours():date.getHours())
// // // + ":" + (date.getMinutes()<=9?'0'+date.getMinutes():date.getMinutes())
// // // + ":" + (date.getSeconds()<=9?'0'+date.getSeconds():date.getSeconds());
// // // return "";
// // //
// },
editor: {
// type:"datebox",//datebox只有年月日
type: "datetimebox",//datetimebox既有年月日又有时分秒
options: {
//设置必须填
required: true,
//设置不可编辑
editable: false,
}
}
}
]],
//rowIndex点击行的索引值 从0开始
//rowData点击行的记录
onDblClickRow:function (rowIndex,rowData) {
$("#box").datagrid("endEdit",obj.editCurrentIndex);
$("#box").datagrid("beginEdit",rowIndex);
obj.editCurrentIndex = rowIndex;
$("#save,#redo").show();
},
//结束编辑触发
onAfterEdit: function (rowIndex, rowData, changes) {
$("#save,#redo").hide();
obj.editRow = false;
console.log(rowData.user);
console.log(rowData.email);
console.log(rowData.date);
},
});
//扩展dateTimeBox(手册上的代码)
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
options.editable = false;
input.datetimebox(options);
return input;
},
getValue: function (target) {
return $(target).datetimebox('getValue');
},
setValue: function (target, value) {
$(target).datetimebox('setValue', value);
},
resize: function (target, width) {
$(target).datetimebox('resize', width);
},
destroy: function (target) {
$(target).datetimebox('destroy');
},
}
});
});可以看到，可以使用双击的方式来选中指定行，并使该行变成可编辑状态。
如果是只能同时编辑一行的话，需要记录下当前行的下标，在点击下一行，使得下一行变成可编辑状态前，需要将该行变成结束状态。（这里只是在前台页面进行了数据保存）。
问题：
在代码的运行过程中，如果后台传递的时间是Date的话，到前台会将其解析成一个毫秒值，尽管我之前使用formatter将数据进行格式化（yyyy-MM-dd HH:mm:ss），但是其数据本身还是一个毫秒值，所以在单元格变成可编辑状态前，datetimebox无法识别一个毫秒值，所以报错了。s.split()出错，
原因：
原因是datetimebox在解析的时候获得的是一个有格式的时间，yyyy-MM-dd HH:mm:ss，但是一个毫秒值不满足这种格式，在内部执行分割函数的时候，就报错了。
解决方式：
将后台的数据格式有Date改为了String，所以是将有格式的时间通过字符串的方式传递到前台的，不会将其转化为一个毫秒值。（如果大家有什么好的解决方法，欢迎联系我）。
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
