Ag-grid表格原生javascript的简单使用

ag-grid是支持多种前端框架的企业级表格框架，它能实现的功能也颇多，有兴趣的可以上他的官网api看下ag-Grid官网;我这里简单写一下基础的数据初始化生成表格；1.首先引入js文件；我这里用原生的方式；并没有使用vue之类的框架的方法去写；如果想要用在框架中使用；官方也通过了很多引入的方法；如图：回到话题：新建一个html文件，引入js文件<!DOCTYPE html><html l

webmxj

10157人浏览 · 2017-12-18 11:20:30

webmxj · 2017-12-18 11:20:30 发布

ag-grid是支持多种前端框架的企业级表格框架，它能实现的功能也颇多，有兴趣的可以上他的官网api看下ag-Grid官网;

我这里简单写一下基础的数据初始化生成表格；

1.首先引入js文件；我这里用原生的方式；并没有使用vue之类的框架的方法去写；如果想要用在框架中使用；官方也通过了很多引入的方法；如图：
这里写图片描述

回到话题：
新建一个html文件，引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
</head>
<body>

</body>
</html>

如果想要下载文件可以直接访问地址ag-grid.js；右键另存就可以下载下来了；

成功引入文件后；我们写一个标签并且赋予一个id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
</head>
<body>
    <h1>Simple ag-Grid Example</h1>
    <div id="myGrid" style="height: 115px;width:500px" class="ag-fresh"></div>
</body>
</html>

接着新建一个js文件并引入到HTML文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
    <script src="index.js"></script>
</head>
<body>
<h1>Simple ag-Grid Example</h1>
<div id="myGrid" style="height: 115px;width:500px" class="ag-fresh"></div>
</body>
</html>

引入js文件后，在index.js中如下编写：

/**
 * Created by webmxj on 2017/12/18.
 */
//对应的是表头
var columnDefs=[
    {headerName:'姓名',field:'name'},
    {headerName:'性别',field:'sex'},
    {headerName:'年龄',field:'age'},
];

//与表头对应的表格的数据; key来至于上方定义的field;
var rowData=[
    {name:'张三',sex:'男',age:'100'},
    {name:'李四',sex:'女',age:'5'},
    {name:'王五',sex:'未知',age:'50'},
]

数据格式如上所述；对于ajax请求回来的数据我们只要处理成与rowData一致的格式且与columnDefs表头提供的key值对应即可；

在index.js 继续编写；

//将上面的数据放入一个数组中；
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
};
//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了；
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

这个时候我们打开html文件；你会发现表格已经生成；如图所示：
这里写图片描述

接着我们可以试着调用一下插件默认的一些方法；在gridOptions中这样写：


/**
 * Created by webmxj on 2017/12/18.
 */
//对应的是表头
var columnDefs=[
    {headerName:'姓名',field:'name'},
    {headerName:'性别',field:'sex'},
    {headerName:'年龄',field:'age'},
];

//与表头对应的表格的数据; key来至于上方定义的field;
var rowData=[
    {name:'张三',sex:'男',age:'100'},
    {name:'李四',sex:'女',age:'5'},
    {name:'王五',sex:'未知',age:'50'},
]
//将上面的数据放入一个数组中；
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {//表格创建完成后执行
        gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
    }
};
//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了；
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

这样在表格创建完成后会它会自己去调整行列的宽高,这个时候我们打开html文件我们会发现滚动条已经不见了；
这里写图片描述

基本表格生成就是如此 api我还在看更多的玩法如果感兴趣的人多的话我会继续更新；

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^