用Extjs 做一个前台，数据从数据库里取出来

0 0

用Extjs 做一个前台，数据从数据库里取出来20

做一个表格显示数据。后台已写好，最好写上注释后台是怎把值传到extjs的，谢谢

CREATE TABLE [dbo].[book](
[id] [int] IDENTITY(1,1) NOT NULL,
[nvarchar](9) NULL,
[BookName] [nvarchar](9) NULL,
[BookPrice] [nvarchar](9) NULL
) ON [PRIMARY]

package bean;
public class Book {
private int id;
private String Code;
private String BookName;
private String BookPrice;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCode() {
return Code;
}
public void setCode(String code) {
Code = code;
}
public String getBookName() {
return BookName;
}
public void setBookName(String bookName) {
BookName = bookName;
}
public String getBookPrice() {
return BookPrice;
}
public void setBookPrice(String bookPrice) {
BookPrice = bookPrice;
}

}

package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import bean.Book;

public class AllBook {

public static final String URL="jdbc:sqlserver://localhost:1433;DatabaseName=demodb";
public static final String serName="sa";
public static final String Pwd="888888";

protected static Connection conn=null;
protected static PreparedStatement pst=null;
protected static ResultSet rs=null;
public List fillbook(){
//List menuList=new ArrayList();
List<Book> list1=new ArrayList<Book>();
try {
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
Connection con=DriverManager.getConnection(URL,serName,Pwd); //得到连接
Statement st=con.createStatement();

String sql="select * from book"; //查询数据SQL语句s

ResultSet rs=st.executeQuery(sql); //获取结果集

while (rs.next()){
Book book=new Book();
book.setCode(rs.getString("Code"));
book.setBookName(rs.getString("Name"));
book.setBookPrice(rs.getString("Price"));
list1.add(book);
}
con.close(); //关闭连接
}
catch (Exception ex) {
ex.printStackTrace(); //输出出错信息
}
return list1;
}

}

2012年11月11日 22:02

QQ1067184821
2
0 0 6

3个答案按时间排序按投票排序

0 0

后台把对象用json封装后，传至前端，即可！

2012年11月12日 13:55

freezingsky
159
1 1 16

1条评论

0 0

后台拼接好json格式的字符串，返回到前台，前台extjs 接收到时，转化为json对象就是js对象即可。

2012年11月12日 10:01

Jantol
15
0 0 1

1条评论

0 0

这是页面js，用的ExtJs3.4，4.X也可以用的！类库自己引入

Ext.onReady(function(){
	//定义stroe
	var store = new Ext.data.JsonStore({
		root:"root",
		totalProperty:'total',
		url:"../GridServlet",
		fields:[
			{name:"id"},
			{name:"code"},
			{name:"bookName"},
			{name:"bookPrice"}
		]
	});
	
	//定义columnModel
	var cm = new Ext.grid.ColumnModel([
		{header:"id",dataIndex:"id"},
		{header:"书名",dataIndex:"bookName"},
		{header:"价格",dataIndex:"bookPrice"},
		{header:"code",dataIndex:"code"}
	]);
	
	//定义grid
	var grid = new Ext.grid.GridPanel({
		height:270,
		renderTo:Ext.getBody(),//渲染到页面body
		store:store,
		cm:cm,
		loadMask: true,//加载数据时的那个提示框
		stripeRows:true,//行斑马线
		viewConfig:{
			forceFit:true//自动列宽
		},
		//翻页工具条
		bbar:new Ext.PagingToolbar({
			pageSize:10,//每页显示条数
			store:store,
			displayInfo:true,//为true时displayMsg中的{0}..才会被替换
			displayMsg:'显示第{0}条到{1}条记录，一共{2}条',
			emptyMsg:'没有记录'
		})
	});
	
	//加载stroe
	store.load({
		params:{
			start:0,
			limit:10
		}
	});
});

上面的store定义了一个url,那个就是你请求数据时需要获取url的Servlet，你需要做的就是接收分页组件在翻页时的参数start和limit，然后查询到一个List<Book>,最后把list转换成json，格式类似于这样：
{total:'总记录数',root:[{id:1,bookName:'bookName',bookPrice:10.5,code:'123fds'}...]}
这里的total和root两个节点名和store里面的totalProperty和root值对应
在Servlet中转换好json之后就这样返回给浏览器：

response.setContentType("text/json; charset=utf-8");
response.getWriter().write(json);

有不懂的再问吧，多看ExtJs官方的demo，这个不太难的。

2012年11月12日 09:07

Navee
14
0 0 5

3条评论

已解决问题

未解决问题

排行榜

查看全部排名>>