js实现iview表格 排名列
(有误,请勿观看)
一、排名的简单实现
//排名例子1
//需要排名的数组
//var myArray = [5,7, 7, 9, 8, 6, 23];
//新数组
//var thisArray = [];
//将需要排名的数组中元素存入新数组,同时存入原始索引和新索引默认为0
//for (var i = 1; i <= myArray.length; i++) {
// thisArray.push({ myValue: myArray[i - 1], oldIndex: i ,newIndex:0});
//}
//将新数组按照值的大小排序
//thisArray.sort(function (a, b) {
// return b.myValue - a.myValue;
//});
//将排序后顺序存入新索引
//for (var i = 1; i <=thisArray.length; i++) {
// thisArray[i - 1].newIndex = i;
//}
//再根据原始索引排序
//thisArray.sort(function (a, b) {
// return a.oldIndex - b.oldIndex;
//});
//此时获取到的就是排序后的值了,而newIndex就是排名。
//console.log(thisArray);
//如果想单独获取排名可以遍历thisArray.newIndex 存入另一个新的数组
//排名例子2
//var e2 = 20;
//var e3 = 10;
//var e4 = 70;
//var e5 = 20;
//var e6 = 50;
//var arrArray = [];
//for (var i = 2; i <= 6; i++) {
// arrArray.push({ e: window["e" + i], p: i });
//}
//arrArray.sort(function (a, b) {
// return b.e - a.e;
//});
//for (var i = 0; i < arrArray.length; i++) {
// window["p" + arrArray[i].p] = i + 1;
//}
//console.dir(arrArray);
//console.log(p2);
//console.log(p3);
//console.log(p4);
//console.log(p5);
//console.log(p6);
二、实际数据及效果

三 项目中实现排名列的方法
//缺点:循环过多且嵌套循环,日后数据量大幅增加时可能导致浏览器卡慢。
//优点:服务器端消耗性能很低。
//改进思路:如何减少循环次数
function myTableSort(data, yearList, regionNameList, myParam) { var mydata = data.concat();
for (var j = 0; j < yearList.length; j++) {
/****************取值********************/
//参数数据
var paramData = [];
//根据年份、参数获取某年某月参数数据
for (var i = 0; i < mydata.length; i++) {
if (mydata[i].Year == yearList[j]) {
//这里可以存入对象类型存入 参数数据、 Year和RegionName,后两者作为排序后赋值时的判断条件
paramData.push({ myValue: mydata[i][myParam], RegionName: mydata[i].RegionName, Year: mydata[i].Year });
}
}
/**************** 处理********************/
//对某年排名后数据
var thisArray = [];
//存入值和原始索引,新索引默认为0
for (var i = 1; i <= paramData.length; i++) { thisArray.push({ myValue: paramData[i - 1].myValue, RegionName: paramData[i - 1].RegionName, Year: paramData[i - 1].Year, oldIndex: i, newIndex: 0 });
}
//根据值排序,
thisArray.sort(function (a, b) {
return b.myValue - a.myValue;
});
//存入排序后的新索引
for (var i = 1; i <= thisArray.length; i++) {
thisArray[i - 1].newIndex = i;
}
//根据原始索引对数组排序
thisArray.sort(function (a, b) {
return a.oldIndex - b.oldIndex;
});
//此时新索引就是排名
//console.log(thisArray);
/**************** 赋值 ********************/
//将当年排名后数据 赋值到mydata
for (var i = 0; i < mydata.length; i++) {
//如果年份相等
if (mydata[i].Year == yearList[j]) {
//城市名称循环赋值单行
for (var k = 0; k < regionNameList.length; k++) {
//如果参数值相等则赋值排名
if (mydata[i].RegionName == thisArray[k].RegionName && mydata[i].Year == thisArray[k].Year && mydata[i][myParam] == thisArray[k].myValue) {
mydata[i].IndexRank = thisArray[k].newIndex;
// console.log("综合指数:" + mydata[i][myParam], "排名:" + thisArray[k].newIndex);
}
}
}
} } return mydata;
}
四、数据获取和前期处理:
function loadChart() {
$.ajax({
url: '@Url.Action("BasicEvaluationData")',
data: {},
type: "post",
dataType: "json",
success: function (result) {
if (result != undefined && result != null && result.success == true) {
var paramsList = ["UrbanEcologicalIndex", "EcologicalAssetIndex", "EcologicalLandscapeIndex", "EcologicalPressureIndex", "EcologicalConstructionIndex", "EcologicalServiceIndex"];
var regionNameList = [];
var data = [];
var yearList = [];
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows[i];
var rowObj = new Object();
for (var j in row) {
rowObj[j] = row[j];
}
regionNameList.push(rowObj.RegionName);
yearList.push(rowObj.Year);
data.push(rowObj);
}
yearList = Distinct(yearList);
regionNameList = Distinct(regionNameList);
//console.dir(regionNameList);
//console.dir(yearList);
myTable(yearList, regionNameList, data, paramsList);
myEcharts(yearList, regionNameList, data, paramsList);
}
}
});
}
js实现iview表格 排名列的更多相关文章
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- JS实现前台表格排序功能
JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- js导出Excel表格
js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
随机推荐
- 【推荐】介绍两款Windows资源管理器,Q-Dir 与 FreeCommander XE(比TotalCommander更易用的免费资源管理器)
你是否也像我一样,随着硬盘.文件数量的增加,而感到对于文件的管理越来越乏力. 于是我试用了传说中的各种软件,包括各种Explorer外壳,或者第三方资源管理器. 最后我确定下来经常使用,并推荐给您的是 ...
- .net core在vs开发环境下脱离iis运行
.net core相比之前.net的是一个可以跨平台,脱离iis运行的语言,并且项目启动的效率要比用iis启动快,可以说进一步提高了开发的效率.要想自己的项目core脱离iis,首先选择vs启动项目的 ...
- 简单的C# Socket通信实例
一.套接字(socket)概念 套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本 ...
- USACO December 铂金Maxflow
USACO 2015 December Contest, Platinum Problem 1. Max Flow Farmer John has installed a new system of ...
- 转载:TCP/IP四层模型
转载:TCP/IP四层模型 一. TCP/IP参考模型示意图 ISO制定的OSI参考模型的过于庞大.复杂招致了许多批评.与此对照,由技术人员自己开发的TCP/IP协议栈获得了更为广泛的应用. 如图所示 ...
- Vue.js 和 MVVM 的小细节
Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...
- odoo开发笔记 -- 安装Backend debranding去除odoo信息模块后 隐藏开发者模式
Backend debranding 找到如下文件,将相关灰色代码注释掉. <?xml version="1.0" encoding="UTF-8"?&g ...
- Python标准库 -- UUID模块(生成唯一标识)
UUID是什么: UUID: 通用唯一标识符 ( Universally Unique Identifier ),对于所有的UUID它可以保证在空间和时间上的唯一性,也称为GUID,全称为: UUID ...
- linux下利用dd命令测试磁盘读写速度
在Linux中,dd命令用于读取.转换和输出数据,它可从标准输入或文件中读取数据并输出到指定文件或标准输出中.该命令使用参数如下: 其中”=“后面的为设置的参数 If = <文件名> : ...
- 谈谈Linux下的数据流重定向和管道命令
一.标准输入.标准输出.错误输出概述 1.标准输入(stdin)是指令数据的输入,代码为0,使用<或者<<,默认是键盘. 2.标准输出(stdout)是指令执行成功返回的结果,代码为 ...