页面代码与上面几篇文章相同，只是导入的js文件不同
editgrid.js
//下面两行代码必须要，不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example_editgrid/ext4/examples/ux');
//预加载
Ext.require(
[
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*',
'Ext.state.*',
'Ext.form.*',
//注意引用
'Ext.ux.form.SearchField',
//Checkbox需要引用
'Ext.selection.CheckboxModel' ,
'Ext.selection.CellModel',
'Ext.ux.CheckColumn'
]
);
Ext.onReady(
function(){
var isEdit = false;
//创建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'},
{name:'birthdate',mapping:'birthdate',type:'date',dataFormat:'Y-m-d'}
]
}
)
//创建本地数据源
var sexStore = Ext.create(
'Ext.data.Store',
{
fields:['id','name'],
data:[
{"id":"1","name":"男"},
{"id":"2","name":"女"}
]
}
);
//创建数据源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//设置分页大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'user_get',
reader: {
//数据格式为json
type: 'json',
root: 'users',
//获取数据总数
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//创建多选框
var checkBox = Ext.create('Ext.selection.CheckboxModel');
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',
{
//表示“双击”才可以修改内容（取值只能为“1”或“2”）
clicksToEdit:2
}
);
//创建grid
var grid = Ext.create('Ext.grid.Panel',{
tbar:[
{
xtype:'button',
text:'添加',
handler:'addUser'
},{
xtype:'button',
text:'修改',
handler:updateUser
},{
xtype:'button',
text:'删除',
handler:deleteUser
}
],
store:store,
//添加到grid
selModel:checkBox,
//表示可以选择行
disableSelection: false,
columnLines: true,
loadMask: true,
//添加修改功能
plugins: [cellEditing] ,
columns:[
{
id:'id',
//表头
header:'编号',
width:40,
//内容
dataIndex:'id',
sortable:true,
editor:{
xtype:'textfield',
allowBlank:false
}
},{
id:'name',
header:'姓名',
width:100,
dataIndex:'name',
sortable:false,
editor:{
xtype:'combobox',
allowBlank:false
}
},{
id:'sex',
header:'性别',
width:100,
dataIndex:'sex',
editor:{
xtype:'combobox',
store:sexStore,
displayField:'name',
valueField:'name',
listeners:{
select : function(combo, record,index){
isEdit = true;
}
}
}
},{
id:'age',
//表头
header:'年龄',
width:40,
//内容
dataIndex:'age',
sortable:true,
editor:{
xtype:'numberfield',
allowBlank:false,
minValue:0,
maxValue:100
}
},{
id:'birthdate',
header:'出生日期',
width:100,
dataIndex:'birthdate',
//lazyRender: true,
renderer: function(value){
return value ? Ext.Date.dateFormat(value, 'Y-m-d') : '';
},
editor:{
xtype:'datefield',
format:'Y-m-d',
//minValue: '01/01/06'
}
}
],
height:300,
width:480,
x:20,
y:40,
title: 'ExtJS4 可编辑Grid示例',
renderTo: 'grid',
dockedItems:[
//多选框控件
{
dock:'top',
xtype:'toolbar',
items:[
{
itemId:'Button',
text:'显示所选',
//tooltip:'Add a new row',
//iconCls:'add',
handler:function(){
//得到选中的行
var record = grid.getSelectionModel().getSelection();
if(record.length==0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
})
return;
}else{
var ids = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("id")
if(i<record.length-1){
ids = ids + ",";
}
}
Ext.MessageBox.show({
title:"所选ID列表",
msg:ids
}
)
}
}
}
]
},
//添加搜索控件
{
dock: 'top',
xtype: 'toolbar',
items: {
width: 200,
fieldLabel: '搜索姓名',
labelWidth: 70,
xtype: 'searchfield',
store: store
}
},{
dock: 'bottom',
xtype: 'pagingtoolbar',
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: '没有数据'
}
],
}
)
store.loadPage(1);
//更新用户
function updateUser(){
//获取修改的行的数据
var records = store.getUpdatedRecords();
//获取幻影行
var phantoms = store.getNewRecords();
//合并实际数据与幻影数据
records = records.concat(phantoms);
//判断是否有修改过的数据
if(records.length == 0){
Ext.Msg.alert(
'提示',
'没有任何数据被修改过！'
);
}else{
Ext.Msg.confirm(
"请确认",
"是否真的要修改数据",
function(button,text){
if(button == "yes"){
var datas = [];
Ext.Array.each(records,function(record){
datas.push(record.data);
record.commit();
}
);
//alert('datas'+datas.length);
Ext.Ajax.request(
{
cache:false,
//向服务器提交
url:'user_update',
method:'POST',
params :{
//参数名一定要与后台的一致
//转为json数据
updateUsers:Ext.encode(datas)
},
//success
success : function(response){
//把json数据转为对象
//alert(res.responseText);
var success = Ext.decode(response.responseText).success;
//当后台更新成功时
if(success){
Ext.Array.each(records,
function(record){
//alert("修改成功！");
//向store提交修改数据，页面效果
record.commit();
}
)
}else{
Ext.MessageBox.show(
'提示！',
'修改数据失败！'
);
}
}
}
)
}else{
alert("未修改！");
}
}
);
}
}
//删除用户
function deleteUser(){
//得到选中的行
var data = grid.getSelectionModel().getSelection();
if(data.length == 0) {
Ext.MessageBox.show(
'提示',
'请选择您要操作的行！'
);
}else{
Ext.Msg.confirm(
'请确认',
'是否真的要删除数据',
function(button,text){
if(button == "yes"){
//用于存放所要删除的数据
var ids = [];
//遍历并放入ids中
Ext.Array.each(
data,
function(record){
ids.push(record.data);
}
);
alert(ids.length);
Ext.Ajax.request(
{
url:'user_delete',
params:{
//在后台接收deleteUsers为要删除的对象
deleteUsers:Ext.encode(ids)
},
method:'POST',
success:function (response){
var success = Ext.decode(response.responseText).success;
if(success){
Ext.Array.each(data,function(record){
//删除store中的数据，页面效果
store.remove(record);
}
)
}else{
Ext.MessageBox.show(
'提示',
'删除失败'
)
}
}
}
)
}
}
);
}
}
}
)
UserAction.java源码：
package action;
import java.util.ArrayList;
import java.util.List;
import net.sf.ezmorph.object.DateMorpher;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.util.JSONUtils;
import com.opensymphony.xwork2.ActionSupport;
import entity.User;
import biz.UserBiz;
public class UserAction extends ActionSupport {
private UserBiz userBiz = new UserBiz();
private String start;
private String limit;
private String query;
//接收要修改的数据,一定要与前台一致,并添加get、set方法
private String updateUsers;
//接收要删除的数据，一定要与前台的一致
private String deleteUsers;
//必须要写get()、set()方法，否则在前台接收不到数据
Listusers;
private long totalCount;
//判断是否更新成功
private boolean success;
//得到所有数据
public String get() {
users = userBiz.get(start, limit, query);
System.out.println(users.size());
totalCount = userBiz.totalConnt();
System.out.println(totalCount);
success = true;
return SUCCESS;
}
//更新数据
public String update(){
JSONArray jsonArray = JSONArray.fromObject(updateUsers);
ListupdateUsers = new ArrayList();
for (int i = 0; i < jsonArray.size(); i++) {
JSONObject jsonObject = jsonArray.getJSONObject(i);
//这句话是对时间格式进行转换，否则会出现警告：
//Can't transform property 'birthdate' from java.lang.String into java.util.Date. Will register a default Morpher
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd"}) );
updateUsers.add((User)JSONObject.toBean(jsonObject, User.class));
}
userBiz.update(updateUsers);
//users = userBiz.get(start, limit, query);
//需要在dao中判断是否更新成功
success = true;
return SUCCESS;
}
//删除数据
public String delete(){
JSONArray jsonArray = JSONArray.fromObject(deleteUsers);
ListdeleteUsers = new ArrayList();
for (int i = 0; i < jsonArray.size(); i++) {
JSONObject jsonObject = jsonArray.getJSONObject(i);
//JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd"}) );
deleteUsers.add((User)JSONObject.toBean(jsonObject, User.class));
}
userBiz.delete(deleteUsers);
success = true;
return SUCCESS;
}
//get、set方法
public String getStart() {
return start;
}
public void setStart(String start) {
this.start = start;
}
public String getLimit() {
return limit;
}
public void setLimit(String limit) {
this.limit = limit;
}
public String getQuery() {
return query;
}
public void setQuery(String query) {
this.query = query;
}
public void setUsers(Listusers) {
this.users = users;
}
public ListgetUsers() {
return users;
}
public long getTotalCount() {
return totalCount;
}
public void setTotalCount(long totalCount) {
this.totalCount = totalCount;
}
public String getUpdateUsers() {
return updateUsers;
}
public void setUpdateUsers(String updateUsers) {
this.updateUsers = updateUsers;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getDeleteUsers() {
return deleteUsers;
}
public void setDeleteUsers(String deleteUsers) {
this.deleteUsers = deleteUsers;
}
}