DataGridXL表格是在2020年发布,DataGridXL在设计时就考虑到了性能。提供最快、最简单、最可靠的数据网格。DataGridXL支持所有常用所有的浏览器,为 Web 应用程序提供类似于 Microsoft Excel 的体验,它支持前端框架有Vue、React、Angular等。
功能列表:
- 调整列大小
- 重新排序列
- 重新排序行
- (Un)冻结行
- (un)冻结列
- 搜索单元格
- 多范围选择
- (un)隐藏行
- 隐藏列
- 全屏模式
尚未提供功能:
- 合并单元格
- 数据透视表
- 嵌套行/列标头
- 树结构
- 分页
初始样式如下:
一、官方地址
DataGridXL官网地址:DataGridXL: Excel-like Experience for Web Apps
Vue项目案例文档:DataGridXL: Excel-like Experience for Web Apps
DataGridXL还提供了非常灵活演示功能,不用创建项目也可以配置相应参数,并且提供模拟控制台执行相应功能函数,执行提供的丰富功能函数和数据展示。
API地址:API - DataGridXL: Options‘
二、项目创建与安装
这里以Vue项目为例,使用Vue CLI来构建我们的初始Vue应用程序。这里主要讲DataGridXL 2界面调整,不详细讲解Vue项目创建。创建项目命令如下:
vue create my-vue-project
cd my-vue-project
npm run serve
开始安装DataGridXL 2,命令如下:
npm install @datagridxl/datagridxl2
创建Vue项目文件,并引用DataGridXL 2,代码如下:
<template>
<div class="wrapper-dgxl">
<div ref="dgxl" class="grid"></div>
</div>
</template>
<script>
import DataGridXL from "@datagridxl/datagridxl2";
export default {
name: "DataGrid",
data() {
return {};
},
computed: {
dgxlOptions() {
return {};
},
},
mounted: function () {
const dgxlObj = new DataGridXL(this.$refs.dgxl, this.dgxlOptions);
},
};
</script>
<style>
.grid {
height: 400px;
}
</style>
此时我们会发现,页面默认是这样的,多了头部快速搜索单元格和底部区域,如下图:
三、只保留表格区域
在实际开发在,我们只需要中间表格部分,顶部快速搜索单元格和底部全屏模式区域如何隐藏掉呢?刚开始也很困扰我,在文档并未看到相关讲解,后来通过实例发现可以在配置参数上作调整。
在dgxlOptions中将topBar和bottomBar数组清空即可,代码如下:
export default {
name: "DataGrid",
data() {
return {};
},
computed: {
dgxlOptions() {
return {
//清除顶部区域
topBar: [],
//清除顶部区域
bottomBar: [],
};
},
},
mounted: function () {
const dgxlObj = new DataGridXL(this.$refs.dgxl, this.dgxlOptions);
},
};
</script>
现在只剩下表格部分了,如下图: