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