[组件] TopN 排行榜
生活随笔
收集整理的這篇文章主要介紹了
[组件] 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：
轉載于:https://www.cnblogs.com/zhujl/archive/2011/12/19/2293741.html
總結
以上是生活随笔為你收集整理的[组件] TopN 排行榜的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NVMe over Fabrics：概念
- 下一篇： JRMP