<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8">
<title>我的第一个JavaWeb程序</title>
<!-- 引入库文件 -->
<link href="Scripts/ExtJS_4.2/resources/css/ext-all-neptune.css"
rel="stylesheet" />
<script type="text/javascript" charset="utf-8"
src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="Scripts/ExtJS_4.2/bootstrap.js"></script>
<script type="text/javascript" charset="utf-8"
src="Scripts/ExtJS_4.2/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
//创建grid
//1.创建数据源
var store = Ext.create('Ext.data.Store', {
fields : [ "tId", "tName", "Phone", "Address", ],
pageSize : 6, //页容量5条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort : false,
remoteFilter : true,
proxy : {
type : 'ajax',
url : 'DataManagers?type=select',
reader : { //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
type : 'json', //返回数据类型为json格式
root : 'rows', //数据
totalProperty : 'total' //数据总条数
}
},
sorters : [ {
//排序字段。
property : 'ordeId',
//排序类型，默认为 ASC
direction : 'desc'
} ],
autoLoad : true
//即时加载数据
});
//2.定义列/和工具栏
var column = [ {
text : '编号',
dataIndex : 'tId',
align : 'center',
maxWidth : 120
}, {
text : '姓名',
dataIndex : 'tName',
align : 'center',
maxWidth : 80
}, {
text : '电话',
dataIndex : 'Phone',
align : 'center',
maxWidth : 120
}, {
text : '地址',
dataIndex : 'Address',
align : 'center',
maxWidth : 120
} ]
var tbars = [ , "-", {
text : '新增',
iconCls : 'a_add',
handler : function() {
showAlert("insert")
}
}, "-", {
text : '编辑',
iconCls : 'a_edit2',
handler : function() {
showAlert("update")
}
}, "-", {
text : '删除',
iconCls : 'a_upload',
handler : function() {
showAlert("delete")
}
}, "-", {
text : '刷新',
iconCls : 'a_edit',
handler : function() {
showAlert("freshen")
}
}, "-", "->", {
text : "姓名："
}, {
id : 'likeName',
xtype : 'textfield',
text : ':',
width : 160
}, "-", {
iconCls : "a_search",
text : "搜索",
handler : function() {
showAlert("select")
}
} ];
//3.创建grid
var grid = Ext.create('Ext.grid.Panel', {
//renderTo: Ext.getBody(),
id : 'tgrid',
store : store,
height : 500,
//width:800,
selModel : {
selType : 'checkboxmodel'
}, //选择框
columns : column,
bbar : [ {
xtype : 'pagingtoolbar',
store : store,
displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg : "没有数据",
beforePageText : "当前页",
afterPageText : "共{0}页",
displayInfo : true
} ],
/* listeners : {
'itemclick' : function(view, record, item, index, e) {
Ext.MessageBox.alert("标题", record.data.cataId);
}
}, */
tbar : tbars,
});
//1.基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
renderTo : "tabPanel",
activeTab : 0, //指定默认的活动tab
width : 1000,
height : 600,
plain : true, //True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll : true, //选项卡过多时，允许滚动
defaults : {
autoScroll : true
},
items : [ {
id : "teacherTab",
title : '老师信息',
//listeners: { activate: handleActivate },
closable : true
//这个tab可以被关闭
}, {
id : "studentTab",
title : '学生信息',
listeners : {
activate : handleActivate
},
contentEl : 'oneTab' //指定了当前tab正文部分从哪个html元素读取
}, {
id : "phTab",
title : '胖虎日记',
listeners : {
activate : handleActivate
},
autoLoad : {
url : 'AjaxTabContent',
params : {
data : [ {
'姓名' : '1'
} ]
},
method : 'GET'
}
}, {
id : 'tab4',
title : '美女',
listeners : {
activate : handleActivate
},
html : "带事件的Tab。"
}, {
id : 'tab5',
title : '大猩猩',
listeners : {
activate : handleActivate
},
disabled : true,
html : "不可用的Tab，你是看不到我的。"
} ]
});
function handleActivate(tab) {
alert(tab.title);
}
Ext.getCmp('teacherTab').add(grid);
});
function showAlert(type) {
if (type == "insert") {
Addform();
Ext.getCmp('tid').setValue(randomNumber());
} else if (type == "delete") {
DeleteInfo();
} else if (type == "update") {
//取form表单的值
var grid=Ext.getCmp('tgrid');
var selModel = grid.getSelectionModel();
var rows = selModel.getSelection();
//console.info(rows[0].data.uid, rows[0].data.uname);
if(rows.length!=1){
Ext.Msg.alert('提示','请选择一条数据');
return;
}else{
Editform(grid,rows);
}
} else if (type == "freshen") {
} else if (type == "select") {
selectInfo()
} else {
Ext.Msg.alert("提示", "操作有误，请重试！");
return;
}
}
///增删改查方法
//添加
function Addform() {
var form = Ext.create('Ext.form.Panel', {
//closable:true,
id: 'AddForm',
title: '添加用户信息',
height: 300,
width: 380,
items: [
{
name: 'tid',id:'tid', fieldLabel: '编号', readOnly: true, xtype: 'textfield'
},
{
name: 'tname',id:'tname', fieldLabel: '姓名', allowBlank: false, xtype: 'textfield', maxLength: 5, minLength: 2
},
{
fieldLabel: '电话', name: 'phone',id:'phone', xtype: 'numberfield', allowBlank: false, maxLength: 12, minLength: 7
}, {
xtype: 'combo',
fieldLabel: '地址',
//width:245,
editable: false,
emptyText: '--请选择--',
store: addressStore,
//queryMode: 'local',
displayField: 'Address',//显示的字段
valueField: 'Address',//ID
id:"address",
name: 'address'
}
],
buttons: [
{
formBind: true,
text: '提交',
handler: function () {
var address = Ext.getCmp('address').getRawValue();
if (address == "" || address == null) {
Ext.MessageBox.alert("提示",'请选择地址..');
return;
}
form.getForm().submit({
method: 'POST',
//添加时候form表单提交传值方式params:{key:value }或通过action模型邦定传值
url: 'DataManagers?type=insert',
waitMsg: '请稍等,正在处理...',
success: function (form, action) {
//action 只接受json串
//var result=Ext.JSON.decode(action.result);
if (action.result.success == true) {
Ext.MessageBox.alert('提示',"添加成功！");
var grid=Ext.getCmp('tgrid');
grid.store.reload();
winbox.close();
form.getForm().reset();
} else {
Ext.MessageBox.alert("错误", "添加失败...请重试！");
}
},
failure: function () {
Ext.MessageBox.alert("错误", '系统错误请联系管理员Denny.Zhang');
}
})
}
},
{
text: '清空',
handler: function () {
form.getForm().reset();
Ext.getCmp('tid').setValue(randomNumber());
}
}]
});
var winbox = new Ext.window.Window({
title: '编辑模板',
modal: true,
items: form
})
winbox.show();
}
//删除
function DeleteInfo() {
var grid= Ext.getCmp('tgrid');
var selModel = grid.getSelectionModel();
var Ids;//要删除的id
if (selModel.hasSelection()) {//判断是否选中数据
Ext.Msg.confirm("警告", "确定要删除吗？", function (button) {
if (button == "yes") {
var rows = selModel.getSelection();
console.info(rows);
var ids=[];
//要删除的id
Ext.each(rows, function (item) {
ids.push(item.data.tId);
})
//alert(Ids);
Ext.Ajax.request({
url: 'DataManagers?type=delete',
params: {
idArry: ids
},
method: 'POST',
success: function (response,options) {
var responseText= response.responseText;
var result=Ext.JSON.decode(responseText);
console.info(result.success)
if(result.success==true){
Ext.MessageBox.alert("提示", '删除成功');
grid.store.reload();
}else{
Ext.MessageBox.alert("提示", '删除失败');
grid.store.reload();
}
},
failure: function () {
Ext.MessageBox.alert("错误", '系统错误请联系管理员');
}
});
}
});
}
else {
Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");
}
}
//修改
function Editform(grid,rows) {
var form = Ext.create('Ext.form.Panel', {
//closable:true,
id: 'EditForm',
height: 300,
width: 380,
items: [
{
name: 'tid',id:'tid', fieldLabel: '编号', readOnly: true, xtype: 'textfield'
},
{
name: 'tname',id:'tname', fieldLabel: '姓名', allowBlank: false, xtype: 'textfield', maxLength: 5, minLength: 2
},
{
fieldLabel: '电话', name: 'phone',id:'phone', xtype: 'numberfield', allowBlank: false, maxLength: 12, minLength: 7
}, {
xtype: 'combo',
fieldLabel: '地址',
//width:245,
editable: false,
emptyText: '--请选择--',
store: addressStore,
//queryMode: 'local',
displayField: 'Address',//显示的字段
valueField: 'Address',//ID
id:"address",
name: 'address'
}
],
buttons: [
{
formBind: true,
text: '提交', handler: function () {
form.getForm().submit({
method: 'POST',
params: {//传id修改
id: rows[0].data.tId
},
url: 'DataManagers?type=update',
waitMsg: '请稍等,正在处理...',
success: function (form, action) {
if (action.result.success == true) {
Ext.MessageBox.alert('提示','修改成功！');
grid.store.reload();
winbox.close();
//Ext.MessageBox.alert('提示','修改成功');
form.getForm().reset();
} else {
Ext.MessageBox.alert("错误", "系统错误请联系管理员");
}
}
})
}
},
{
text: '取消', handler: function () {
form.getForm().reset();
winbox.close();
}
}]
});
var winbox = new Ext.window.Window({
title: '编辑模板',
modal: true,
items: form
})
winbox.show();
//修改时赋值给修改页面
console.info(rows[0].raw.tid)
form.getForm().findField('tid').setValue(rows[0].data.tId);
form.getForm().findField('tname').setValue(rows[0].data.tName);
form.getForm().findField('phone').setValue(rows[0].data.Phone);
form.getForm().findField('address').setValue(rows[0].data.Address);
}
//搜索
function selectInfo() {
var store = Ext.getCmp('tgrid').getStore();
store.on('beforeload', function(store, options) {//搜索方法
var new_params = {
name : Ext.getCmp('likeName').getValue()
//获取name为str2的值,获得多选下拉框的选中的值
};
Ext.apply(store.proxy.extraParams, new_params);//重新帮定数据源
});
store.load();//记得重加载数据源
}
//地址数据源
var addressStore = Ext.create("Ext.data.Store", {
fields: ['Address', 'tId'],
proxy: {
type: 'ajax',
url: 'DataManagers?type=addressData',
},
});
//生成编号
function randomNumber(){
var todayTime=new Date(); // 获取当前时间
var time = Ext.Date.format(todayTime,'Ymds'); //格式化时间
var num="T"+time;
return num;
}
</script>
<body>
<h1>不死小翔-的选项卡</h1>
<div class="content" style="height: 150px;">
<div id="tabPanel" style=""></div>
</div>
</body>
</html>Extjs 4.2 grid增删改查 JSP
猜你喜欢
转载自blog.csdn.net/qq_36729112/article/details/86076285
今日推荐
周排行