ag-grid中文教程
ag-grid vue 插入数据新增行
vue的ag-grid插入数据新增行比传统版简单得多，只需要往数组里插入一行即可实现。
插入数据
<template>
<div class="itxst">
<div @click="add" class="btn">插入数据</div>
<!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
<ag-grid-vue
style="width: 100%; height: 300px;"
class="table ag-theme-balham"
:columnDefs="columnDefs"
:rowData="rowData"
:enableColResize="true"
@gridReady="onGridReady"
rowSelection="multiple"
></ag-grid-vue>
</div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
//注册draggable组件
components: {
AgGridVue
},
data() {
return {
//定义ag-grid列 checkboxSelection 对名称列显示单选框
columnDefs: [
{headerName: '名称', field: 'title', checkboxSelection: true},
{headerName: '网址', field: 'url', width: 100},
{headerName: '分类', field: 'catalog'},
{headerName: 'PR', field: 'pr'}
],
//需要显示的数据
rowData: [
{title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
{title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
{title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
{title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
]
};
},
methods: {
//ag-grid创建完成后执行的事件很重要
onGridReady (params) {
console.log(params);
// 获取gridApi
this.gridApi = params.api;
this.columnApi = params.columnApi;
// 这时就可以通过gridApi调用ag-grid的传统方法了
this.gridApi.sizeColumnsToFit();
},
//插入数据
add(){
this.rowData.push({title: '亚马逊', url: 'www.amazon.com', catalog: '电商',pr:8});
}
}
};
</script>
<style scoped>
.itxst {
margin: 10px;
text-align: left;
}
.btn{
width: 150px;
margin-bottom: 10px;
border: solid 1px #ddd;
padding: 6px;
text-align: center;
border-radius: 6px;
background-color: #eee;
display: inline-block;
cursor: pointer;
}
</style>umd网页版代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ag-grid-vue插入数据例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
<script src="https://www.itxst.com/package/ag-grid-vue/ag-grid-vue.umd.js"></script>
<link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<style>
.btn {
width: 150px;
margin-bottom: 10px;
border: solid 1px #ddd;
padding: 6px;
text-align: center;
border-radius: 6px;
background-color: #eee;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body style="padding:10px;">
<div id="app">
<div @click="add" class="btn">插入数据</div>
<!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
<ag-grid-vue style="width: 100%; height: 200px;"
class="table ag-theme-balham"
:column-defs="columnDefs"
:row-data="rowData"
@grid-ready="onGridReady"></ag-grid-vue>
</div>
<script>
//注册ag-grid-vue组件
Vue.component('ag-grid-vue', window["ag-grid-vue"].AgGridVue);
var app = new Vue({
el: '#app',
data() {
return {
//定义ag-grid列
columnDefs: [
{ headerName: '名称', field: 'title', checkboxSelection: true },
{ headerName: '网址', field: 'url', width: 200 },
{ headerName: '分类', field: 'catalog' },
{ headerName: 'PR', field: 'pr' }
],
//需要显示的数据
rowData: [
{ title: '谷歌', url: 'www.google', catalog: '搜索引擎', pr: 10 },
{ title: '微软', url: 'www.microsoft.com', catalog: '操作系', pr: 10 },
{ title: 'ITXST', url: 'www.itxst.com', catalog: '小站', pr: 1 },
{ title: '淘宝', url: 'www.taobao.com', catalog: '电商', pr: 8 }
]
};
},
methods: {
//ag-grid创建完成后执行的事件
onGridReady(params) {
console.log(params);
// 获取gridApi
this.gridApi = params.api;
this.columnApi = params.columnApi;
// 这时就可以通过gridApi调用ag-grid的传统方法了
this.gridApi.sizeColumnsToFit();
},
//插入数据
add() {
this.rowData.push({ title: '亚马逊', url: 'www.amazon.com', catalog: '电商', pr: 8 });
}
}
});
</script>
</body>
</html>