Extjs分页grid组件

今天之闲,写篇关于Extjs中分页技术,之所以对Extjs感兴趣,完全出于对Extjs分页grid面板莱单栏的上一页、下一页界面好看,而且简单。实现分页很简单其实和Extjs动态树状莱单一样,都是用到JSON数据类型存储。
JS代码:
Ext.onReady(function(){

Ext.lib.Ajax.defaultPostHeader += '; charset=UTF-8';
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,
new Ext.grid.RowNumberer(),
{header:'编号',dataIndex:'id',sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField(
{
allowBlank:false
}))},
{header:'城镇',dataIndex:'price',sortable:true,width:300,
editor:new Ext.grid.GridEditor(new Ext.form.TextField(
{
allowBlank:false
}))},
{header:'邮编',dataIndex:'sex',sortable:true,renderer:renderSex}
]);

function renderSex(value)
{
if(value=='woman')
{
return "<span style='color:red'>"+value+"</span>";
}
else
{
return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>";
}
}

var store= new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'ExtjsServlet'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'
},[
{name:'id'},
{name:'price'},
{name:'sex'}
])
});

var grid = new Ext.grid.GridPanel({
renderTo:"right",
store:store,
cm:cm,
// sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask:true,
width:752,
height:470,
// bbar:new Ext.PagingToolbar({下面工具条
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0}数据到{1},一共有{2}条',
emptyMsg:'没有记录'

}),
tbar:[{
text: '删除',
iconCls:'user',
handler : function(){
//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
for( var i=0;i<rows.length;i++){

store.remove(rows);

}
grid.view.refresh();
// this.getEl().dom.action='./formservlet?operator=save';
this.getEl().dom.submit();
}},{
text: '添加'},

{
text: '修改'

},
{
text: '查询'
}]

});


store.load({params:{start:0,limit:10}})

Ext.get('remove').on("click",function(){
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
for( var i=0;i<rows.length;i++){
store.remove(rows);
}
grid.view.refresh();
},this);
// grid.render();
});
Servlet代码:
public class ExtjsServlet extends HttpServlet {
/*
int ................
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
int start =Integer.parseInt(request.getParameter("start"));
int pageSize=Integer.parseInt(request.getParameter("limit"));
System.out.println("分页servlet");
if(start==0){start=1;}
String sql = "SELECT TOP "+pageSize+"* FROM county WHERE (id NOT IN ( SELECT TOP "+pageSize*(start-1)+"id FROM county ORDER BY id))ORDER BY id";
System.out.println(start+" "+pageSize);
JdbcDB jb=new JdbcDB();
Connection conn=jb.getConnection();
StringBuilder s=jb.getResultSet(conn,sql);
System.out.println(s.toString());
response.getWriter().write(s.toString());
jb.close(conn);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
java代码:
public class JdbcDB {
/**
* @param args
*
*
*/
public Connection getConnection(){
Connection conn = null;
try{
Class.forName("net.sourceforge.jtds.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:jtds:sqlserver://localhost:1433/zhoutie","sa","123");
}catch(Exception e){
e.printStackTrace();
}
return conn;
}
public void close(Connection conn){
if(conn!=null){
try{
conn.close();
}catch(SQLException e){
e.printStackTrace();
}
}
}

public StringBuilder getResultSet(Connection conn,String sql){

int n=this.getResulsetRow(conn);
StringBuilder s= new StringBuilder("{totalProperty:"+n+",root:[");
PreparedStatement pst = null;
ResultSet rs = null;
try{
pst = conn.prepareStatement(sql);
rs = pst.executeQuery();

int i = 0;
while(rs.next())
{
i++;
String a=String.valueOf(rs.getInt("countyid"));
String c=rs.getString("county");
String b=String.valueOf(rs.getInt("fatherid"));
// System.out.println(a);
s.append("{id:'"+a+"',price:'"+c.trim()+"',sex:'"+b+"'}");
// System.out.println(rs.getString(2));
if(i<10)
{
s.append(",");
}
}

} catch(SQLException e){
e.printStackTrace();
}
s.append("]}");
return s;
}


public int getResulsetRow(Connection conn){
int n=0;
Statement pst = null;
ResultSet rs = null;
try{
pst=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
rs=pst.executeQuery("select count(id) from county");
rs.next();
n=rs.getInt(1);
System.out.println(n);
}catch(SQLException e){
e.printStackTrace();
}
return n;
}

public static void main(String[] args) {
JdbcDB jb=new JdbcDB();
Connection conn=jb.getConnection();
String sql = "SELECT TOP "+10+"* FROM county WHERE (id NOT IN ( SELECT TOP "+10*(1-1)+"id FROM county ORDER BY id))ORDER BY id";
StringBuilder s=jb.getResultSet(conn ,sql);
System.out.println(s.toString());
jb.close(conn);
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值