extjs 动态表格完整版

[b]前台页的源码[/b]
[b][color=red]test2.js[/color]
[/b]

<!--test2.html所需要的js___start -->

Ext.onReady(function() {

Ext.QuickTips.init();// 浮动信息提示

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地

/*刚打开页面等待中,需要屏蔽*/
var myMask;
Ext.onReady(function(){
myMask= new Ext.LoadMask(Ext.getBody(), {msg:"loading..."});
myMask.show();
});

// 定义数据源为远程代理和JSON数据格式�
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
// 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件
url : '../ext.do?method=date',
failure : function() {
Ext.Msg.alert("数据加载失败!请检查");
},
success:function(){
myMask.hide();
}

}),



reader : new Ext.data.JsonReader({
// 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!!
totalProperty : 'totalProperty',
root : 'root'

}, [{

name : 'id'

}, {

name : 'name'

}, {

name : 'sex'

}, {

name : "birthday",

type : "date",

dateFormat : "Y-n-j"

}, {

name : 'email'

},
{

name : 'edit'

}]
)

});


// 加载首页数据,每页显示10条记录�

ds.load({

params : {

start : 0,

limit : 10

}

});

// 定义复选框

var sm = new Ext.grid.CheckboxSelectionModel();

// 定义列模型

var cm = new Ext.grid.ColumnModel([

// new Ext.grid.RowNumberer(),// 添加自动行号�

sm,// 添加复选框�

{

header : '学号',

width : 40,

dataIndex : 'id'

}, {

header : '姓名',

width : 40,

dataIndex : 'name',

sortable:true,

editor:new Ext.form.TextField()
}, {

header : '性别',

width : 40,

dataIndex : 'sex',

renderer : changeSex,

sortable:true,

editor:new Ext.form.ComboBox({transform:"sexList",triggerAction:"all",lazyRender:true})

// 红男绿女

}, {

header : '出生日期',

dataIndex : 'birthday',

renderer : Ext.util.Format.dateRenderer('Y年m月d日'),

sortable:true,

editor:new Ext.form.DateField({format:'Y年m月d日'})

// 格式化日期

}, {

header : '电子邮件',

width : 120,

dataIndex : 'email',

renderer : sendEmail,

sortable:true,

editor:new Ext.form.TextField()

// 单击启动邮件客户端发送邮件

},

{

header : '操作',

width :25,

dataIndex : 'edit',

renderer : sendEdit
}

]);

// 设置所有列字段默认排序

cm.defaultSortable = true;

// 按要求渲染性别的函数�

function changeSex(value) {

if (value == '男') {

return "<span style='color:red;font-weight:bold;'>男</span>";

} else {

return "<span style='color:green;font-weight:bold;'>女</span>";

}

}

//按要求渲染email的函数

function sendEmail(value) {

return "<a href=mailto:" + value + ">" + value + "</a>";

}

//按要求渲染edit的函数

function sendEdit(value) {

return "<button>" + value + "</button>";

}

// 定义一个表格面板�

var grid = new Ext.grid.EditorGridPanel({

id : 'student-grid',// 设置标识ID,方便以后引用!
title : '学员信息管理�',// 标题
// 显示数据的地方,注意这里的renderTo要和html文件中的div要一致!!
renderTo : 'myGrid',// 显示表格的地方显示表格的地方

sm : sm,// 复选框

cm : cm,// 列模型

ds : ds,// 数据源�

stripeRows : true,// 加上行条纹

loadMask : true,// 加载数据时遮蔽表格

border : true,// 加上边框

frame : true,// 显示天蓝色圆角框

autoHeight : true,// 自动设置高度,这个配置很重要�

width : 700,

x : 1,// 设置初始位置横坐标�

y : 1,// 设置初始位置纵坐标�

// enableDragDrop : true,//容许行的拖曳

collapsible : true, // 面板可以折叠

// titleCollapse : true,// 单击表头任何地方都可以折叠�

floating : true,// 设置浮动,能否拖动成功就靠它了,注意设置浮动后它就置顶了�

// 实现拖曳效果,参考官方文档�
draggable : {

insertProxy : false,

onDrag : function(e) {

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);

var s = this.panel.getEl().shadow;// 拖曳中消除原位置的阴影�

if (s) {

s.realign(this.x, this.y, pel.getWidth(),

pel.getHeight());

}

},

endDrag : function(e) {// 拖曳结束后保存位置效果�

this.panel.setPosition(this.x, this.y);

}

},

// UI视图配置

viewConfig : {

forceFit : true

//强制适应分布宽度�

},

// 表格顶部动作或按钮工具栏

tbar : new Ext.Toolbar({

items : [{

id : 'btnAdd',

text : "添加�",

handler : function() {

Ext.MessageBox.alert("添加",

"做添加的操作");

}

}, new Ext.Toolbar.SplitButton({}), {

id : 'btnEdit',

text : "编辑",

handler : function() {

Ext.MessageBox.alert("编辑",

"做编辑的操作");

}

}, '-', {

id : 'btnDel',

text : "删除",

handler : function() {

Ext.MessageBox.alert("删除",

"做删除的操作�");

}

}]

}),

// 表格底部分页工具栏

bbar : new Ext.PagingToolbar({

pageSize : 6,

store : ds,

displayInfo : true,

displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

emptyMsg : "没有记录"

})

});


//表格编辑事件
grid.on("afteredit",afterEdit,this);

function afterEdit(obj){
var r=obj.record;
var id=r.get("id");
var name=r.get("name");
var sex=r.get("sex");
var bornDate=r.get("birthday");
var email=r.get("email");
// var c=this.record2obj(r);
// Ext.MessageBox.alert('show',"【id:"+id+"】【name:"+name+"】【sex:"+sex+"】【bornDate:"+bornDate+"】【email:"+email+"】");
//字符转日期格式
var date=Ext.util.Format.date(bornDate,"Y-m-d");
//alert(date);
//调用异步方法
rollRequest(id,name,sex,date,email);

};

//异步调用方法
function rollRequest(id,name,sex,bornDate,email){
//alert(id);
Ext.Ajax.request({
url:'../ext.do?method=update',
success:function(response,config){
//alert(config.url+"-"+config.method);
//成功后的刷新事件
ds.load({
params : {
start : 0,
limit : 10
}});
//Ext.MessageBox.alert("result",response.responseText); //返回值
//显示[修改成功]
document.getElementById("loading").style.display="block";
//透明度
Ext.get('loading').setOpacity(1);
Ext.get('loading').setOpacity(0.0,{duration:2,callback:function(){
}});
},
failure:function(){
Ext.MessageBox.alert("result","失败");
},
method:"post",
//传入后台的参数
params:{'id':id,'name':name,'sex':sex,'bornDate':bornDate,'email':email}

});
}


//给表格单元格加单击事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
//如果是编辑列允许操作
if(columnIndex==6){
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
// Ext.MessageBox.alert('show','当前选中的数据是:'+data+"-"+record.id);
//字符转日期格式
var bornDate=Ext.util.Format.date(record.get('birthday'),"Y-m-d");
//调用子窗口
showDialog(record.get('id'),record.get('name'),record.get('sex'),bornDate,record.get('email'));
}
}

});


//子窗口
function showDialog(id,name,sex,birthday,email){
// alert(id+"-"+name+""+sex+"-"+birthday+"-"+email);
var result=id+","+name+","+sex+","+birthday+","+email;
var doc=window.showModalDialog("dialog.jsp?result="+result,"ddd",
"font-size:20px;dialogWidth:400px;dialogHeight:400px;scrollbars=no;status=no");

if(doc=="ok"){
window.location.reload();
}
}

<!--test2.html所需要的js___end -->






[b][color=red]test2.html[/color]
[/b]
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

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

<!-- 修改层的样式 -->
<style type="text/css">
#loading {
position:absolute;
left:20%;
top:25%;
padding:2px;
z-index:20001;
height:auto;
}
#loading .loading-indicator {
background:white;
color:#444;
font:bold 20px tahoma, arial, helvetica;
padding:10px;
margin:0;
height:auto;
}
#loading-msg {
font: normal 18px arial, tahoma, sans-serif;
}
</style>
</head>

<body>

<!-- 表格需要的html元素 -->
<select id="sexList">
<option value="男">男 </option>
<option value="女">女 </option>
</select>
<div id="myGrid"></div>

<!-- 默认不显示修改层 -->
<div id="loading" style="background-color:#00CC33;width:120px;height:20px;display:none;">
<div class="loading-indicator"> <span id="loading-msg" style="color:red;font-size:20px;">修改成功</span></div>
</div>

</body>

</html>

[/code]

[b][color=red]dialog.js[/color][/b]


<!--dialog.jsp所需要的js___start-->

function startOnload(temp){
//alert(temp);
//分割从页面传来的参数
var result=temp;
var list=result.split(',');
var id=list[0];
var name=list[1];
var sex=list[2];
var birthday=list[3];
var email=list[4];

//alert(id+"-"+name+"-"+sex+"-"+birthday+"-"+email);

LoginPanel = function(){
var win, f;
var buildForm = function(){
// 构建一个表单面板容器
f = new Ext.form.FormPanel({
// 给面板的body元素指定自定义的CSS样式信息
bodyStyle : 'padding-top:6px',
// 容器中元素的默认类型
defaultType : 'textfield',
// 标签的默认对齐方式
labelAlign : 'right',
// 指定标签的默认长度
labelWidth : 55,
// 标签与字段录入框之间的空白
labelPad : 0,
// 窗口是否显示背景色
frame : true,
// 容器中组件默认统一配置选项
defaults :{
// 验证字段是否能为空
allowBlank : false,
// 字段宽度
width : 158
},
// 指定容器中的元素
items : [{
// 给元素添加CSS样式
cls : 'user',
// 元素的名称
name : 'name',
//默认值
value: name,
// 指定字段的标签
fieldLabel : '姓名',
// 为空时提示信息
blankText : '姓名不能为空',
allowBlank : false,
id:'name'
},{
cls : 'key',
name : 'sex',
fieldLabel : '性别',
blankText : '性别不能为空',
xtype:'combo',
store:['男','女','保密'],
emptyText:'请选择性别',
forceSelection:true,
value:sex,
// readOnly:true,
allowBlank : false

},
{
cls : 'key',
xtype:'datefield',
//修改日期样式
format:'Y-n-j',
name : 'bornDate',
value:birthday,
fieldLabel : '出生日期',
blankText : '出生日期不能为空',
inputType : 'text'
},
{
cls : 'key',
name : 'email',
vtype:'email',
fieldLabel : '电子邮件',
value:email,
blankText : '电子邮件不能为空',
inputType : 'text'
},
{
cls : 'key',
name : 'id',
value:id,
inputType : 'hidden'
}]
});
};
var buildWin = function(){
// 构建一个窗口面板容器
win = new Ext.Window({
// 把该面板绑定于win这个DIV对象上
el : 'win',
// 窗口面板标题
title : '学生信息管理',
// 窗口面板宽度
width : 265,
// 高度
height : 200,
// 该面板布局类型
layout : 'column',
// 面板是否可以关闭及打开
collapsible : true,
defaults :{
// 容器内元素是否显示边框
border : false
},
items :{
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
items : f
},
// 面板中按钮的排列方式
buttonAlign : 'left',
// 面板底部的一个或多个按钮对象
buttons : [{
// 按钮上需显示的文本
text : '修改',
// 单击按钮时响应的动作
handler : login
},{
text : '重置',
handler : reset
},{
text : '返回',
handler : link
}]
});
};
// 单击按钮时执行登陆操作
var login = function(){
// 执行当前表单面板的submit
f.form.submit({
// 动作发生期间显示的文本信息
waitMsg : '正在修改......',
// submit发生时指向的地址
url : '../ext.do?method=update',
// 表单提交方式
method : 'POST',
// 数据验证通过时发生的动作
success : function(form, action){
// window.location.href = 'manage.ejf';
//获得表单元素为name的对象value值
//alert(f.findById('name').getEl().getValue());
//后台json返回的结果
alert(action.result.tips);
//关闭当前窗口
window.close();
//关闭窗口的返回值
window.returnValue="ok";
},
// 反之......
failure : function(form, action){
// reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告', action.result.errors.msg);
}
});
};
// 清空当前表单面板内的数据
var reset = function(){
f.form.reset();
};
// 注册按钮指向的地址
var link = function(){
//window.open('http://easyjf.com/user.ejf?cmd=registerPU', '_blank')

window.close();
};
return {
init : function(){
buildForm();
buildWin();
// 最后把窗口面板显示出来
win.show();
}
}
}();
// 当前页面DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.
Ext.onReady(LoginPanel.init, LoginPanel);

}

<!--dialog.jsp所需要的js___end-->


[b][color=red]dialog.jsp弹出框[/color]
[/b]
[code]
<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dialog.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

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

<script type="text/javascript">
Ext.BLANK_IMAGE_URL ='resources/images/default/s.gif';
Ext.QuickTips.init();//初始化鼠标停留时的显示框
Ext.form.Field.prototype.msgTarget = 'side';
</script>

<style type="text/css">
.user{}{ background:url(images/user.gif) no-repeat 1px 2px; }
.key{}{ background:url(images/key.gif) no-repeat 1px 2px; }
.key,.user{}{
background-color:#FFFFFF;
padding-left:20px;
font-weight:bold;
color:#000033;
}
</style>

</head>

<body bgColor="#DFE8F6">
<%
//接收页面参数
request.setCharacterEncoding("utf-8");
String result=new String(request.getParameter("result").getBytes("iso8859-1"),"gbk");
%>
<!-- 面板显示层 -->
<div id="win" class="x-hidden"></div>

</body>

<!-- 必须放到最后调用dialog.js中的startOnload方法传值-->
<script type="text/javascript">
var temp="<%=result%>";
startOnload(temp);

</script>

</html>


[/code]

[b]服务器xml的源码[/b]
[b][color=red]wed.xml[/color]
[/b]

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>ext</servlet-name>
<servlet-class>org.ext.ser.ExtSerlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ext</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>




[b]servlet的源码[/b]
[b][color=red]ExtSerlet.java[/color]
[/b]

package org.ext.ser;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.ext.db.AccessStudent;


public class ExtSerlet extends HttpServlet{

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}


protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

System.out.println("loading....");

try {
//让前台页面的loading效果更明示
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//接收页面参数。。date为加载数据 update为更新数据
String str=request.getParameter("method");
//访问数据库对象
AccessStudent as=new AccessStudent();
//设置页面字符编码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

if(str.equals("date")){
//返回学生集合
List<Student> list=as.getStudent();

//创建一个json对象。。
JSONObject json = new JSONObject();
//设置json中的页数
json.put("totalProperty", 100);
//把集合中的数据放到json中。。
JSONArray arr = JSONArray.fromObject(list);
//设置json的根点
json.put("root", arr);
//把json到放response中 ext中的grid表格的数据必须封装到json中 传到页面
response.getWriter().print(json);
//关闭reqsponse
response.getWriter().close();

}else if(str.equals("update")){
//获得页面传来的参数
int id=Integer.parseInt(request.getParameter("id"));
String name=request.getParameter("name");
String sex=request.getParameter("sex");
String bornDate=request.getParameter("bornDate");
String email=request.getParameter("email");
System.out.println(id+"-update-"+bornDate);
Student stu=new Student();
stu.setId(id);
stu.setSex(sex);
stu.setName(name);
stu.setBirthday(bornDate);
stu.setEmail(email);
//开始更新
as.update(stu);

}

//必须返回一个json给前台页面 ,否则前台页面报错
response.getWriter().print("{success:true,tips:'修改成功'}");
response.getWriter().flush();
}



}



[b]javaBean存放数据[/b]
[b][color=red]Student.java[/color]
[/b]

package org.ext.ser;

public class Student {
private int id;
private String sex;
private String birthday;
private String email;
private String name;
//用来显示编辑
private String edit;

public String getEdit() {
return edit;
}
public void setEdit(String edit) {
this.edit = edit;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
}



[b]数据库操作的源码[/b]
[b][color=red]AccessStudent.java[/color]
[/b]

package org.ext.db;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.ext.ser.Student;

public class AccessStudent extends DBConnection{

public List<Student> getStudent(){
List<Student> list=new ArrayList<Student>();
Connection conn=this.getConnection();
String sql="select * from student";
try {
PreparedStatement ps=conn.prepareStatement(sql);
ResultSet rs=ps.executeQuery();
while(rs.next()){
Student sd=new Student();
sd.setId(rs.getInt(1));
sd.setName(rs.getString(2));
sd.setSex(rs.getString(3));
sd.setBirthday(rs.getString(4));
sd.setEmail(rs.getString(5));
sd.setEdit("编辑");
list.add(sd);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}


public boolean update(Student stu){
int rs=0;
Connection conn=this.getConnection();
String sql="update student set name=?,sex=?,bornDate=?,email=? where id=?";
try {
PreparedStatement ps=conn.prepareStatement(sql);
ps.setString(1,stu.getName());
ps.setString(2,stu.getSex());
ps.setString(3,stu.getBirthday());
ps.setString(4,stu.getEmail());
ps.setInt(5,stu.getId());
rs=ps.executeUpdate();

} catch (SQLException e) {
e.printStackTrace();
}
return (rs>0?true:false);
}

}



[b]数据库连接的源码[/b]
[b][color=red]DBConnection.java[/color]
[/b]
[code]
package org.ext.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {

private String user="root";
private String pass="root";
private String url="jdbc:mysql://localhost/abc";
private String path="org.gjt.mm.mysql.Driver";
private Connection conn=null;

public Connection getConnection(){
if(conn==null){
try {
Class.forName(path);
conn=DriverManager.getConnection(url, user, pass);
return conn;
} catch (Exception e) {
e.printStackTrace();
}
}
return conn;
}

public void DBclose(){
if(conn!=null){
try {
conn.close();
conn=null;
} catch (SQLException e) {
e.printStackTrace();
}

}
}

public static void main(String[] args) {
DBConnection db=new DBConnection();
System.out.println(db.getConnection());
}
}

[/code]

[b]Mysql语句的源码[/b]
[code]
use abc;
create table student (id int AUTO_INCREMENT primary key ,name varchar(20),sex varchar(2),
bornDate varchar(12),email varchar(20));

desc student;

insert into student (name,sex,bornDate,email) values('xiaoming','男','2010-2-1','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小王','男','2010-9-4','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小刘','男','2010-3-21','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小红','男','2010-8-11','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小半','男','2010-7-8','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('yoyo','女','2010-1-4','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('xxssl','女','2010-3-9','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小顺','女','2010-12-13','fsfsd@sina.com');


select * from student;
[/code]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值