ExtJs_Grid的增加、删除、修改、查询操作
//创建edgrid.js
Ext.onReady(function(){
Ext.QuickTips.init();
// 格式化日期显示
function formatDate(value){
return value ? value.dateFormat('Y, M d') : '';
}
// 格式化性别显示,这是个 renderer, 渲染器
function formatSex(value) {
return value ? "男" : "女"
}
// 弄个缩写的别名
var fm = Ext.form;
// 列模型定义了表格所有列的信息,
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
var cm = new Ext.grid.ColumnModel([
{
id:'id',
header: "编号",
dataIndex: 'id',
width: 50
},
{
id:'name',
header: "用户名",
dataIndex: 'name',
width: 250,
editor: new fm.TextField({
allowBlank: false// 不能为空
})
},
{
header: "地区",
dataIndex: 'area',
width: 100,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'area',// 对应的选择框的ID
lazyRender:true,
listClass: 'x-combo-list-small'
})
},
{
header: "电子邮件",
dataIndex: 'email',
width: 220,
align: 'left',
editor: new fm.TextField({
allowBlank: true
})
},
{
header: "年龄",
dataIndex: 'age',
width: 70,
align: 'right',
editor: new fm.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100
})
},
{
header: "生日",
dataIndex: 'birthDay',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'y/m/d',
minValue: '1970/01/01',//最小值
disabledDays: [0, 6],// 禁止选择的日期
disabledDaysText: '不许周末出生孩子'
})
},
{
header: "性别",
dataIndex: 'sex',
width: 95,
renderer: formatSex,
editor: new fm.Checkbox()
}
]);
// 默认情况下列是可排序的
cm.defaultSortable = true;
// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
var User = Ext.data.Record.create([
// 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
{name: 'id', type: 'int' },
{name: 'name', type: 'string'},
{name: 'area'},
{name: 'email', type: 'string'},
{name: 'age', type: 'int'}, // automatic date conversions
{name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
{name: 'sex', type: 'bool'}
]);
// 创建 Data Store
var store = new Ext.data.Store({
// 使用 HTTP 加载
url: 'users.xml',
// 因为返回值是 XML, 所以我们创建一个解析器
reader: new Ext.data.XmlReader({
// 记录必须包含 "user" 标签
record: 'user'
}, User),
sortInfo:{field:'name', direction:'ASC'}// 排序信息
});
// 创建编辑器表格
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:800,
height:300,
autoExpandColumn:'name',
title:'功能管理',// 标题
frame:true,
clicksToEdit:1,//设置点击几次才可编辑
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据
// 顶部工具栏按钮
tbar: [
{
text: '新增',
iconCls:'xz',//按钮图标的CSS名称
handler : function(){// 点击按钮执行的操作
var n = grid.getStore().getCount();// 获得总行数
var p = new User({
id: n + 1,
name: '新数据' + n,
area: '',
email: 'Benson@163.com',
age: 20,
birthDay: (new Date()).clearTime(),
sex: true
});
grid.stopEditing();// 停止编辑
store.insert(n, p);// 插入到最后一行
grid.startEditing(n, 1);// 开始编辑1单元格
}
},
{
text: '删除',
iconCls:'sc01',
handler : function(){
//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
if(rows.length==0){
Ext.MessageBox.alert('警告', '最少选择一条信息，进行删除!');
}else{
Ext.MessageBox.confirm('提示框', '您确定要进行该操作？',function(btn){
if(btn=='yes'){
if(rows){
for (var i = 0; i < rows.length; i++) {
//alert(rows[i].get("id"));
store.remove(rows[i]);
//store.removeAll(); //删除所有数据
}
this.getEl().dom.action='./formservlet?operator=save';
this.getEl().dom.submit();
}
}
});
} // 弹出对话框警告
}
},
{
text: '保存',
iconCls: 'bc',
handler : function(){
var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
if(recordtoedit) {
Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
// alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
}
}
},
{
text: '查询',
iconCls: 'cx',
handler : function(){
}
}
]
});
// 单元格编辑后事件处理
grid.on("afteredit", afterEdit, grid);
// 事件处理函数
function afterEdit(e) {
var record = e.record;// 被编辑的记录
// 显示等待对话框
Ext.Msg.wait("请等候", "修改中", "操作进行中...");
// 更新界面, 来真正删除数据
Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name").value + "\n 修改的字段是:"
+ e.field);// 取得用户名
};
// 触发数据加载
store.load();
});
//创建edgrid.jsp
<%@page contentType="text;html; charset=GBK"%>
<%@page import="com.luke.hm.tree.EJBContext"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>表格编辑器示例</title>
<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/ext/resources/css/ext-all.css" />
<!-- 图标样式 CSS 信息 -->
<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/menujscss/edgrid.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/ext-all.js"></script>
<!-- 中文提示信息支持 -->
<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/source/locale/ext-lang-zh_CN.js"></script>
<!-- 本页的功能代码 -->
<script type="text/javascript" src="edgrid.js"></script>
<!-- DWR JavaScript 类库 -->
<!--script type='text/javascript' src='/dwrtest/dwr/interface/JUserManager.js'></script-->
<!--script type='text/javascript' src='/dwrtest/dwr/engine.js'></script-->
</head>
<body>
<h1>
<select name="area" id="area" style="display: none;">
<option value="历城区">历城区</option>
<option value="历下区">历下区</option>
<option value="槐荫区">槐荫区</option>
</select>
<!-- 放置可编辑控件的 DIV -->
</h1>
<div id="editor-grid"></div>
</body>
</html>
//创建users.xml
<?xml version="1.0" encoding="GBK"?>
<users>
<user>
<id>1</id>
<name>XXX1</name>
<area>XXX2</area>
<email>XXX1@126.com</email>
<age>88</age>
<sex>true</sex>
<birth>1980/01/01</birth>
</user>
<user>
<id>2</id>
<name>Benson</name>
<area>山东济南</area>
<email>Benson@163.com</email>
<age>27</age>
<sex>true</sex>
<birth>1982/12/12</birth>
</user>
<user>
<id>3</id>
<name>Benson_GG</name>
<area>济南历下</area>
<email>aa@bb.com</email>
<age>28</age>
<sex>false</sex>
<birth>1982/12/11</birth>
</user>
</users>
//创建edgrid.css
/** 定义了一些工具栏按钮的 CSS 样式 */
.xz {
background-image:url(./xz.gif) !important;
}
.sc01 {
background-image:url(./sc.gif) !important;
}
.sc02 {
background-image:url(./sc.gif) !important;
}
.cx {
background-image:url(./cx.gif) !important;
}
.bc {
background-image:url(./bc.gif) !important;
}
