ExtJs_Grid的增加、刪除、修改、查詢操作

爪一o_0一斗 2013-05-13

展開全文

//創(chuàng)建edgrid.js
Ext.onReady(function(){
Ext.QuickTips.init();

// 格式化日期顯示
function formatDate(value){
return value ? value.dateFormat('Y, M d') : '';
}
// 格式化性別顯示,這是個(gè) renderer, 渲染器
function formatSex(value) {
return value ? "男" : "女"
}
// 弄個(gè)縮寫的別名
var fm = Ext.form;

// 列模型定義了表格所有列的信息,
// dataIndex 將特定的列映射到數(shù)據(jù)源(Data Store)中的數(shù)據(jù)列(在后面創(chuàng)建)
var cm = new Ext.grid.ColumnModel([
{
id:'id',
header: "編號(hào)",
dataIndex: 'id',
width: 50
},
{
id:'name',
header: "用戶名",
dataIndex: 'name',
width: 250,
editor: new fm.TextField({
allowBlank: false// 不能為空
})
},
{
header: "地區(qū)",
dataIndex: 'area',
width: 100,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'area',// 對應(yīng)的選擇框的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()
}
]);

// 默認(rèn)情況下列是可排序的
cm.defaultSortable = true;

// 定義一個(gè)用戶對象,這樣便于我們動(dòng)態(tài)的添加記錄,雖然也可以設(shè)置成匿名內(nèi)置對象
var User = Ext.data.Record.create([
// 下面的 "name" 匹配讀到的標(biāo)簽名稱, 除了 "birthDay",它被映射到標(biāo)簽 "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'}
]);

// 創(chuàng)建 Data Store
var store = new Ext.data.Store({
// 使用 HTTP 加載
url: 'users.xml',

// 因?yàn)榉祷刂凳?XML, 所以我們創(chuàng)建一個(gè)解析器
reader: new Ext.data.XmlReader({
// 記錄必須包含 "user" 標(biāo)簽
record: 'user'
}, User),

sortInfo:{field:'name', direction:'ASC'}// 排序信息
});

// 創(chuàng)建編輯器表格
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:800,
height:300,
autoExpandColumn:'name',
title:'功能管理',// 標(biāo)題
frame:true,
clicksToEdit:1,//設(shè)置點(diǎn)擊幾次才可編輯
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//設(shè)置單行選中模式, 否則將無法刪除數(shù)據(jù)

// 頂部工具欄按鈕
tbar: [
{
text: '新增',
iconCls:'xz',//按鈕圖標(biāo)的CSS名稱
handler : function(){// 點(diǎn)擊按鈕執(zhí)行的操作
var n = grid.getStore().getCount();// 獲得總行數(shù)
var p = new User({
id: n + 1,
name: '新數(shù)據(jù)' + 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 數(shù)組
if(rows.length==0){
Ext.MessageBox.alert('警告', '最少選擇一條信息，進(jìn)行刪除!');
}else{
Ext.MessageBox.confirm('提示框', '您確定要進(jìn)行該操作？',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(); //刪除所有數(shù)據(jù)

}
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('查看選中', "您現(xiàn)在選中的用戶其名字為:" + recordtoedit.get("name"));// 取得用戶名
// alert("您現(xiàn)在選中的用戶其名字為:" + recordtoedit.get("name"));
}
}
},
{
text: '查詢',
iconCls: 'cx',
handler : function(){
}
}
]
});

// 單元格編輯后事件處理
grid.on("afteredit", afterEdit, grid);
// 事件處理函數(shù)
function afterEdit(e) {
var record = e.record;// 被編輯的記錄
// 顯示等待對話框
Ext.Msg.wait("請等候", "修改中", "操作進(jìn)行中...");

// 更新界面, 來真正刪除數(shù)據(jù)
Ext.Msg.alert('您成功修改了用戶信息', "被修改的用戶是:" + e.record.get("name").value + "\n 修改的字段是:"
+ e.field);// 取得用戶名
};

// 觸發(fā)數(shù)據(jù)加載
store.load();
});

//創(chuàng)建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>

<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="edgrid.js"></script>

</head>
<body>

</h1>
<div id="editor-grid"></div>

</body>
</html>

//創(chuàng)建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>山東濟(jì)南</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>濟(jì)南歷下</area>
<email>aa@bb.com</email>
<age>28</age>
<sex>false</sex>
<birth>1982/12/11</birth>
</user>

</users>

//創(chuàng)建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;
}

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：爪一o_0一斗 > 《Java編程》

舉報(bào)/認(rèn)領(lǐng)