java_easyui体系之DataGrid（4）
一：简介
在前面DataGrid（3）的基础上添加后台的实现、本来是想只搭建前台页面的、后台不写、现在觉得还是都实现好点、从真实情况出发、后台用的ssh。
1、 新增冻结列功能。
2、 实现界面的添加、删除、修改、撤销编辑、撤销选中、清空datagrid记录的功能、在后台也对其实现。
3、 新增右键菜单功能。
4、 可根据右键菜单来对记录进行新增、修改、删除。
二：效果图
三：关键部分
1、新增冻结列功能：
a) 具体需求描述：
有时候表格的列数太多（这里在前面的补充中也说道过、datagrid的列较少的时候、可以把其一个属性fitColumn设为true、这样列平局充满表格、好看点）的时候、当用户想要参照某个列的数据查看其他数据的时候、比如根据某个人的名字查看他的具体信息、这时候就可以在拖动滚动条查看后面的记录的时候让名字那一列始终按固定大小显示在原来位置、
b) 效果图：
c) 关键代码：作为datagrid的一个属性、当然是在初始化的时候指定：具体的见user.jsp
frozenColumns : [[{//冻结列、不管数据列再多、拖动下方滚动条时、其中的列都不会滚动（这些列下方根本就没有滚动条）、参数与columns一样、注意：双中括号――[[{xxx},{xxx}]]
title : '编号',
field : 'id',
width : 100,//必须要给
checkbox : true,
}, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
} ]],
2、添加、修改
a) 具体业务描述：很常见的操作。
b) 通过datagrid的onAfterEditor事件来提交、这里我暂时只对一行进行操作、不进行批量添加、修改。如何区分是添加事件还是修改事件？
c) 添加、修改都有成功、失败。成功如何将数据持久化到数据库中和页面显示（即点击撤销按钮不会将添加、修改的内容取消显示）？失败如何将事物回滚到添加、删除之前？
d) 关键代码：对上面问题有很详细的注释、这也是注释有点多的原因、不再抽出来。。。
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');
}
});
},
3、右键菜单：
a) 需求描述、用户就喜欢用鼠标右键菜单来操作。
b) 构建右键菜单
c) 如何将右键菜单动态的显示在鼠标单机右键的位置
d) 如何透过显示的右键菜单项操作数据、这里操作数据就是通过onclick事件触发函数、函数功能和datagrid上面的按钮功能几乎一样、代码中做了一个抽取。
e) 关键代码：
构造右键菜单div：
<%-- 通过指定class的方式、构造右键菜单--%>
//显示右键菜单、并且设置显示位置就是触发鼠标右击的位置。
onRowContextMenu : function(e, rowIndex, rowData){
//1、阻止原来浏览器右键事件
e.preventDefault();
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
//显示自定义右键菜单
$('#mm').menu('show', {
//动态显示右键菜单位置
left: e.pageX,
top: e.pageY
});
}
/*
* 右键菜单功能
*/
//添加记录
function addUser(){
privateAddUser();
}
//修改记录
function updateUser(){
privateUpdateUser();
}
//删除记录
function delUsers(){
privateDelUsers();
}
四：源码
1、前台代码：
a) datagrid2.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
My JSP 'original.jsp' starting page
<script type="text/java script" src="js/jquery.min.js">
<script type="text/java script" src="js/jquery.easyui.min.js">
<script type="text/java script" src="js/chyUtils.js">
<script type="text/java script">
function userManage(id){
console.info(id);
if("door" == id){
$('#tt').tabs('select', 0);
}
if("userManage" == id){
$('#tt').tabs('select', 1);
}
}