[组件] TopN 排行榜
废话不说，直接看代码，最后会给出一个示例：
/**
* TopN 排行榜组件
*
* @param {Array} data 排行数据
* @param {Number} N 即TopN的N
* @param {Object} config 配置对象，格式为：
* {
* headers: [], // 每一项的header信息，如"北京"的header为"城市"，
* // 每一项都是HTML字符串
* // 也可以是Function，返回一段HTML代码
* showHeader: false, // 是否显示headers
*
* keys: [], // 每一项数据的key
* values: [], // 如需定义结构，元素为Function，返回一段HTML
* // 一般传null即可
* mainKey: 'xx', // 比较项
* sorted: false, // 数据是否已排序
* }
*
* headers(如果有), keys, values的长度保持一致
*
* 如有色块，约定className为valueBar，如果色块旁边需附有值说明，约定className
* 为valueLiteral，如下:
* <div class="valueBar"></div><div class="valueLiteral">100</div>
*/
function TopN(data, N, config) {
this.data = data;
this.N = N;
this.config = config || {};
// 对应的DOM节点
this.node = null;
if (!this.config.sorded) {
this.data.sort(this.sort());
}
}
TopN.prototype = {
constructor: TopN,
/**
* @param {HTMLElement} parentNode 插入TopN组件的父元素
*/
initDOM: function() {
return function(parentNode) {
if (!parentNode || parentNode.nodeType !== 1) return;
var config = this.config, html = ['<table class="ui_TopN">'],
i, len = config.keys.length;
// 加col
html.push('<colgroup>');
for (i = 1; i <= len; i++) {
html.push('<col class="column' + i + '" />');
}
html.push('</colgroup>');
// 拼装header部分
if (config.showHeader) {
html.push('<thead><tr>');
var headers = config.headers;
for (i = 0, len = headers.length; i < len; i++) {
html.push('<th>');
html.push(headers[i] || ' ');
html.push('</th>');
}
html.push('</tr></thead>');
}
// 拼装排行部分
html.push('<tbody>');
// 遍历前N 项数据
var keys = config.keys, key,
values = config.values, value,
items = this.data, item,
j, size = values.length;
for (i = 0, len = this.N; i < len; i++) {
item = items[i];
html.push('<tr>');
// 遍历每项数据的keys
for (j = 0; j < size; j++) {
key = keys[j];
value = values[j];
if (key) {
key = item[key];
} else {
// key为空表示序号项
key = i + 1;
}
if (typeof value === 'function') {
value = value(key);
} else {
value = key;
}
html.push('<td>');
html.push(value);
html.push('</td>');
}
html.push('</tr>');
}
html.push('</tbody></table>');
var doc = parentNode.ownerDocument,
div = doc.createElement('div');
div.innerHTML = html.join('');
this.node = div.firstChild;
parentNode.appendChild(this.node);
if ($('valueBar', this.node)[0]) {
this.autoWidth();
}
}
}(),
autoWidth: function() {
var maxValue = this.data[0][this.config.mainKey], maxWidth;
var valueBars = $('valueBar', this.node), bar,
valueLiterals = $('valueLiteral', this.node), literal;
// 进到这里，valueBars肯定不为空，所以就看valueLiterals是否为空
maxWidth = valueBars[0].parentNode.offsetWidth - (valueLiterals[0] ? valueLiterals[0].offsetWidth : 0);
var data = this.data, mainKey = this.config.mainKey, percentage, width;
for (var i = 0, len = valueBars.length; i < len; i++) {
bar = valueBars[i];
percentage = data[i][mainKey] / maxValue;
width = maxWidth * percentage;
width = Math.max(4, width);
bar.style.width = width + 'px';
if (!bar.innerHTML) {
bar.innerHTML = ' ';
}
}
},
/**
* 排序方法，作为Array.prototype.sort()的参数
* @return {Function}
*/
sort: function() {
var key = this.config.mainKey;
return function(item1, item2) {
if (item1 && typeof item1[key] !== 'undefined' &&
item2 && typeof item2[key] !== 'undefined') {
var value1 = '' + item1[key];
var value2 = '' + item2[key];
return -1 * value1.localeCompare(value2);
}
}
}
}
function $(className, node){
node = node || document;
return node.getElementsByClassName(className);
}
接着给例子，请先把TopN组件存为topN.js：
<!DOCTTYPE html>
<html>
<head>
<script src="topN.js"></script>
<script>
var data = [
{name:'北京', input:5000},
{name:'上海', input:4000},
{name:'深圳', input:6000},
{name:'广州', input:3000},
{name:'天津', input:7000},
]
var top3 = new TopN(data, 3, {
headers: [null, '城市', '值', '还是城市'],
showHeader: true,
keys: [null, 'name', 'input', 'name'],
values: [null, null, function(s){
return '<div class="valueBar"></div><span class="valueLiteral">'+s+'</span>';
}, function(value){
return '<b>'+value+'</b>'
}],
mainKey: 'input'
})
window.onload = function(){
top3.initDOM(document.body);
}
</script>
<style>
ol {
border:2px solid blue;
}
.column3 {
width:300px;
}
.valueBar {
background:blue;
}
</style>
</head>
<body>
</body>
</html>