zoukankan      html  css  js  c++  java
  • javascript如何处理很多数据,类似分页切换

    需求:一个用户列表数据,如果对应列表数据大于10个,就每10个保存到二维数组,后面不足10个的依然放在二维数组尾部

    用处:模拟分页,或者局部刷新

    在线DEMO:戳这里

    var obj=[
            {
                "list":[
                    {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                    {a:7},{a:8},{a:9}
                ]
            },
            {
                "list":[
                    {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                    {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                    {a:13},{a:14},{a:15},{a:16},{a:17},
                    {a:18},{a:19},{a:20},{a:21}
                ]
            },
            {
                "list":[
                    {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                    {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                    {a:13},{a:14},{a:15},{a:16},{a:17},
                    {a:18},{a:19},{a:20},{a:21},{a:22},
                    {a:23},{a:24},{a:25},{a:26},{a:27},
                    {a:28},{a:29},{a:30},{a:31}
                ]
            },
            {
                "list":[
                    {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                    {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                    {a:13},{a:14},{a:15},{a:16},{a:17},
                    {a:18},{a:19},{a:20},{a:21},{a:22},
                    {a:23},{a:24},{a:25}
                ]
            },
            {
                "list":[
                    {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                    {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                    {a:13},{a:14},{a:15},{a:16},{a:17},
                    {a:18},{a:19},{a:20},{a:21},{a:22},
                    {a:23},{a:24},{a:25}
                ]
            }
        ];
        //每个list的长度可能为0,无上限 
        //如果对应的list.length>10,就把对应的list每10个放在二维数组内,不足10个放在二维数组的尾部,
        //例如第三个有31个,把第三个list替换为:
        //  [
        //    [{a:1},{a:2}..{a:10}],
        //    [{a:11},{a:12}...{a:20}],
        //    [{a:21}..{30}],[{a:31}]
        //  ]
        //
        //该如何一次性获得所有的二维数组?
        function resetDate(arr,num){
            //1整个数组的长度
            var leng=arr.length;
            for(var i=0;i<leng;i++){
                //2 每个列表
                var innerList=arr[i].list;
                // console.log(arr);
                //3 每个列表的个数,即lenth
                var innerLength=innerList.length;
                //如果大于10个
                if(innerLength!=0&&innerLength>num){
                    //如果大于10个的,二维数组外层数组的长度:max,需要上取整
                    var outerMaxLen=Math.ceil(innerLength/num);
                    // 定义在每个对象上的二维数组外层
                    // arr[i].outer=Array(outerMaxLen);
                    arr[i].outer=[];
                    var sliceNum = 0, resIndex = 0;
                    // console.log(result)
                    while (sliceNum < innerLength) {
                        arr[i].outer[resIndex++] = innerList.slice(sliceNum, sliceNum += num);
                    }
                    // 需要用到arr.slice(start,end);
                    console.log(arr[i].outer);
                }
    
            }
        }
        resetDate(obj,10);
    
    // 法二、,小于10个有点BUG(表示没看懂),来自:巴神
    function adapter(data){
      function _splice(list,i){
        i = i || 1;
        list.push(list.splice(0,10));
        list.length>10 ? _splice(list,++i):list.push(list.splice(0,list.length-i));
      }
      data.forEach(function(v){
        _splice(v.list);
      });
    }
    
    adapter(obj);
    console.log(obj);

     法二的跟新版本:小于10已结正常,过多数据的话未测

    function adapter(data){
      function _splice(list,i){
        i = i || 1;
        list.push(list.splice(0,10));
        list.length>10 ? _splice(list,++i):(i>1 && list.push(list.splice(0,list.length-i)));
      }
      data.forEach(function(v){
        _splice(v.list);
      });
    }
    
    adapter(obj);
    console.log(obj);
  • 相关阅读:
    button theme
    Container详解
    flutter控件之ExpansionPanelList
    flutter屏幕适配
    Flutter 获取控件尺寸和位置
    Dart
    异步async、await和Future的使用技巧
    flutter key
    Flutter 控件之 Routes 和 Navigator. [PopupRoute]
    flutter
  • 原文地址:https://www.cnblogs.com/-walker/p/6879888.html
Copyright © 2011-2022 走看看