您的位置：首页 > 其它

jqGrid（3.6版本） 入门——创建jqGrid表格

2009-11-18 18:56 363 查看
由于jqGrid主要是用来处理和展现动态数据的，所以将创建一个Invoice 信息的数据库表，然后用jqGrid对其进行展现。

（注：原例子见jqGrid的官方wiki：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid，原例子服务器端是PHP的，我改成Jsp的了。）。

在MySql中创建表并插入一些数据。

DROP TABLE IF EXISTS `invheader`;
CREATE TABLE `invheader` (
`invid` int(11) NOT NULL AUTO_INCREMENT,
`invdate` date NOT NULL,
`client_id` int(11) NOT NULL,
`amount` decimal(10,2) NOT NULL DEFAULT '0.00',
`tax` decimal(10,2) NOT NULL DEFAULT '0.00',
`total` decimal(10,2) NOT NULL DEFAULT '0.00',
`note` char(100) DEFAULT NULL,
PRIMARY KEY (`invid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

INSERT INTO `invheader` VALUES ('1', '2009-11-11', '9400001', '10.00', '10.00', '100.00', 'xyz');
INSERT INTO `invheader` VALUES ('2', '2009-11-10', '9400002', '50.00', '50.00', '500.00', 'abc');
INSERT INTO `invheader` VALUES ('3', '2009-11-09', '9400003', '25.00', '25.00', '250.00', 'cba');
INSERT INTO `invheader` VALUES ('4', '2009-11-08', '9400004', '789.00', '0.02', '345.67', 'ccc');
INSERT INTO `invheader` VALUES ('5', '2009-11-07', '9400005', '8976.00', '0.11', '543.34', 'hhh');
INSERT INTO `invheader` VALUES ('6', '2009-11-06', '9400006', '5678.00', '0.56', '890.76', 'ggg');
INSERT INTO `invheader` VALUES ('7', '2009-11-05', '9400007', '4567.00', '0.74', '314.67', 'eee');
INSERT INTO `invheader` VALUES ('8', '2009-11-04', '9400008', '5789.00', '0.23', '234.56', 'fff');
INSERT INTO `invheader` VALUES ('9', '2009-11-03', '9400009', '5000.00', '0.43', '765.89', 'ddd');
INSERT INTO `invheader` VALUES ('10', '2009-11-02', '9400010', '4000.00', '0.78', '654.45', 'ccc');
INSERT INTO `invheader` VALUES ('11', '2009-11-01', '9400011', '1000.00', '0.25', '78.65', 'bbb');
INSERT INTO `invheader` VALUES ('12', '2009-10-11', '9400012', '500.00', '0.01', '58.90', 'aaa');


表格列的说明：

Invid - 发票key；

invdate - 发票日期；

amount - 数额；

tax - 税率；

total - 总额（包含税）；

note - 备注；

接着创建JSP页面，如下：

<%@ page language="java" import="java.util.*" 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>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<link type="text/css" href="<%=basePath%>css/redmond/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/ui.jqgrid.css"/>

<mce:script type="text/javascript"    src="<%=basePath%><!--
js/jquery-1.3.2.min.js">
// --></mce:script>
<mce:script type="text/javascript"    src="<%=basePath%><!--
js/jquery-ui-1.7.2.custom.min.js">
// --></mce:script>
<mce:script type="text/javascript"    src="<%=basePath%><!--
js/i18n/grid.locale-zh.js">
// --></mce:script>
<mce:script type="text/javascript"    src="<%=basePath%><!--
js/jquery.jqGrid.min.js">
// --></mce:script>
<mce:script type="text/javascript"><!--
jQuery(document).ready(function(){
jQuery("#myfisttbl").jqGrid({
url:'servlet/ShowData',
autowidth:true,
datatype: 'xml',
mtype: 'GET',
colNames:['发票号码','出具日期', '金额','税率','总额','备注'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false}
],
pager: '#tblbar',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: '我的第一个表格'
});
});

// --></mce:script>
</head>

<body>
<table id="myfisttbl"></table>
<div id="tblbar"></div>
</body>
</html>


到这里前台的工作已经完成了。其实现在已经可以访问这个页面，在我的项目中他是index.jsp页面，所以访问的地址是：
http://localhost:8080/TestJqtable/（tomcat发布）如图：


可以看到此时表格已经显示出来只是没有数据，因为服务器端得代码还没有写。下面来完成服务器端的代码。

服务器端代码主要就是连接数据库读取invheader表格的数据，这和通常的基于java的web程序没有什么不同，我写了个ShowData类，该类是个表准的servlet在该类的doGet方法中进行数据读取。不过需要注意的是，servelet返回数据的格式。由于jqGrid可以处理多种格式的数据，如xml，json等，但默认情况下jqGrid接收xml格式的数据，这个例子里 datatype: 'xml', mtype: 'GET'这两设置说了jqGrid会用get请求去访问服务端，读取服务器端返回的xml格式的数据。默认的xml格式如下：

<?xml version ="1.0" encoding="utf-8"?>
<rows>
<page> </page>
<total> </total>
<records> </records>
<row id = 'unique_rowid'>
<cell> cellcontent </cell>
<cell> <!--[CDATA[<font color='red'>cell</font> content]]> </cell>
…
</row>
<row id = 'unique_rowid'>
<cell> cellcontent </cell>
<cell> <![CDATA[<font color='red'>cell</font> content]]--> </cell>
…
</row>
…
</rows>


因此当servlet从数据库读取数据后需要将读取的数据按此格式进行拼装，然后将结果发送给jqGrid，jqGrid接收后将数据展现出来。

为了实习此功能，我将连接DataBase和装配xml文件的功能分成两个类DBUtil类负责连接数据库以javaBean（DataBean）的形式返回数据列表，CreateXml类，作用为以上述默认形式返回xml字符串，CreateXml调用DBUtil方法取得数据，最后ShowData类调用CreateXml的方法得到XML字符串，具体代码如下：

JavaBean：代表数据库表的一条记录的实体：

import java.sql.Timestamp;
import java.io.Serializable;

/**
*
*
* @author
* @version    1.0
*/

public class DataBean implements Serializable {

/**
* 缺省的构造函数
*/
public DataBean() {
}

/**
* invid
*/
private String invid = null;

/**
* invdate
*/
private String invdate = null;

/**
* client_id
*/
private String client_id = null;

/**
* amount
*/
private String amount = null;

/**
* tax
*/
private String tax = null;

/**
* total
*/
private String total = null;

/**
* note
*/
private String note = null;

/**
* 取得invid
*
* @return invid
*/
public String getInvid() {
return this.invid;
}

/**
* 设置invid
*
* @param 新的invid
*/
public void setInvid(String invid) {
this.invid = invid;
}

/**
* 取得invdate
*
* @return invdate
*/
public String getInvdate() {
return this.invdate;
}

/**
* 设置invdate
*
* @param 新的invdate
*/
public void setInvdate(String invdate) {
this.invdate = invdate;
}

/**
* 取得client_id
*
* @return client_id
*/
public String getClient_id() {
return this.client_id;
}

/**
* 设置client_id
*
* @param 新的client_id
*/
public void setClient_id(String client_id) {
this.client_id = client_id;
}

/**
* 取得amount
*
* @return amount
*/
public String getAmount() {
return this.amount;
}

/**
* 设置amount
*
* @param 新的amount
*/
public void setAmount(String amount) {
this.amount = amount;
}

/**
* 取得tax
*
* @return tax
*/
public String getTax() {
return this.tax;
}

/**
* 设置tax
*
* @param 新的tax
*/
public void setTax(String tax) {
this.tax = tax;
}

/**
* 取得total
*
* @return total
*/
public String getTotal() {
return this.total;
}

/**
* 设置total
*
* @param 新的total
*/
public void setTotal(String total) {
this.total = total;
}

/**
* 取得note
*
* @return note
*/
public String getNote() {
return this.note;
}

/**
* 设置note
*
* @param 新的note
*/
public void setNote(String note) {
this.note = note;
}

/**
* 调试用的方法， 可以将所有字段的数据输出
*
*/
public String toString() {
StringBuffer sb = new StringBuffer("<row id='");

sb.append(invid);
sb.append("'>");

sb.append("<cell>");
sb.append(invid);
sb.append("</cell>");

sb.append("<cell>");
sb.append(DateUtil.getYyyy_MM_dd(DateUtil.createDateByString(invdate,"yyyy-mm-dd")));
sb.append("</cell>");

sb.append("<cell>");
sb.append(amount);
sb.append("</cell>");

sb.append("<cell>");
sb.append(tax);
sb.append("</cell>");

sb.append("<cell>");
sb.append(total);
sb.append("</cell>");

sb.append("<cell><!--[CDATA[");
sb.append(note);
sb.append("]]--></cell>");

sb.append("</row>");
return sb.toString();
}
}


CreatXml：用于生成xml字串的类：

import java.sql.SQLException;
import java.util.ArrayList;

public class CreateXml {

public  String createXml(String sqlStr,int intRecordsPerPage, int intCurrentPage) throws SQLException{
int count = DBUtil.getInstance().queryCount(sqlStr);
String className = "util.DataBean";
int totalPage = 0;
if (count > 0 ) {
totalPage = (int)(Math.ceil((double)count/(double)intRecordsPerPage));
} else {
totalPage = 0;
}
if (intCurrentPage > totalPage) {
intCurrentPage = totalPage;
}
int begin = intRecordsPerPage*(intCurrentPage-1);
if (begin < 0) {
begin = 0;
}
ArrayList<DataBean> datas = (ArrayList<DataBean>)DBUtil.getInstance().queryData(sqlStr, className, begin, intRecordsPerPage);
StringBuffer sb = new StringBuffer("<?xml version='1.0' encoding='utf-8'?>");
sb.append("<rows>");
sb.append("<page>");
sb.append(intCurrentPage);
sb.append("</page>");

sb.append("<total>");
sb.append(totalPage);
sb.append("</total>");

sb.append("<records>");
sb.append(count);
sb.append("</records>");

for (DataBean data : datas) {
sb.append(data.toString());
}
sb.append("</rows>");
return sb.toString();
}
}


servlet： ShowData类

public class ShowData extends HttpServlet {

/**
* Constructor of the object.
*/
public ShowData() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int page = 0;
int rows = 0;
String pPage = request.getParameter("page");
String pRows = request.getParameter("rows");
if (pPage!=null && !pPage.isEmpty()) {
page = Integer.valueOf(pPage);
}
if (pRows!=null && !pRows.isEmpty()){
rows = Integer.valueOf(pRows);
}
String xml = null;

try {
xml = new CreateXml().createXml("invheader", rows, page);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(xml);
response.setHeader("Content-type", "text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
out.write(xml);
out.flush();
out.close();
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);

}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}


DBUtil类这里就不贴出了，因为每个人都有可能有不同的实现，只要最后能取得数据返回xml形式的字符串就可以了。

在我的项目里配置的servlet访问路径如下servlet/ShowData,请注意这个跟上面的jsp里的jqGrid的属性配置里的

url:'servlet/ShowData'是一致的，显然url这个属性就是jqGrid用来指定数据读取路径的。

现在再此访问http://localhost:8080/TestJqtable

可以看到如下画面：



可以看到jqGrid将分页功能也做好了，其实不止如此，jqGrid还可以有编辑数据，添加数据，删除数据，查询数据，等强大功能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航