[组件] 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;// 加colhtml.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>');// 遍历每项数据的keysfor (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>

转载于:https://www.cnblogs.com/zhujl/archive/2011/12/19/2293741.html

[组件] TopN 排行榜相关推荐

使用Redis实现用户积分及TopN排行榜功能
1 需求添加积分在用户签到的基础上添加用户积分,签到 1 天送 10 积分,连续签到 2 天送 20 积分,3 天送 30 积分,4 天以上均送 50 积分. 积分排行榜 2 表设计利用MySQ ...
TopN算法与排行榜
在系统中,我们经常会遇到这样的需求:将大量(比如几十万.甚至上百万)的对象进行排序,然后只需要取出最Top的前N名作为排行榜的数据,这即是一个TopN算法.常见的解决方案有三种: (1)直接使用Lis ...
Flink SQL 功能解密系列 —— 流式 TopN 挑战与实现
TopN 是统计报表和大屏非常常见的功能,主要用来实时计算排行榜.流式的 TopN 不同于批处理的 TopN,它的特点是持续的在内存中按照某个统计指标(如出现次数)计算 TopN 排行榜,然后当排行榜 ...
Sql优化v-1.0
了解优化之前先了解一下搜索原理B树.B-树.B+树.B*树之间的关系!分享2篇博客! https://blog.csdn.net/u013411246/article/details/81088914 ...
这套精美的开源数据报表模板，美呆了
大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标! 今天小编推荐一套精美的数 ...
借助云能力，小游戏开发过程是如何升级的？
导语 | 9月21日,云+社区技术沙龙"小程序·云开发"北京站圆满落幕.本期沙龙腾讯云联合猫眼.即速应用.白鹭引擎等企业,将从小程序·云开发后台技术.云开发实时数据推送实践.云开发 ...
《Oracle 入门教程》第 01 篇专栏介绍
文章目录专栏背景专栏内容专栏寄语大家好,我是只谈技术不剪发的 Tony 老师.欢迎来到我的专栏<Oracle 入门教程>!本专栏主要面向 Oracle 数据库的初学者,包括初级 D ...
《Oracle 入门教程》第 07 篇限制返回行数
文章目录 7.1 使用 FETCH 子句实现排行榜 7.2 使用 ROWNUM 实现排行榜 7.3 使用 OFFSET 子句分页查询 7.4 使用 ROWNUM 实现分页查询 Top-N 排行榜是一个 ...
SQL窗口函数-排名窗口函数
关于窗口函数的基础,请看文章SQL窗口函数排名窗口函数可以用于获取数据的分类排名.常见的排名窗口函数如下: ROW_NUMBER函数可以为分区中的每行数据分配一个序列号,序列号从1开始. RANK函 ...

[组件] TopN 排行榜

[组件] TopN 排行榜相关推荐

最新文章

热门文章