zoukankan      html  css  js  c++  java
  • 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);
    
    
                    }
                }
            });
    
        }
    
  • 相关阅读:
    再不努力提高效率,小姐姐都被人追走了:K8S一键部署了解一下?
    Spring Cloud和netflix 提供的Eureka等组件之间的版本关系
    启动kafka保错:命令过长语法不正确
    SpringBoot2.0 Config客户端自动刷新时没有/bus/refresh端点
    springcloud config配置采坑 Could not resolve placeholder 'from' in value "${from}报错,巨坑!
    Windows 下安装RabbitMQ服务器及基本配置
    linux 查看日志
    spring 事务原理
    IDEA 配置
    python中给定两个列表,怎么找出他们相同的元素和不同的元素?
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/8528301.html
Copyright © 2011-2022 走看看