DataTable Control是一个很好的在网页上显示数据清单的控件。这个控件功能很强大,包括列排序,分页,滚动,选择,调整列大小和行内编辑等。
我们做一个例子,包括列排序以及分页的功能,排序又分为client排序和server排序,这里我们使用client排序;分页又分为client分页和server分页,这里我们使用server分页。
首先,使用DataTable Control要include几个js文件,如下文件:
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta.js"></script>
include的css文件包括:
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
我们先来看一下DataTable的构造函数:
this.myDataTable = new YAHOO.widget.DataTable("serverpagination", myColumnDefs,this.myDataSource, oConfigs);
参数说明:
l 第一个参数是要显示数据清单的容器Element,可以是DIV,也可以是Table
l 第二个参数是存放列定义的对象数组
l 第三个参数是一个DataSource实例,用来取得DataTable中要显示的数据
l 第四个参数是一个可选参数,是DataTable的一些配置信息
其中第二个参数中列的属性包括:
· key
· label
· abbr
· children
· className
· editor
· editorOptions
· formatter
· resizeable
· sortable
· sortOptions
· width
以上具体信息请参照User’s Guide和API Documentation
我们先做前端页面,建立一个名为dt_serverpagination_clean.html的HTML文件,主要内容如下:
<body class="yui-skin-sam">
<h1>Server-side Pagination</h1>
<div id="dt-pag-nav">
<span id="prevLink"><</span> Showing items
<span id="startIndex">0</span> - <span id="endIndex">24</span>
<span id="ofTotal"></span> <span id="nextLink">></span>
</div>
<div id="serverpagination"></div>
<script type="text/javascript">
var growsThisPage = 0;
var gstartRecordIndex = 0;
var gtotalRecords = 0;
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.ServerPagination = new function() {
this.formatUrl = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
};
// Column definitions
var myColumnDefs = [
{key:"Id"},
{key:"Title", label:"Name", sortable:true, formatter:this.formatUrl},
{key:"Phone"},
{key:"City"},
{key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
];
// DataSource instance
this.myDataSource = new YAHOO.util.DataSource("dataTableCtrl.do?exec=query");
this.myDataSource.connMethodPost = true;
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
this.myDataSource.responseSchema = {
resultNode: "Result",
fields: ["Id","Title","Phone","City",{key:"AverageRating",parser:YAHOO.util.DataSource.parseNumber},"ClickUrl"]
};
// DataTable instance
var oConfigs = {
initialRequest: "startIndex=0&results=20" // Initial values
};
this.myDataTable = new YAHOO.widget.DataTable("serverpagination", myColumnDefs,
this.myDataSource, oConfigs);
//var ttcc = function(o){
// var oSelf = YAHOO.example.ServerPagination;
// var oDataTable = oSelf.myDataTable;
// alert(oDataTable.getSelectedRows().toString());
//};
// Subscribe to events for row selection
this.myDataTable.subscribe("rowMouseoverEvent", this.myDataTable.onEventHighlightRow);
this.myDataTable.subscribe("rowMouseoutEvent", this.myDataTable.onEventUnhighlightRow);
//this.myDataTable.subscribe("rowClickEvent", this.myDataTable.onEventSelectRow);
//this.myDataTable.subscribe("rowSelectEvent",ttcc);
// Custom code to parse the raw server data for Paginator values and page links
this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {
var oSelf = YAHOO.example.ServerPagination;
var oDataTable = oSelf.myDataTable;
// Get Paginator values
var resultSet = oRawResponse.childNodes[0];
// How many records this page
var recordsReturned = parseInt(resultSet.getElementsByTagName("recordsReturned")[0].childNodes[0].nodeValue);
// Start record index this page
var startIndex = parseInt(resultSet.getElementsByTagName("startIndex")[0].childNodes[0].nodeValue);
// Total records all pages
var totalRecords = parseInt(resultSet.getElementsByTagName("totalRecords")[0].childNodes[0].nodeValue);
// End record index this page
var endIndex = startIndex + recordsReturned - 1;
// Update the DataTable Paginator with new values
var newPag = {
//recordsReturned: recordsReturned,
rowsThisPage:recordsReturned,
startRecordIndex: startIndex,
//endIndex: endIndex,
totalRecords: totalRecords
}
oDataTable.updatePaginator(newPag);
//recordsReturned: recordsReturned,
growsThisPage=recordsReturned;
gstartRecordIndex= startIndex;
//endIndex: endIndex,
gtotalRecords= totalRecords;
// Update the links UI
YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" :
"<a href=/"#previous/" alt=/"Show previous items/"><</a>" ;
YAHOO.util.Dom.get("nextLink").innerHTML =
(endIndex + 1 >= totalRecords) ? ">" :
"<a href=/"#next/" alt=/"Show next items/">></a>";
YAHOO.util.Dom.get("startIndex").innerHTML = startIndex;
YAHOO.util.Dom.get("endIndex").innerHTML = endIndex;
YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords;
// Let the DataSource parse the rest of the response
return oParsedResponse;
};
// Hook up custom pagination
this.getPage = function(nStartRecordIndex, nResults) {
// If a new value is not passed in
// use the old value
if(!YAHOO.lang.isValue(nResults)) {
nResults = this.myDataTable.get("paginator").totalRecords;
}
// Invalid value
if(!YAHOO.lang.isValue(nStartRecordIndex)) {
return;
}
var newRequest = "startIndex=" + nStartRecordIndex + "&results=" + nResults;
this.myDataSource.sendRequest(newRequest, this.myDataTable.onDataReturnInitializeTable, this.myDataTable);
};
this.getPreviousPage = function(e) {
YAHOO.util.Event.stopEvent(e);
// Already at first page
if(this.myDataTable.get("paginator").startRecordIndex == 0) {
return;
}
var newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage;
this.getPage(newStartRecordIndex);
};
this.getNextPage = function(e) {
YAHOO.util.Event.stopEvent(e);
// Already at last page
if(gstartRecordIndex + growsThisPage >= gtotalRecords) {
return;
}
var newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage);
this.getPage(newStartRecordIndex);
};
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"), "click", this.getPreviousPage, this, true);
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"), "click", this.getNextPage, this, true);
};
});
</script>
</body>
下面这句是初始化DataSource,告诉DataSource从哪里(URL)取得数据,
this.myDataSource = new YAHOO.util.DataSource("dataTableCtrl.do?exec=query");
下面这句是在数据返回之后,CallBack之前,对数据进行处理,
this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse,oParsedResponse)
Server端主要是DataTableCtrl.java文件,主要代码如下:
package com.sys.ajax.web.controller;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.ApplicationContextException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;
public class DataTableCtrl extends MultiActionController {
private static List SmpleList = new ArrayList();
static {
for (int i = 0; i < 100; i++) {
Map map = new HashMap();
map.put("id", String.valueOf(i));
map.put("title", "title" + String.valueOf(i));
map.put("phone", "0222736" + String.valueOf(i));
map.put("city", "city" + String.valueOf(i));
map.put("rating", "1" + String.valueOf(i));
map.put("clickurl", "http://fireflys.vicp.net");
SmpleList.add(map);
}
}
public DataTableCtrl() throws ApplicationContextException {
super();
// TODO Auto-generated constructor stub
}
public DataTableCtrl(Object arg0) throws ApplicationContextException {
super(arg0);
// TODO Auto-generated constructor stub
}
public ModelAndView start(HttpServletRequest request,
HttpServletResponse response) throws Exception {
return null;
}
public ModelAndView query(HttpServletRequest request,
HttpServletResponse response) throws Exception {
System.out.println("url = " + request.getRequestURL() + "?" + request.getQueryString());
int startIndex = Integer.parseInt(request.getParameter("startIndex"));
int results = Integer.parseInt(request.getParameter("results"));
StringBuffer result = new StringBuffer();
result.append("<ResultSet>/n");
int size = SmpleList.size();
result.append("<recordsReturned>");
if (startIndex + results > size) {
result.append(String.valueOf(size - startIndex));
} else {
result.append(String.valueOf(results));
}
result.append("</recordsReturned>/n");
result.append("<startIndex>");
result.append(String.valueOf(startIndex));
result.append("</startIndex>/n");
result.append("<totalRecords>");
result.append(String.valueOf(size));
result.append("</totalRecords>/n");
for (int i = startIndex; i < startIndex + results; i++) {
if (i == size) {
break;
}
Map tmpMap = (Map)SmpleList.get(i);
result.append("<Result>");
result.append("<Id>");
result.append(tmpMap.get("id").toString());
result.append("</Id>");
result.append("<Title>");
result.append(tmpMap.get("title").toString());
result.append("</Title>");
result.append("<Phone>");
result.append(tmpMap.get("phone").toString());
result.append("</Phone>");
result.append("<City>");
result.append(tmpMap.get("city").toString());
result.append("</City>");
result.append("<AverageRating>");
result.append(tmpMap.get("rating").toString());
result.append("</AverageRating>");
result.append("<ClickUrl>");
result.append(tmpMap.get("clickurl").toString());
result.append("</ClickUrl>");
result.append("</Result>/n");
}
result.append("</ResultSet>/n");
System.out.println(result.toString());
response.setContentType("text/xml");
PrintWriter pw = response.getWriter();
pw.write(result.toString());
pw.close();
return null;
}
}
具体代码参照source
运行结果如下图:
该例子是用eclipse做的,后台使用spring,由于工程比较大,没有上传成功,所以有想要源码的ggjjddmm们,请发信到我的邮箱:firefly16888@sina.com