公司需要用grid动态的从数据库读取数据，网上居然没有现成的，只好自己写了.文章是根据网上资料加工出来的。
1. 数据库格式：
CREATE TABLE `user` (
`id` int(10) NOT NULL auto_increment, --用户id
`username` varchar(20) default NULL, --用户name
`password` varchar(20) default NULL, --用户密码
PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. serviceimpl说明：
说明：获取数据库数据，组建并返回一个json格式的String。我创建的Grid需要一个有根节点的Json字符串，没有根节点是无法读取Json字符串的。网上说可以不需要根节点，但是我没调试出来，一般把数据表的名子作为根节点。
代码：
public String allstr(){
String str ="";
User use=new User();
int id;
String name;
String password;
List list = daoImple.findAll();
if(list!=null&&list.size()>0){
str=str+"{'root':[";
for(int i=0;i<list.size();i++){
use=(User) list.get(i);
id=use.getId();
name=use.getUsername();
password=use.getPassword();
str=str+"{"+"'id':'"+id+"',"+"'name':'"+name+"',"+"'password':'"+password+"'}";
if(i+1!=list.size())
str=str+",";
}
str=str+"]}";
}
return str;
}
3. action说明：
说明：调用serviceimpl的函数，将json格式的字符串发送到一个网页里面。
4. lookall.jsp的作用：
说明：得到action发送的字符串并显示到网页上。
代码：
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> <s:property value="str" escape="false"/>
5. grid.js的作用：
说明：主要使用ext的GridPanel创建。里面的数据用json字符转读取和用store数据存储。
代码：
Ext.onReady(function(){
var MyRecord = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'password'}
]);
var dataProxy=new Ext.data.HttpProxy(
{url:http://localhost:8080/testStruts2/login/lookall.action}
);
var theReader=new Ext.data.JsonReader({
root: 'root'
},MyRecord);
var store=new Ext.data.Store({
proxy:dataProxy,
reader:theReader
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [//设计页面显示的表格信息，字段与Ext.data.Record.create匹配
{id:'id',header: "UserID", width: 60, sortable: true, dataIndex: 'id'},
{header: "UserName", width: 75, sortable: true, dataIndex: 'name'},
{header: "UserPassword", width: 75, sortable: true, dataIndex: 'password'}
],
stripeRows: true,
autoExpandColumn: 'id',
height:350,
width:300,
title:'UserInfo'
});
grid.render('example-grid');
grid.getSelectionModel().selectFirstRow();
});
6. grid.jsp页面：
说明：调用grid.js。
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML Grid Example</title>
<link rel="stylesheet" type="text/css" href="../ext-all.css" />
<script type="text/javascript" src="../ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<!-- EXAMPLES -->
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
<div id="example-grid"> zhangsan</div>
</body>
</html>
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
