Yahoo UI 之DataTable

最新推荐文章于 2014-08-16 10:17:06 发布

firefly-cn

最新推荐文章于 2014-08-16 10:17:06 发布

阅读量3.5k

点赞数

分类专栏： WEB相关应用文章标签： yahoo ui import function constructor exception

本文链接：https://blog.csdn.net/m0085_cn/article/details/1778969

版权

WEB相关应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DataTable Control是一个很好的在网页上显示数据清单的控件。这个控件功能很强大，包括列排序，分页，滚动，选择，调整列大小和行内编辑等。

我们做一个例子，包括列排序以及分页的功能，排序又分为client排序和server排序，这里我们使用client排序；分页又分为client分页和server分页，这里我们使用server分页。

首先，使用DataTable Control要include几个js文件，如下文件：

include的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文件，主要内容如下：

<h1>Server-side Pagination</h1>

<span id="prevLink"><</span> Showing items

</div>

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

firefly-cn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Yahoo UI 之DataTable

DataTable Control是一个很好的在网页上显示数据清单的控件。这个控件功能很强大，包括列排序，分页，滚动，选择，调整列大小和行内编辑等。我们做一个例子，包括列排序以及分页的功能，排序又分为client排序和server排序，这里我们使用client排序；分页又分为client分页和server分页，这里我们使用server分页。首先，使用DataTable Control
复制链接

扫一扫