b) user.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/java script">
var editRow = undefined;//用于存放当前编辑行的index
$(function() {
$('#datagrid').datagrid({
url : 'login_getUserJson.action',
title : '用户列表',
iconCls : 'icon-save',
pagination : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
fit : true,//使表格自适应
fitColumns : false,//当使用冻结列：frozenColumms的时候必须设置为false或者不写
nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
border : false,
idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
sortOrder : 'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
frozenColumns : [[{//冻结列、不管数据列再多、拖动下方滚动条时、其中的列都不会滚动（这些列下方根本就没有滚动条）、参数与columns一样、注意：双中括号――[[{xxx},{xxx}]]
title : '编号',
field : 'id',
width : 100,//必须要给
checkbox : true,
}, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
} ]],
columns : [ [ {
title : '密码',
field : 'passWord',
width : 200,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
}, {
title : '创建时间',
field : 'createTime',
width : 200,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
}, {
title : '修改时间',
field : 'updateTime',
width : 200,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
} ] ],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
privateAddUser();
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
privateDelUsers();
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
privateUpdateUser();
}
}, '-',{
text : '保存',
iconCls : 'icon-save',
handler : function() {
$('#datagrid').datagrid('endEdit', editRow);
}
}, '-',{
text : '取消编辑',
iconCls : 'icon-undo',
handler : function() {
//将事务回滚、取消选中的行
editRow = undefined;
$('#datagrid').datagrid('rejectChanges');
$('#datagrid').datagrid('unselectAll');
}
}, '-',{
text : '取消选中',
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('unselectAll');
}
}, '-',{
text : '清空显示',
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('loadData', []);
}
}, '-',{
text : '还原显示',
iconCls : 'icon-redo',
handler : function() {
$('#datagrid').datagrid('load');
}
}, '-' ],
onAfterEdit : function(rowIndex, rowData, changes){
/*
* 如何区别是添加、还是修改？
*/
//获取所有插入的行信息
var inserted = $('#datagrid').datagrid('getChanges','inserted');
//获取所有被修改的行信息
var updated = $('#datagrid').datagrid('getChanges','updated');
//传入后台的url、根据到底是添加、还是修改动态改变、即进入Action中不同的方法。
var url = '';
if(inserted.length > 0){
url='login_addUser.action';
}
if(updated.length > 0){
url='login_updateUser.action';
}
$.ajax({
url : url,
data : rowData,
dataType : 'json',
success : function(r){
if(r.success && r){
//如果成功、则确定显示操作之后的行信息、即点击撤销的时候不会回滚事务（仅是前台、此时后台关于数据库的已经处理）。
$('#datagrid').datagrid('acceptChanges');
//给出提示、是通过后台传过来的一个json对象
$.messager.show({
title : '提示',
msg : r.msg,
});
}else{
//如果失败、则回滚事务（仅是前台、此时后台关于数据库的已经处理）。
$('#datagrid').datagrid('rejectChanges');
$.messager.alert('错误',r.msg,'error');
}
editRow = undefined;
$('#datagrid').datagrid('unselectAll