java_easyui体系之DataGrid（3）[转]
一：简介
在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：
1、 增加一条记录的时候：
a) 在datagrid表格最前端增加一行（当然也可在指定位置增加、）增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，
b) 当有一条新增记录没有被保存时不能再增加新的行
c) 点击保存按钮、保存新增记录
d) 未保存之前点击撤销按钮、取消新增行
2、 修改一条记录的时候
a) 可以选择一条记录、点击修改之后出现可编辑状态
b) 可以双击一条记录直接出现可编辑状态、
c) 不管是那种进入修改的方式、都只能同时修改一条记录、并且密码列不允许编辑
3、 撤销功能：
a) 当点击新增、出现新增行之后、不想修改则可以取消新增
b) 当进入修改状态时、不想修改、点击撤销可取消修改状态
4、 删除：
a) 可同时删除多条记录、在删除之前会给出确认框、用于避免误删。
5、 关于新增、修改的与后台的交互操作、都是通过datagrid的onAfterEdit事件来完成的。具体的逻辑可根据自己的需要自行扩展
6、 对处于可编辑状态行的输入信息框进行了扩展：
a) 对用于选择时间的input扩展了一个datetimebox可以精确选择时间的功能
b) 对某列是否具有可编辑功能进行了扩展
二：关键之处
1、效果图：
2、datetimebox的扩展及使用方式
a）扩展代码：在自己定义的js中、页面必须引入此js文件
/**
* 扩展的关于编辑状态的 对要输入日期的控件使用
*/
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var editor = $('<input>').appendTo(container);
options.editable = false;
editor.datetimebox(options);
return editor;
},
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');
},
}
});
b）使用方式：是在datagrid初始化时用于显示时间的相应列上加的属性、可见页面源码
title : '创建时间',
field : 'createTime',
width : 100,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
3、editor的扩展及使用方式
a）扩展代码：在自己定义的js中、页面必须引入此js文件
/**
* 动态的选择处于修改状态的行中的某些列是否可编辑
*/
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param){
if(param instanceof Array){
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param){
if(param instanceof Array){
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
b）使用方式：是在点击修改按钮时触发的函数中、同样双击事件中也要加上、保持一致。
text : '修改',
iconCls : 'icon-edit',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length ==1){
//修改时、取消密码一栏的可编辑状态
$('#datagrid').datagrid('removeEditor', 'passWord'); if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
$('#datagrid').datagrid('unselectAll');
}
}else if( rows.length == 0){
$.messager.alert('提示', '请选择一条修改记录！','info');
}else if(rows.length >= 1){
$.messager.alert('提示', '只能选择一条修改记录！','info');
}
}
三：页面源码
各个方法代码中都有很明确的注释、不再单独赘述。
1、首页 datagrid2
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<title>My JSP 'original.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/chyUtils.js"></script>
<script type="text/javascript">
function userManage(id){
console.info(id);
if("door" == id){
$('#tt').tabs('select', 0);
}
if("userManage" == id){
$('#tt').tabs('select', 1);
}
}
</script>
<div data-options="region:'north', split:false" style="height:100px;"></div>
<div data-options="region:'east',title:'在线列表',split:true" style="width:160px;"></div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
<ul>
<li>门户 </li>
<li>用户管理</li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'欢迎'," style="overflow: hidden;">
<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">
<div title="门户" data-options="closable:true">
门户
</div>
<div id="userManage" title="用户管理" data-options="href:'user.jsp',closable:true">
</div>
</div>
</div>
2、user.jsp:
<script type="text/javascript">
$(function() {
var editRow = undefined;//用于存放当前编辑行的index $('#datagrid').datagrid({
url : 'login_getJson.action',
title : '用户列表',
iconCls : 'icon-save',
pagination : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
fit : true,//使表格自适应
fitColumns : true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
border : false,
idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
sortOrder : 'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
columns : [ [ {
title : '编号',
field : 'id',
width : 100,//必须要给
//sortable:true,//指定按照这个排序
checkbox : true, }, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
} }, {
title : '密码',
field : 'passWord',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
}, {
title : '创建时间',
field : 'createTime',
width : 100,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
}, {
title : '修改时间',
field : 'updateTime',
width : 100,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
} } ] ],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() { if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
$('#datagrid').datagrid('addEditor', {
field : 'passWord',
editor : {
type:'validatebox',
options:{
required: true,
}
}
}); $('#datagrid').datagrid('insertRow', {
index : 0,
row : {
id : "1",
userName:'请输入名称',
passWord:'请输入密码'
}
});
editRow = 0;
$('#datagrid').datagrid('beginEdit',0); /* 在最后一行添加一个增加行。
$('#datagrid').datagrid('appendRow', { });
var rows = $('#datagrid').datagrid('getRows').length;
$('#datagrid').datagrid('beginEdit',rows-1);
*/
}
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length > 0){
$.messager.confirm('请确认','您确定要删除当前选择的'+rows.length+'项吗？', function(option){
if(option){
//一般将id的一个集合传到后台删除
var ids = [];
for(var i = 0; i< rows.length; i++){
ids.push(rows[i].id);
}
console.info(ids.join(','));
/*在这里将id拼接的字符串传到后台、将其删除、调用ajax、在
ajax的success中再重新加载一下datagrid表格:
$('#datagrid').datagrid('load',{});
*/ }
});
}else{
$.messager.alert('提示', '请选择要删除的记录', 'error');
}
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length ==1){
//修改时、取消密码一栏的可编辑状态
$('#datagrid').datagrid('removeEditor', 'passWord'); if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
$('#datagrid').datagrid('unselectAll');
}
}else if( rows.length == 0){
$.messager.alert('提示', '请选择一条修改记录！','info');
}else if(rows.length >= 1){
$.messager.alert('提示', '只能选择一条修改记录！','info');
}
}
}, '-',{
text : '保存',
iconCls : 'icon-save',
handler : function() {
$('#datagrid').datagrid('endEdit', editRow);
}
}, '-',{
text : '取消编辑',
iconCls : 'icon-redo',
handler : function() {
//将事务回滚、取消选中的行
editRow = undefined;
$('#datagrid').datagrid('rejectChanges');
$('#datagrid').datagrid('unselectAll');
}
}, '-' ],
onAfterEdit : function(rowIndex, rowData, changes){
console.info(rowData);
//使用ajax提交、在success中处理、如果添加成功
/*
1、添加成功
editRow = undefined;
2、添加不成功
$('#datagrid').datagrid('beginEdit', rowIndex);
*/ //假设添加成功
editRow = undefined; },
//双击修改行
onDblClickRow : function(rowIndex, rowData){
$('#datagrid').datagrid('unselectAll');
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
$('#datagrid').datagrid('removeEditor', 'passWord');
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
}
}
});
}); //查询数据
function show() {
$('#datagrid').datagrid('load', serializeObject($('#searchForm')));
} //清除查询条件、返回初始数据展示状态
function clean() {
$('#datagrid').datagrid('load', {});
$('#searchForm').find('input').val('');
}
</script> <div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tbody><tr>
<th>用户名</th>
<td><input id="username" name="username" style="width: 320px">
</td>
</tr>
<tr>
<th>创建时间</th>
<td><input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;"> 至 <input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;"></td>
</tr>
<tr>
<th>修改时间</th>
<td><input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;"> 至 <input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;"> 查询 清空</td>
</tr>
</tbody></table>
</form> </div> <div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div> </div>
3、LoginAction——getJson()：
public String getJson() throws IOException{
List<userdto> userList = new ArrayList<userdto>();
userList.add(new UserDTO("1","chy","123",getCurrentTime(),getCurrentTime()));
userList.add(new UserDTO("2","mxx","123",getCurrentTime(),getCurrentTime()));
userList.add(new UserDTO("3","chk","123",getCurrentTime(),getCurrentTime()));
if("chy".equals(username)){
userList.add(new UserDTO("4","chy","123",getCurrentTime(),getCurrentTime()));
}
//当与后台交互时、可以根据前台回传的页号与每页记录数查询数据
//List<userdto> userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。
//但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台
//int count = userService.getUersCount();
/*
* 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order
* List<userdto> userList = userService.getUsers(page, rows, sort, order)
*/
System.out.println("sort" + sort + " order" + order);
Map<string, object=""> m = new HashMap<string, object="">();
m.put("total", 12);
m.put("rows", userList);
System.out.println(getJson(m));
PrintWriter pw = ServletActionContext.getResponse().getWriter();
pw.write(getJson(m));
pw.flush();
pw.close();
return null;
}
private String getCurrentTime(){
SimpleDateFormat sDateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
return sDateFormat.format(new java.util.Date());
}
private String getJson(Object o) throws IOException,
JsonGenerationException, JsonMappingException {
ObjectMapper om = new ObjectMapper();
StringWriter sw = new StringWriter();
JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
om.writeValue(jg, o);
jg.close();
return sw.toString();
}</string,></string,></userdto></userdto></userdto></userdto>
4、UserDTO：
package com.chy.ssh.business.bean;
import java.io.Serializable;
@SuppressWarnings("serial")
public class UserDTO implements Serializable{
private String id;
private String userName;
private String passWord;
private String createTime;
private String updateTime;
public UserDTO() {
super();
}
public UserDTO(String id, String userName, String passWord,
String createTime, String updateTime) {
super();
this.id = id;
this.userName = userName;
this.passWord = passWord;
this.createTime = createTime;
this.updateTime = updateTime;
}
public String getCreateTime() {
return createTime;
}
public void setCreateTime(String createTime) {
this.createTime = createTime;
}
public String getUpdateTime() {
return updateTime;
}
public void setUpdateTime(String updateTime) {
this.updateTime = updateTime;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassWord() {
return passWord;
}
public void setPassWord(String passWord) {
this.passWord = passWord;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
5、chyUtils.js:
/**
* 动态的选择处于修改状态的行中的某些列是否可编辑
*/
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param){
if(param instanceof Array){
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param){
if(param instanceof Array){
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
四：补充说明
代码贴的比较多、这样看起来会有头有尾一点、以后用可以直接copy。。。没有与后台交互、但是这里不是重点、页面写好、后台就视个人而定了。
java_easyui体系之DataGrid（3）[转]的更多相关文章
- java_easyui体系之DataGrid（4）[转]
一:简介 在前面DataGrid(3)的基础上添加后台的实现.本来是想只搭建前台页面的.后台不写.现在觉得还是都实现好点.从真实情况出发.后台用的ssh. 1. 新增冻结列功能. 2. 实现界面的添加 ...
- java_easyui体系之DataGrid（2）[转]
一:简介 在1的基础上添加layout组件.实现通过条件动态的从后台查询数据到前台展示.使用的方式是将查询单独作为一个layout中的一个面板. 二:关键之处 1.效果图: 2.左侧的折叠组件: 折叠 ...
- java_easyui体系之DataGrid（1）[转]
一:简介 以表格的形式展示数据.项目中式很常见的一个使用.table展示数据.牵扯到分页.上一页下一页.首页.尾页.翻页.选中展示的记录用于操作.总记录数等等.使用DataGrid很容易实现这一点. ...
- java_easyui体系之目录 [转]
摘要:简单介绍form的提交方式.与validatebox的结合使用. 一:form简介 Easyui中的form有两种提交方式.结合自己新添加的一种ajax提交方式.本文简单说明form的三种提交方 ...
- wpf研究之道-datagrid控件（1）
"想要说些什么 又不知从何说起",每当想要写一些关于wpf的文章,总是沉思良久,怕自己写不好.今天我想要说的是wpf中datagrid控件.我们先来看看它在整个类的层次结构: ...
- ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- [systemtap手记]debian体系安装过程
Debian体系,本人测试用机 Ubuntu 11.10 uname -r 查看原本的内核版本为 3.0.0-12-generic 第一步: 安装systemtap包 $ sudo apt-get i ...
- BPM体系文件管理解决方案分享
一.方案概述 企业管理在很大程度上是通过文件化的形式表现出来,体系文件管理是管理体系存在的基础和证据,是规范企业管理活动和全体人员行为,达到管理目标的管理依据.对与公司质量.环境.职业健康安全等体系有 ...
随机推荐
- PHP 5.4 on CentOS/RHEL 6.4 and 5.9 via Yum
PHP 5.4 on CentOS/RHEL 6.4 and 5.9 via Yum PHP 5.4.16 has been released on PHP.net on 6th June 2013, ...
- RF《Quick Start Guide》操作总结
这篇文章之所以会给整理出来,是因为学了一个季度的RF后,再去看官网的这个文档,感触破多,最大的感触还是觉得自己走了不少弯路,还有些是学习方法上的弯路.在未查看这类官网文档之前,更多的是看其他各种人的博 ...
- VirtualBox网络设置讲解
VirtualBox的提供了四种网络接入模式,它们分别是: 1.NAT 网络地址转换模式(NAT,Network Address Translation) 虚拟机访问网络,是通过主 ...
- Ninject简介
1.为什么要用Ninject? Ninject是一个IOC容器用来解决程序中组件的耦合问题,它的目的在于做到最少配置.其他的的IOC工具过于依赖配置文件,需要使用assembly-qualified名 ...
- RF--换行
引自:http://blog.csdn.net/lvtingting2007/article/details/42173991
- XML标签
SQL标签库提供了创建和操作XML文档的标签. 引入语法:<%@ taglib prefix="x" uri="http://java.sun.com/jsp/js ...
- [已解决] java.net.InetAddress.getHostName() 阻塞问题
在学习java nio的过程中发现某些情况下使用该方法会导致程序阻塞,(情况:服务器,Linux:客户端,WIN10) java.net.InetAddress.getHostName() 阻塞情况如 ...
- orcale删除重复数据
1.删除orcale重复数据, delete from da_door awhere (a.dt,a.key1) in (select dt,key1 from da_door group by dt ...
- asp.net 之 购物车
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 安装DotNetCore.1.0.0-VS2015Tools.Preview2失败解决方案
1.把安装文件放入非系统盘 2.命令行带参数运行: DotNetCore.1.0.0-VS2015Tools.Preview2.0.1.exe SKIP_VSU_CHECK=1 或 DotNetCor ...