luckysheet使用——加载后台数据

  • 后台实体类设计

根据luckysheet的API文档,可以看到luckysheet有提供对应的loadurl方法来加载后台数据。另外,也提供了可供luckysheet加载的数据结构,如下:

[	
	//status为1的sheet页,重点是需要提供初始化的数据celldata
	{
		"name": "Cell",
		"index": "sheet_01",
		"order":  0,
		"status": 1,
		"celldata": [{"r":0,"c":0,"v":{"v":1,"m":"1","ct":{"fa":"General","t":"n"}}}]
	}
]	

我们可以通过分析,建立与之对应的实体类:
最外层对应的sheet页对象:

public class SheetOption {
    private String name;   //工作表名称
    private String color;  //颜色
    private int status;     //状态
    private String index;      //索引
    private int hide;       //是否隐藏
    private List<Celldata> celldata = new ArrayList<Celldata>();      //数据

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getIndex() {
        return index;
    }

    public void setIndex(String index) {
        this.index = index;
    }

    public int getHide() {
        return hide;
    }

    public void setHide(int hide) {
        this.hide = hide;
    }

    public List<Celldata> getCelldata() {
        return celldata;
    }

    public void setCelldata(List<Celldata> celldata) {
        this.celldata = celldata;
    }

    @Override
    public String toString() {
        return "SheetOption{" +
                "name='" + name + '\'' +
                ", color='" + color + '\'' +
                ", status=" + status +
                ", index=" + index +
                ", hide=" + hide +
                ", celldata=" + celldata +
                '}';
    }
}

然后是celldata对象:

public class Celldata {
		//r、c是行列值,从(0,0)开始
        private String r;
        private String c;
        private V v = new V();

        public Celldata() {
        }

        public Celldata(String r, String c, String m,String v) {
            this.r = r;
            this.c = c;
            this.v.setM(m);
            this.v.setV(v);

        }

        public String getR() {
            return r;
        }

        public void setR(String r) {
            this.r = r;
        }

        public String getC() {
            return c;
        }

        public void setC(String c) {
            this.c = c;
        }

        public V getV() {
            return v;
        }

        public void setV(V v) {
            this.v = v;
        }
    }

实体类V 是包含了数据及数据格式的类:

public class V {
		
        private String m;
        private String v;
        private String fc;
        private String bg;
        private CT ct = new CT();

        public String getM() {
            return m;
        }

        public void setM(String m) {
            this.m = m;
        }

        public String getV() {
            return v;
        }

        public void setV(String v) {
            this.v = v;
        }

        public CT getCt() {
            return ct;
        }

        public void setCt(CT ct) {
            this.ct = ct;
        }

    public String getFc() {
        return fc;
    }

    public void setFc(String fc) {
        this.fc = fc;
    }

    public String getBg() {
        return bg;
    }

    public void setBg(String bg) {
        this.bg = bg;
    }
}

CT类是表明此单元格的数据类型的:

public class CT {
        private String fa;
        private String t;

        public String getFa() {
            return fa;
        }

        public void setFa(String fa) {
            this.fa = fa;
        }

        public String getT() {
            return t;
        }

        public void setT(String t) {
            this.t = t;
        }
    }
  • 使用
    页面
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
    
    
    前端js
        var options = {
                        container: 'luckysheet', //luckysheet为容器id
                        title: "在线excel", // 设定表格名称
                        lang: 'zh', // 设定表格语言
                        gridKey: "excel001",
                        data: eval(returnValue.result),
                        loadUrl: "/excel/loadurl"
                    }
                    luckysheet.create(options);
    
    后台代码
     @PostMapping("/loadurl")
    @ResponseBody
    public String loadurl(HttpServletRequest request, HttpServletResponse response) {
    
        List<SheetOption> list = new ArrayList<>();
        Map keys = new HashMap();
        SheetOption stop = new SheetOption();
        //设置sheet页名
        stop.setName("options");
        //设置sheet页索引
        stop.setIndex("1");
        stop.setStatus(1);
        stop.setHide(0);
        for (int i = 0; i < 2; i++) {
            for (int j = 0; j < 2; j++) {
                //随机生成点数据
                Celldata celldata = new Celldata(i + "", j + "", i + j + "", new Random().nextInt(500) + "");
                stop.getCelldata().add(celldata);
            }
        }
    
        list.add(stop);
        return JSONArray.toJSONString(list);
    }
    
  • 3
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
在处理大量数据时,确保高性能和不卡顿的关键是优化数据加载和渲染过程。以下是一些可以优化加载百万条数据的技巧: 1. 分页加载:不要一次性将所有数据加载到页面中,而是使用分页加载的方式,每次只加载当前需要展示的数据。这样可以减少页面加载时间和内存占用。 2. 虚拟滚动:使用虚拟滚动技术,只渲染当前可见的部分数据,而不是全部数据。当用户滚动时,动态地加载新的数据和卸载旧的数据。这样可以减少渲染时间和内存占用。 3. 数据压缩和加密:如果可能的话,在加载数据之前,对数据进行压缩和加密处理,以减少数据传输和解析的时间。 4. 使用Web Worker:将数据处理的任务放在Web Worker中进行,避免阻塞主线程。这样可以提高页面响应速度。 5. 延迟加载:延迟加载非必要的数据,只在需要时才加载。例如,在用户搜索或点击相关按钮时才去请求并加载相关数据。 6. 使用索引和缓存:对数据进行索引和缓存,以提高数据访问的效率。使用合适的数据结构和算法来加速搜索和过滤操作。 7. 数据分析和优化:通过分析数据的结构和特性,优化数据处理和渲染的算法和逻辑。例如,使用合适的算法来处理大量数据的排序和过滤操作。 以上是一些可以优化加载百万条数据的方法和技巧。但需要根据具体的场景和使用的技术框架来选择合适的优化策略。 相关问题: 1. 如何实现分页加载数据? 2. 虚拟滚动的原理是什么?如何实现虚拟滚动? 3. 什么是Web Worker?如何在JavaScript使用Web Worker? 4. 如何对大量数据进行索引和缓存? 5. 如何处理大量数据的排序和过滤操作的性能问题?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值