|
|
<%@ page language="Java" import="Java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>extJs中常用到的增刪改查操作的示例代碼</title>
<!-- CommonJs.jsp 為 ExtJS 引入的路徑 -->
<%@ include file="../extJs/CommonJs.jsp"%>
<script type="text/Javascript"><!--
/**
* 作 者： 花 慧
* 時 間： 2009年12月22日
* 內 容： extJs中常用到的增，刪，改，查操作
*/
//設置每頁顯示的行數默認為10
var QUERY_PAGE_SIZE = 10;
/**
* SearchQueryForm():繪制查詢表單
*/
function searchQueryForm()
{
//form 使用的時候建議設為局部變量，可以通過Ext.getCmp(“”)去獲取form
var queryForm = null;
queryForm = new Ext.FormPanel({
id:'queryForm', //指定queryForm的Id
renderTo:'searchPanel', //指向form所在的div層
labelWidth:70, //label標簽的width占頁面的百分比
region:'north',
border:false, //以顯示面板的body元素的邊界，虛假隱藏起來（默認為true）
badyBorder:false, //顯示面板的body元素，假以隱藏它（默認為true的內部邊界）
labelAlign:'right', //label標簽的對齊方式
frame:true, //自定義面板的圓形邊界，邊界寬度1px。默認為false
title:'用戶信息查詢', //form的標題
/**
*buttons:在FormPanel中按鈕的集合
*/
buttons:[{handler:addForm,text:'新增'},
{handler:submitForm,text:'查詢'},
{handler:resetForm,text:'重置'}],
/**
* items: 在FormPanel中不可缺少的部分
*/
items:[{
/**
* layout:extJs容器組件，可以設置它的顯示風格
* 它的有效值有absolute,accordion,anchor,border,card,fit,form and table 共9種
*/
layout:'column',
items:[
{
columnWidth:.5,
layout:'form',
items:{
name:'userId',
hiddenName:'userId',
xtype:'textfield',
fieldLabel:'用戶編碼',
maxLength:'50',
vtype:'specialChar',
anchor:'80%'
}
},{
columnWidth:.5,
layout:'form',
items:{
name:'userName',
hiddenName:'userName',
xtype:'textfield',
fieldLabel:'用戶名稱',
maxLength:'100',
vtype:'specialChar',
anchor:'80%'
}
}
]
}]
});
}
/**
* showUserForm():繪制添加表單
*/
function showUserForm()
{
//將變量定義成局部變量，避免每次都生成一個新對象
var userForm = null;
userForm = new Ext.FormPanel({
id:'conditionForm',
labelWidth:'80',
labelAlign:'right',
border:false,
bodyBorder:false,
frame:true,
items:[
layout:'column',
items:[
{
columnWidth:'.8',
items:{
name:'userInfo.userId',
hiddenName:'userInfo.userId', //hiddenName動態的綁定數據庫中對應的字段
xtype:'textField', //xtype可以分為三類,textField為表單域的控件
fieldLabel:'用戶編碼<font color=red>*</font>',//控件前的文本說明
labelSeparator:'',
blankText : '填寫用戶編碼', //為空的文本框提示信息
allowBlank:false, //不允許為空
maxLength:'50', //文本框允許輸入的最大的長度,最小的minLength
vtype:'specialChar',
anchor:'80%'
}
},{
columnWidth:'.8',
items:{
name:'userInfo.userName',
hiddenName:'userInfo.userName',
xtype:'textField',
fieldLabel:'用戶姓名<font color=red>*</font>',
labelSeparator:'',
blankText:'填寫用戶姓名',
allowBlank:false,
maxLength:'100',
vtype:'specialChar',
anchor:'100%'
}
},{
columnWidth:'.8',
items:{
name:'userInfo.pwd',
hiddenName:'userInfo.pwd',
xtype:'textField',
inputType:'password',
fieldLabel:'用戶密碼<font color=red>*</font>',
labelSeparator:'',
blankText:'填寫用戶密碼',
allowBlank:false,
maxLength:'12',
minLength:'6',
value:'123456', //用戶默認的秘密
anchor:'100%'
}
},{
columnWidth:'.8',
items:{
name:'rPwd',
hiddenName:'rPwd',
xtype:'textField',
inputType:'password',
fieldLabel:'確認密碼<font color=red>*</font>',
labelSeparator:'',
blankText:'二次輸入的秘密要相同',
allowBlank:false,
vtype:'pwdRange',
pwdRange:{begin:'userInfo.pwd',end:'rPwd'},
maxLength:'12',
anchor:'100%'
}
}]
]
});
}
/**
* editUserForm():繪制修改表單
*/
function editUserForm(){
//將變量定義成局部變量，避免每次都生成一個新對象
var userForm = null;
userForm = new Ext.FormPanel({
id:'editForm',
labelWidth:'80',
labelAlign:'right',
border:false,
bodyBorder:false,
frame:true,
items:[
layout:'column',
items:[
{
columnWidth:'.8',
items:{
name:'userInfo.userId',
hiddenName:'userInfo.userId', //hiddenName動態的綁定數據庫中對應的字段
xtype:'textField', //xtype可以分為三類,textField為表單域的控件
fieldLabel:'用戶編碼', //控件前的文本說明
labelSeparator:':',
readOnly:true, //文本框只讀
disabled:true, //文本框灰色,區別與其他的文本框顏色
blankText : '填寫用戶編碼', //為空的文本框提示信息
allowBlank:false, //不允許為空
maxLength:'50', //文本框允許輸入的最大的長度,最小的minLength
//字母開頭，且只能存在字母與數字長度為2到12位
regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/,
regexText : '用戶編碼必須以字母開頭,長度2-12位!',
anchor:'90%'
}
},{
columnWidth:'.8',
items:{
name:'userInfo.userName',
hiddenName:'userInfo.userName',
xtype:'textField',
fieldLabel:'用戶姓名',
labelSeparator:':',
blankText:'填寫用戶姓名',
allowBlank:false,
maxLength:'100',
//只含有漢字、數字、字母、下劃線不能以下劃線開頭和結尾
regex : /^(?!_)(?!.*?_$)[a-zA-Z0-9_/u4e00-/u9fa5]+$/,
regexText : '只含有漢字、數字、字母、下劃線不能以下劃線開頭和結尾!',
anchor:'90%'
}
},{
columnWidth:'.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'<font color=red>*</font>',
labelSeparator:'',
anchor:'100%'
}
},{
columnWidth:'.8',
items:{
name:'userInfo.pwd',
hiddenName:'userInfo.pwd',
xtype:'textField',
inputType:'password',
fieldLabel:'用戶密碼<font color=red>*</font>',
labelSeparator:':',
blankText:'填寫用戶密碼',
allowBlank:false,
maxLength:'12',
minLength:'6',
anchor:'90%'
}
},{
columnWidth:'.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'<font color=red>*</font>',
labelSeparator:'',
anchor:'100%'
}
},{
columnWidth:'.8',
items:{
name:'rPwd',
hiddenName:'rPwd',
xtype:'textField',
inputType:'password',
fieldLabel:'確認密碼<font color=red>*</font>',
labelSeparator:':',
blankText:'二次輸入的秘密要相同',
allowBlank:false,
//在extCommon.js文件中定義二次輸入的密碼相同驗證pwdRange
// vtype為驗證的方法，如果是通用的驗證，請在方法中定義，如果是特例，可以使用regex
vtype:'pwdRange',
pwdRange:{begin:'userInfo.pwd',end:'rPwd'},
maxLength:'12',
anchor:'90%'
}
},{
columnWidth:'.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'<font color=red>*</font>',
labelSeparator:'',
anchor:'100%'
}
}]
]
});
}
/**
* onReady:該文件準備好(在onload和圖像加載之前)
*/
Ext.onReady(function(){
searchQueryForm();
//獲取查詢form
var queryForm = Ext.getCmp("queryForm").getForm();
/**
* layout設置為border表示頁面將劃分為東南西北中五個部分
* 這里表示centerPanel放在中間
*/
var layout = new Ext.Viewport({
layout:'border',
defaluts:{border:false,bodyBorder:false,activeTab:0},
items:[queryForm,{id:'centerPanel',region:'center',height:document.body.clientHeight,contentEl:'mainDiv'}]
});
//頁面加載的時候，默認數據查詢頁面顯示用戶信息列表
submitForm();
});
//查詢信息
var store = new Ext.data.Store({
url:'../user/doGetPageList.action', //action的路徑
reader:new Ext.data.JsonReader({
root:'userList', //從struts2.0里面傳遞過來的參數:用戶的集合
totalProperty:'rowTotal', //從struts2.0里面傳遞過來的參數:總共的信息的行數
id:'userId',
successPropery:'success'},
['userId','userName','pwd']
)
});
/**
* callback:調用的函數
*/
function getMsg()
{
}
/**
* 模糊查詢
*/
function submitForm()
{
//初始化grid
var grid = null;
//復選框
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:'id',
width:'20'
});
/**
* sortabel:（可選）如果真要排序允許在此列
* renderer:（可選）用于生成給定數據值單元格的HTML標記的功能。如果沒有指定，默認渲染器使用的原始數據值。
* 在renderer:function createButton(參數)這里的參數可以沒有或多個
* 鼠標移動圖片上變成"手"是:style="cursor:hand"
*/
var colM = new Ext.grid.ColumnModel(
[sm,{header:'用戶賬號',dataIndex:'userId',align:'center',sortable:true},
{header:'用戶姓名',dataIndex:'userName',align:'center',sortabel:true},
{header:'刪除',dataIndex:'id',align:'center',renderer:function createButton(){
return '<img alt="刪除" style="cursor:hand" style="cursor:hand" src="../images/hh_framework/ico_delete.gif" src="images/hh_framework/ico_delete.gif" />';}},
{header:'編輯',dataIndex:'userId',align:'center',renderer:function createButton(userId, metadata, record){
return '<a style="cursor:hand" style="cursor:hand" onclick=updateForm('+userId+') >'+record.get('userName')+'的信息修改'+'</a>';}}]
);
//獲取查詢表單
var form = Ext.getCmp("queryForm").getForm();
//判斷是否通過驗證，如果沒有請直接關閉
if(!form.isValid())
{
Ext.Msg.alert("系統提示","查詢數據不正確，請確認輸入!");
return ;
}
//差選queryform中查詢的數據參數
store.baseParams = form.getValues();
/**
* getLimitCount():獲取分頁每頁行數,如果不傳值，則會取默認值
* Start表示讀取數據的起始位置、limit表示每次讀取多少條數據
* callback:getMsg 表示回調時，執行函數 getMsg。可省略
*/
store.load({params:{start:0,limit:getLimitCount()}, callback:getMsg});
if(grid == null)
{
grid = new Ext.grid.EditorGridPanel({
renderTo:"mainDiv", //grid查詢結果指向顯示的div層
title:"用戶查詢結果", //grid標題
width:document.body.clientWidth, //設置grid的width的值
hight:document.doby.clientHight-100,//設置hight的值
viewConfig:{forceFit:true}, //設置列數的充滿窗口
loadMask:true, //在加載數據時的遮罩效果
stripeRows:true, //隔行換色
region:'center', //這個是設置在ViewPort中顯示的位置
cm:colM, //定義的列
ds:store, //定義的數據源
border:false,
bodyBorder:false,
sm:sm, //定義的復選框
//listeners:包含一個或多個事件處理程序被添加到這個對象初始化過程中
listeners:{cellclick:renderPage},
/**
* bbar: new Ext.PagingToolbar部分是定義分頁工具欄，
* 這里的分頁控件欄還用到了1個自己定義的插件，就是可以選擇每頁顯示多少條的
* plugins : [new Ext.ux.PageSizePlugin()],參考Ext的API
* 要實現分頁，后臺必須有total屬性，表示共多少條數據
*/
bbar:new Ext.PagingToolbar({
items:[{
xtype:'button',
text:'刪除所選',
handler:delUserAll, //自定義執行動
pressed:true
}],
id:'pageToolBar',
pageSize:QUERY_PAGE_SIZE, //每頁的行數默認為：QUERY_PAGE_SIZE
store:store,
displayInfo:true,
displayMsg:'顯示第{0}條到{1}條記錄，共{2}條記錄',
emptMsg:'沒有記錄',
plugins:[new Ext.ux.PageSizePlugin()]
})
});
}
grid.render();
}
/**
* 增加用戶信息
*/
function addForm()
{
showUserForm();
//獲取繪制用戶窗口的form
var userForm = Ext.getCmp("conditionForm").getForm();
//初始化用戶添加的窗口的Id
var addUserWin = Ext.getCmp("addWin");
if(addUserWin == null)
{
addUserWin = new Ext.Window({
width:500, //初始窗口的width的值
x:100, //窗口的初始化x方向的位置
y:100, //窗口的初始化y方向的位置
plain:true,
modal:true, //模式窗口,默認為false
closeAction:"hide", //默認窗口隱藏
resizable:false, //窗口的大小不允許拖動,默認為true
id:"addWin", //指定用戶添加窗口的Id
items:[userForm],
buttons:[
{text:'保存',handler:function(){
if(userForm.form.isValid()){
userForm.form.doAction('submit',{
url:'../user/addUser.action',
params:{roleId:userForm.form.findField('userId').getValue()},
method:'post', //數據提交的方式：有兩種get,post
waitTitle:'提示信息', //數據提交等待的滾動條
waitMsg:'保存數據,請稍候...', //滾動條提示的內容
success:function(form,action){
var message = action.result.message;
if(message == null){
Ext.Msg.alert("提示信息","用戶信息添加成功!");
store.reload();
addUserWin.hide();
}else{
Ext.Msg.alert("提示信息",message);
}
},
failure:function(form,action){
Ext.Msg.alert('提示信息',"新用戶添加失敗！");
return;
}
});
}else {
Ext.Msg.alert("提示信息","表單有錯誤,請正確填寫!");
}
}},
{handler:function(){userForm.form.reset();},text:'重置'},
{handler:function(){addUserWin.hide();},text:'關閉'}]
});
}
addUserWin.show();
}
/**
* 刪除用戶信息
*/
function delForm(userId)
{
Ext.Msg.confirm('提示信息','你確定要執行刪除操作嗎?',function(btn){
if(btn == 'yes')
{
/**
* 數據提交的一種方式：Ext.Ajax.request({});
*/
Ext.Ajax.request({
url:'../user/delUser.action',
params:{userId:userId},
method:'post',
success:function(o)
{
var info = Ext.decode(o.responseText);
Ext.Msg.alert("提示信息",info.message);
store.reload();
return ;
},
failure:function(form,action)
{
Ext.Msg.alert("提示信息","用戶信息刪除失敗!");
return ;
}
});
}
});
}
/**
* 批量刪除事件
*/
function delUserAll()
{
//grid中復選框被選中的項
var rows = grid.getSelectionModel().getSelections();
//user_id：所有選中的用戶Id的集合使用','隔開，初始化為空
var user_id = '';
for(var i = 0;i<rows.length;i++)
{
if(i>0)
{
user_id = user_id+','+rows[i].get('userId');
}else{
user_id = user_id+rows[i].get('userId');
}
}
//沒有選擇要執行操作的對象
if(user_id == "")
{
Ext.Msg.alert("提示信息","請選擇要刪除的對象");
return ;
}else{
Ext.Msg.confirm("提示信息","請確定要執行刪除操作嗎?",function (btn){
if(btn == 'yes')
{
Ext.Ajax.request({
url:"../user/delAllUser.action",
params:{id:user_id},
method:'post',
success:function(o){
var info = Ext.decode(o.responseText);
Ext.Msg.alert("提示信息",info.message);
store.reload();
return ;
},
failure:function(form,action){
Ext.Msg.alert("提示信息","用戶信息刪除失敗!");
}
});
}
});
}
}
/**
* 修改用戶信息
* 參數userId:修改對象的Id
*/
function updateForm(userId)
{
editUserForm();
var userForm = Ext.getCmp("editForm").getForm();
Ext.Ajax.request({
url:'../user/doGetOne.action',
params:{userId:userId},
method:'post',
//從struts2.0里返回的參數
success:function(o)
{
//讀取action傳遞過來的對象參數
//docode:解碼（解析）一個JSON字符串對象
var user = Ext.decode(o.responseText);
//用戶編輯窗口的打開
editUser(user);
//將對象信息顯示在對應的form文本框中
userForm.form.findFiled('userInfo.userId').setValue(user.userInfo.userId);
userForm.form.findFiled('userInfo.userName').setValue(user.userInfo.userName);
userForm.form.findFiled('userInfo.pwd').setValue(user.userInfo.pwd);
userForm.form.findFiled('rPwd').setValue(user.userInfo.pwd);
}
});
}
/**
* 用戶信息編輯窗口
*/
function editUser(user){
var userForm = Ext.getCmp("editForm").getForm();
//得到用戶編輯的窗口的對象
var editUserWin = Ext.getCmp("editWin");
//當為空的時候將進行實例化
if(editUserWin == null)
{
editUserWin = new Ext.Window({
id:'editWin',
width:500,
x:100,
y:100,
modal:true,
resizable:false,
closeAction:"hide",
title:'用戶信息修改',
items:[userForm],
buttons:[
{text:'保存',handler:function(){
if(userForm.form.isValid())
{
/**
* 數據提交的第二種方式：form.doAction('submit',{});
*/
userForm.form.doAction('submit',{
url:'../user/updUser.action',
params:{userId:userForm.form.findField('userInfo.userId').getValue()},
method:'post',
waitTitle:'提示信息',
waitMsg:'數據處理中，請稍后....',
//從struts2.0里不需要返回的參數
success:function(form,action)
{
Ext.Msg.alert("提示信息","用戶信息修改成功!");
//查詢的數據集合store刷新，實現頁面自動刷新的效果
store.reload();
//將窗口關閉時候，window. hide()方法是隱藏，因此并不會真正銷毀窗口對象
editUserWin.hide();
return ;
},
failure:function(form,action)
{
Ext.Msg.alert("提示信息","用戶信息修改失敗");
return ;
}
});
}else
{
Ext.Msg.alert("提示信息","表單有錯誤，請重新填寫!");
}
}},
{text:'關閉',handler:function(){editUserWin.hide();}}]
});
}
editUserWin.show();
}
/**
* 重置頁面查詢表單
*/
function resetForm()
{
Ext.getCmp("queryForm").getForm().reset();
}
/**
* 每行單元格點擊事件
*/
function renderPage(grid,rowIndex,columnIndex,e)
{
//觸發事件的對象的Id
var id = grid.getStore().getAt(rowIndex).data['userId'];
switch(columuIndex)
{
case 3:delForm(id);
break;
/**
*case 4:updateForm(id);
* break;
*/
default:break;
}
}
// --></script>
</head>
<body>
<div id="searchPanel">
</div>
<div id="centerPanel">
</div>
<div id="mainDiv"></div>
</body>
</html>
JavaScript技術：extJs 常用到的增，刪，改，查操作代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
