|
|
部分源碼:
復(fù)制代碼 代碼如下:
<%@ page language="Java" pageEncoding="GBK"%>
<%@taglib uri="http://Java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>用戶管理首頁</title>
<link rel="stylesheet" type="text/css" href="js/ext-2.2/resources/css/ext-all.css" />
<script type="text/Javascript" src="js/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/Javascript" src="js/ext-2.2/ext-all.js"></script>
<style type="text/css">
.x-panel-body p {}{
margin:5px;
}
.x-column-layout-ct .x-panel {}{
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {}{
margin-bottom:5px;
}
.settings {}{
background-image:url(js/ext-2.2/shared/icons/fam/folder_wrench.png) !important;
}
.nav {}{
background-image:url(js/ext-2.2/shared/icons/fam/folder_go.png) !important;
}
.icon-grid {}{
background-image: url(js/ext-2.2/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {}{
border: 1px solid #99bbe8;
border-top: 0 none;
}
.add {}{
background-image: url(js/ext-2.2/shared/icons/fam/add.gif) !important;
}
.option {}{
background-image: url(js/ext-2.2/shared/icons/fam/plugin.gif) !important
}
.remove {}{
background-image: url(js/ext-2.2/shared/icons/fam/delete.gif) !important
}
.save {}{
background-image: url(js/ext-2.2/shared/icons/save.gif) !important;
}
</style>
<script>
<!--
Ext.onReady(function()
{
/**//**Grid相關(guān)**/
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
var newFormWin; //form窗口容器
var form1; //添加用戶的form
var form2;; //修改用戶的form
//側(cè)邊欄狀態(tài)的記錄
Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, {
readCookies : function(){
if(this.state){
for(var k in this.state){
if(typeof this.state[k] == 'string'){
this.state[k] = this.decodeValue(this.state[k]);
}
}
}
return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this));
}
});
var xg = Ext.grid;
var jsonReader = new Ext.data.JsonReader( {
root : 'list', //返回的數(shù)據(jù)集合
totalProperty : 'totalCount', //總記錄數(shù)
successProperty : '@success' //成功標(biāo)記
}, [ {
name : 'id', //grid中的dataIndex
mapping : 'id', //返回的數(shù)據(jù)中的字段名
type : 'int' //類型，默認(rèn)為string類型
}, {
name : 'username',
mapping : 'username'
}, {
name : 'age',
mapping : 'age',
type : 'int'
},
{
name : 'ramark',
mapping : 'remark'
}]);
// Store
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '${ctx}/UserServlet?method=getAll'
}),
reader : jsonReader
});
ds.setDefaultSort('id', 'asc');
/**//**
***CRUD Grid
****/
//自定義的checkbox列選擇
var sm = new xg.CheckboxSelectionModel({
listeners: //添加監(jiān)聽器
{
//行選擇事件
rowselect : function (sm, rowIndex, keep, rec) //行選中事件
{
//得到ext組件用Ext.getCmp('id')
var btn = Ext.getCmp('tbar1');
//選擇數(shù)量大于2，禁用修改按鈕
if(sm.getCount() != 1)
{
btn.disable();
}
else
{
btn.enable();
}
},
//取消選擇事件
rowdeselect : function (sm, rowIndex, keep, rec) //行選中事件
{
//得到ext組件用Ext.getCmp('id')
var btn = Ext.getCmp('tbar1');
//數(shù)量等于1啟動修改按鈕
if(sm.getCount() == 1)
{
btn.enable();
}
else
{
btn.disable();
}
}
}
});
//初始化Grid
var grid = new xg.GridPanel({
id:'user-grid',
width:780,
height:450,
frame:true,
title:'簡易用戶管理',
iconCls:'icon-grid',
hidden: true,
store: ds, //數(shù)據(jù)倉庫
renderTo: document.body,
//列
cm: new xg.ColumnModel([
sm,
{id:'id',header: "索引", width: 40, sortable: true, dataIndex: 'id'},
{header: "用戶名", width: 20, sortable: true, dataIndex: 'username'},
{header: "年齡", width: 20, sortable: true, dataIndex: 'age'},
{header: "備注", width: 20, sortable: true, dataIndex: 'remark'}
]),
sm: sm,
viewConfig: {
forceFit:true
},
//分頁工具欄
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '顯示 {0}-{1}條 / 共 {2} 條',
emptyMsg : "無數(shù)據(jù)。"
}),
//上置內(nèi)嵌工具欄(按鈕)
tbar:[{
text:'添加',
tooltip:'添加一行新數(shù)據(jù)',
iconCls:'add',
handler : function()
{
add();
}
}, '-', {
text:'修改',
tooltip:'修改一條數(shù)據(jù)',
iconCls:'option',
id : 'tbar1',
handler : function()
{
modify();
}
},'-',{
text:'刪除',
tooltip:'刪除數(shù)據(jù)',
iconCls:'remove',
handler : function()
{
remove();
}
}]
});
//加載數(shù)據(jù)
ds.load({params:{start:0, limit:10}});
//渲染Grid
grid.render();
//添加用戶的函數(shù)
var add = function()
{
newFormWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
closeAction : 'hide',
plain : true,
title : '用戶管理',
items : form1
});
newFormWin.show();
}
//修改用戶的函數(shù)
var modify = function()
{
var _record = grid.getSelectionModel().getSelected();
if (!_record)
{
Ext.Msg.alert('請選擇要修改的一項！');
}
else
{
myFormWin();
form2.form.load
({
url : '${ctx}/UserServlet?method=getById&id='+ _record.get('id'),
waitMsg : '正在載入數(shù)據(jù)',
failure : function() {
Ext.Msg.alert('載入失敗');
},
success : function() {
//Ext.Msg.alert('載入成功！');
}
});
}
}
//修改用戶的窗體
var myFormWin = function() {
newFormWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
closeAction : 'hide',
plain : true,
title : '修改用戶',
items : form2
});
newFormWin.show('');
}
/**//*注意JsonReader要放在Form上面，數(shù)據(jù)的加載順序問題*/
var jsonFormReader = new Ext.data.JsonReader( {
root : 'list',
totalProperty : 'totalCount',
successProperty : '@success'
}, [
{
name : 'id',
mapping : 'id',
type : 'int',
},
{
name : 'username',
mapping : 'username'
}, {
name : 'age',
mapping : 'age',
type : 'int'
}, {
name : 'remark',
mapping : 'remark'
}]);
//添加用戶的Form
form1 = new Ext.FormPanel({
labelWidth : 75,
frame : true,
title : '添加用戶',
bodyStyle : 'padding:5px 5px 0',
width : 350,
waitMsgTarget : true,
url : '${ctx}/UserServlet?method=save',
defaults :
{
width : 230
},
defaultType : 'textfield',
items : [
{
fieldLabel : '用戶名',
name : 'username', //后臺得到數(shù)據(jù)用
allowBlank : false,
blankText : '用戶名不能為空'
}, {
xtype : 'numberfield',
maxValue : 100,
maxText : '年齡不能超過100歲',
minValue : 1,
minText : '年齡不能小于1歲',
fieldLabel : '年齡',
name : 'age',
allowBlank : false,
blankText : '年齡不能為空'
}, new Ext.form.TextArea( {
fieldLabel : '備注',
name : 'remark',
growMin : 234,
maxLength : 50,
maxLengthText : '最大長度不能超過50個字符!'
})],
buttons : [ {
text : '保存',
disabled : false,
handler : function()
{
if(form1.form.isValid())
{
form1.form.submit(
{
url : '${ctx}/UserServlet?method=save',
success : function(from, action)
{
Ext.Msg.alert('添加用戶成功！');
ds.load({
params : {
start : 0,
limit : 10
}
});
},
failure : function(form, action) {
Ext.Msg.alert('添加用戶失敗！');
},
waitMsg : '正在保存數(shù)據(jù)，稍后'
});
newFormWin.hide();
}
else
{
Ext.Msg.alert('請確認(rèn)您已經(jīng)的信息是否已經(jīng)填寫成功!');
}
}
}, {
text : '取消',
handler : function()
{
form1.form.reset();
}
}]
});
//修改用戶的Form
form2 = new Ext.FormPanel({
labelWidth : 75,
frame : true,
title : '修改用戶',
bodyStyle : 'padding:5px 5px 0',
width : 350,
waitMsgTarget : true,
url : '${ctx}/UserServlet?method=update',
reader : jsonFormReader, //為Form指定reader，修改用
defaults :
{
width : 230
},
defaultType : 'textfield',
items : [
{
xtype: 'hidden',
name : 'id'
},
{
fieldLabel : '用戶名',
name : 'username', //后臺得到數(shù)據(jù)用
allowBlank : false,
blankText : '用戶名不能為空'
}, {
xtype : 'numberfield',
maxValue : 100,
maxText : '年齡不能超過100歲',
minValue : 1,
minText : '年齡不能小于1歲',
fieldLabel : '年齡',
name : 'age',
allowBlank : false,
blankText : '年齡不能為空'
}, new Ext.form.TextArea( {
fieldLabel : '備注',
name : 'remark',
growMin : 234,
maxLength : 50,
maxLengthText : '最大長度不能超過50個字符!'
})],
buttons : [ {
text : '修改',
disabled : false,
handler : function()
{
if(form2.form.isValid())
{
form2.form.submit(
{
success : function(from, action)
{
Ext.Msg.alert('修改用戶成功！');
ds.load({
params : {
start : 0,
limit : 10
}
});
},
failure : function(form, action) {
Ext.Msg.alert('修改用戶失敗！');
},
waitMsg : '正在保存數(shù)據(jù)，稍后'
});
newFormWin.hide();
}
else
{
Ext.Msg.alert('請確認(rèn)您已經(jīng)的信息是否已經(jīng)填寫成功!');
}
}
}, {
text : '取消',
handler : function()
{
form2.form.reset();
}
}]
});
//刪除事件
var remove = function()
{
var _record = grid.getSelectionModel().getSelected();
if (_record)
{
Ext.MessageBox.confirm('確認(rèn)刪除', '你確認(rèn)要刪除選擇的數(shù)據(jù)嗎？', function(btn)
{
if (btn == "yes") {
var m = grid.getSelections();
var jsonData = "";
for (var i = 0, len = m.length;i < len; i++)
{
var ss = m[i].get("id"); //用戶id , "id" 字段名
if (i == 0) {
jsonData = jsonData + ss;
} else {
jsonData = jsonData + "," + ss;
}
//在數(shù)據(jù)源里刪除
ds.remove(m[i]);
//刪除數(shù)據(jù)庫相應(yīng)記錄
Ext.Ajax.request({
url: '${ctx}/UserServlet?method=remove&id='+ss
});
}
ds.load({
params : {
start : 0,
limit : 10,
delData : jsonData
}
});
}
});
}
else
{
Ext.Msg.alert('請選擇要刪除的數(shù)據(jù)項！');
}
};
/**//***/
Ext.state.Manager.setProvider
( new Ext.state.SessionProvider({state: Ext.appState}));
// tabs for the center
var tabs = new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : 'ExtJS版',
contentEl: 'user-grid' //要填充的html id
},{
title : 'GTGrid版',
html : 'GTGrid暫不支持與Extjs的整合(window),<a href="${ctx}/gt.jsp">點此顯示我做的例子</>'
},{
title : '更多關(guān)注',
html : '更多內(nèi)容可關(guān)注<a href="http://www.blogJava.NET/supercrsky">我的博客</a>'
}]
});
// Panel for the west
var nav = new Ext.Panel({
title : '菜單目錄',
region : 'west',
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
layout: 'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'用戶管理',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'用戶配置',
html: Ext.example.shortBogusConfig,
border:false,
autoScroll:true,
iconCls:'settings'
}]
});
var win = new Ext.Window({
title : '用戶管理微型系統(tǒng)',
closable : true,
maximizable : true,
minimizable : true,
width : '100%',
height : '100%',
plain : true,
layout : 'border',
closable : false,
items : [nav, tabs]
});
win.show();
win.maximize();
});
-->
</script>
</head>
<body>
<!-- 側(cè)邊欄使用的js -->
<script type="text/Javascript" src="js/ext-2.2/shared/examples.js"></script>
</body>
</html>
完整的源碼下載點此下載
JavaScript技術(shù)：ExtJS GTGrid 簡單用戶管理，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
