ag-grid-vue 中文文档（入门）

ag-grid-vue 官方文档

ag-grid-vue (进阶)

在Vue项目中开始使用ag-Grid

ag-Grid的“ag”部分代表“不可知”。内部ag-Grid引擎在TypeScript中实现，具有零依赖性。 ag-Grid通过包装器组件支持Vue。包装器允许您在应用程序中使用ag-Grid，就像任何其他Vue组件一样 - 您通过属性绑定传递配置并通过事件绑定处理事件。您甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。

在本文中，我们将引导您完成将ag-Grid添加到现有Vue项目的必要步骤，并配置它的一些基本功能。我们将向您展示网格的一些基本原理（传递属性，使用API​​等）。为了更好的视觉效果和代码质量，我们还将使用Sass变量调整网格的视觉外观。

将ag-Grid添加到您的项目中

出于本教程的目的，我们将使用角度CLI来构建Vue应用程序。如果您的项目具有不同的配置，请不要担心。 Ag-Grid及其Vue包装器作为NPM包分发，可以与任何常见的Vue项目模块捆绑器设置一起使用。让我们按照Vue CLI说明操作 - 在终端中运行以下命令：

npm install -g @vue/cli
vue create my-project    # accept the defaults for all prompts
cd my-project
npm run serve

如果一切顺利，npm run serve已经启动了Web服务器。您可以在localhost：8080打开默认应用程序。


下一步，让我们添加ag-Grid NPM软件包。在我的项目中运行以下命令（您可能需要一个新的终端实例）：

npm install --save ag-grid-community ag-grid-vue

经过几秒钟的等待。让我们来实际编码吧！作为第一步，让我们添加ag-Grid ag-Grid样式 - 在src / main.js中导入它们：

import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";

上面的代码导入了网格“结构”样式表（ag-grid.css），以及一个可用的网格主题：（ag-theme-balham.css）。网格有几个不同的主题;选择一个与您的项目设计相匹配的。

在后面的部分中，我们将介绍如何使用SCSS自定义主题外观，这是我们推荐的方法。
这将是一个简单的例子，我们可以删除src / components目录。我们的示例应用程序将存在于src / App.vue中。


我们将组件定义添加到模板中。编辑app / App.vue并替换脚手架代码：

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData">
    </ag-grid-vue>
</template>

接下来，让我们声明基本的网格配置。编辑 src / App.vue：

<script>
    import {AgGridVue} from "ag-grid-vue";

    export default {
        name: 'App',
        data() {
            return {
                columnDefs: null,
                rowData: null
            }
        },
        components: {
            AgGridVue
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            this.rowData = [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ];
        }
    }
</script>

上面的代码提供了网格的两个基本配置属性 - 列定义（columnDefs）和数据（rowData）。在我们的例子中，列定义包含三列;每个列条目指定要在表的主体中显示的标题标签和数据字段。


这是ag-grid组件定义，带有两个属性绑定 - rowData和columnDefs。该组件还接受标准DOM样式和类。我们将类设置为ag-theme-balham，它定义了网格主题。您可能已经注意到，CSS类与我们之前导入的CSS文件的名称相匹配。


如果一切按预期工作，您应该看到一个简单的网格，如截图中的网格：

启用排序和筛选

到现在为止还挺好。但是能够对数据进行排序以帮助我们查看哪辆车最便宜/最贵是不是很好？好吧，在ag-Grid中启用排序实际上非常简单 - 您需要做的就是将enableSorting属性设置为组件。

<ag-grid-vue style="width: 500px; height: 500px;"
             class="ag-theme-balham"
             :columnDefs="columnDefs"
             :rowData="rowData"

             :enableSorting="true">
</ag-grid-vue>

添加属性后，您应该能够通过单击列标题对网格进行排序。单击标题可以通过升序，降序和无排序来切换。


我们的应用程序没有太多行，因此查找数据相当容易。但是很容易想象一个真实世界的应用程序如何拥有数百个（甚至数十万个！）或行，包含许多列。在这样的数据集中，过滤功能的存在是不可避免的。


与排序一样，启用过滤就像设置enableFilter属性一样简单

<ag-grid-vue style="width: 500px; height: 500px;"
             class="ag-theme-balham"
             :columnDefs="columnDefs"
             :rowData="rowData"

             :enableSorting="true"
             :enableFilter="true">
</ag-grid-vue>

设置此属性后，当您将标题悬停时，网格将显示一个小列菜单图标。按下它将显示一个带有过滤UI的弹出窗口，您可以选择过滤器的类型和要过滤的文本。

获取远程数据

模拟静态数据在真实的项目中不不靠谱的，大多数时候，我们需要处理来自后端的的数据。感谢 React，实现这一点实际上非常简单。请注意，实际数据提取是在网格组件之外执行的 - 我们使用的是HTML5提取API。


现在，让我们删除硬编码数据并从远程服务器获取一个。编辑 src / App.vue 并添加以下fetch语句：

beforeMount() {
    this.columnDefs = [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price'}
    ];

    fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(rowData => this.rowData = rowData);
}

远程数据与我们最初的数据相同，因此您不应该注意到对网格的任何实际更改。但是，如果打开开发者工具，您将看到执行其他HTTP请求。

启用选择

就在我们认为完成任务时，经理会出现一系列新要求！事实证明，我们需要允许用户从网格中选择某些行，并将它们标记为系统中的标记。我们将把旗帜切换状态和持久性留给后端团队。在我们这方面，我们应该启用选择，然后获取所选记录并通过API调用将它们传递给远程服务端点。


幸运的是，使用ag-Grid，上述任务非常简单。您可能已经猜到，这只是添加和更改几个属性的问题。

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData"
                 :enableSorting="true"
                 :enableFilter="true"
                 rowSelection="multiple">
    </ag-grid-vue>
</template>

<script>
    import {AgGridVue} from "ag-grid-vue";

    export default {
        name: 'App',
        data() {
            return {
                columnDefs: null,
                rowData: null
            }
        },
        components: {
            AgGridVue
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make', checkboxSelection: true},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            fetch('https://api.myjson.com/bins/15psn9')
                .then(result => result.json())
                .then(rowData => this.rowData = rowData);
        }
    }
</script>

<style>
</style>

接下来，让我们启用多行选择，以便用户可以选择多行：

<ag-grid-vue style="width: 500px; height: 500px;"
             class="ag-theme-balham"
             :columnDefs="columnDefs"
             :rowData="rowData"

             :enableSorting="true"
             :enableFilter="true"
             rowSelection="multiple">
</ag-grid-vue>

我们使用checkboxSelection：true为make列添加了一个复选框，然后启用了rowSelection =“multiple”的多行选择。

Great！现在，第一列包含一个复选框，单击该复选框时，将选择该行。我们唯一需要添加的是一个获取所选数据并将其发送到服务器的按钮。为此，我们将使用ag-Grid API - 我们将在gridReady事件中存储对网格和列API的引用


为了测试这个，我们将添加一个获取所选数据并将其发送到服务器的按钮。让我们继续进行这些更改：

<template>
    <div>
        <button @click="getSelectedRows()">Get Selected Rows</button>

        <ag-grid-vue style="width: 500px; height: 500px;"
                     class="ag-theme-balham"
                     :columnDefs="columnDefs"
                     :rowData="rowData"
                     :enableSorting="true"
                     :enableFilter="true"
                     rowSelection="multiple"

                     :gridReady="onGridReady">
        </ag-grid-vue>
    </div>
</template>

<script>
    import {AgGridVue} from "ag-grid-vue";

    export default {
        name: 'App',
        data() {
            return {
                columnDefs: null,
                rowData: null
            }
        },
        components: {
            AgGridVue
        },
        methods: {
            onGridReady(params) {
                this.gridApi = params.api;
                this.columnApi = params.columnApi;
            },
            getSelectedRows() {
                const selectedNodes = this.gridApi.getSelectedNodes();
                const selectedData = selectedNodes.map( node => node.data );
                const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');
                alert(`Selected nodes: ${selectedDataStringPresentation}`);
            }
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make', checkboxSelection: true},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            fetch('https://api.myjson.com/bins/15psn9')
                .then(result => result.json())
                .then(rowData => this.rowData = rowData);
        }
    }
</script>

<style>
</style>

好吧，我们作弊了。呼叫提醒并不是对我们后端的调用。希望你能原谅我们这条捷径，以保持文章简洁明了。当然，在完成本教程后，您可以使用真实应用程序逻辑。

分组（企业）

Grouping is a feature exclusive to the enterprise version of ag-Grid.

除了过滤和排序之外，分组是用户有效的看到大量数据的另一种有效方式。在我们的例子中，数据并不多。让我们切换到稍大的数据集：

beforeMount() {
    this.columnDefs = [
        {headerName: 'Make', field: 'make', checkboxSelection: true},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price'}
    ];

-    fetch('https://api.myjson.com/bins/15psn9')
-        .then(result => result.json())
-        .then(rowData => this.rowData = rowData);
+    fetch('https://api.myjson.com/bins/ly7d1')
+        .then(result => result.json())
+        .then(rowData => this.rowData = rowData);
}

然后，让我们启用ag-grid的企业功能。安装附加包：

npm install --save ag-grid-enterprise

然后，将导入添加到src / main.js：

import Vue from 'vue'

import "../node_modules/ag-grid/dist/styles/ag-grid.css";
import "../node_modules/ag-grid/dist/styles/ag-theme-balham.css";

+import 'ag-grid-enterprise';

import App from './App'

如果一切正常，您应该在控制台中看到一条消息，警告您缺少企业许可证。除此之外，网格还有一些UI改进 - 自定义上下文菜单和更高级的列菜单弹出窗口 - 随意环顾四周：

现在，让我们启用分组！添加autoGroupColumnDef属性，绑定到它，并使用rowGroupIndex更新columnDefs：

<template>
    <div>
        <button @click="getSelectedRows()">Get Selected Rows</button>
        <ag-grid-vue style="width: 500px; height: 500px;"
                     class="ag-theme-balham"
                     :columnDefs="columnDefs"
                     :rowData="rowData"
                     :enableSorting="true"
                     :enableFilter="true"
                     rowSelection="multiple"

                     :gridReady="onGridReady">
        </ag-grid-vue>
    </div>
</template>

<script>
    import {AgGridVue} from "ag-grid-vue";

    export default {
        name: 'App',
        data() {
            return {
                columnDefs: null,
                rowData: null,
                gridApi: null,
                columnApi: null,
                autoGroupColumnDef: null
            }
        },
        components: {
            AgGridVue
        },
        methods: {
            onGridReady(params) {
                this.gridApi = params.api;
                this.columnApi = params.columnApi;
            },
            getSelectedRows() {
                const selectedNodes = this.gridApi.getSelectedNodes();
                const selectedData = selectedNodes.map(node => node.data);
                const selectedDataStringPresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
                alert(`Selected nodes: ${selectedDataStringPresentation}`);
            }
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make', rowGroupIndex: 0},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            this.autoGroupColumnDef = {
                headerName: 'Model',
                field: 'model',
                cellRenderer: 'agGroupCellRenderer',
                cellRendererParams: {
                    checkbox: true
                }
            };

            fetch('https://api.myjson.com/bins/15psn9')
                .then(result => result.json())
                .then(rowData => this.rowData = rowData);
        }
    }
</script>

<style>
</style>

接着走。网格现在按make对数据进行分组，同时在展开时列出模型字段值。请注意，分组也适用于复选框 - groupSelectsChildren属性添加了一个组级复选框，用于选择/取消选择组中的所有项目。

如果这一步感觉有点难，请不要担心 - 分组功能非常强大，并支持最初可能不需要的复杂交互方案。分组文档部分包含大量真实可运行的示例，可以帮助您了解特定情况。

自定义主题外观

我们要做的最后一件事是通过修改一些主题的Sass变量来改变网格外观。


默认情况下，ag-Grid提供了一组预先构建的主题样式表。如果我们想调整主题的颜色和字体，我们应该在项目中添加一个Sass预处理器，覆盖主题变量值，并引用ag-grid Sass文件而不是预先构建的样式表，以便变量覆盖是应用。


vue cli为我们做了很多工作（vue init webpack my-project），包括为Sass提供支持。让我们切换到使用提供的ag-Grid SCSS文件 - 首先，让我们创建一个新文件：src / styles.scss：

$ag-icons-path: "../node_modules/ag-grid/src/styles/icons/";

@import "~ag-grid/src/styles/ag-grid.scss";
@import "~ag-grid/src/styles/ag-theme-balham.scss";

请注意，我们必须通过设置$ ag-icons-path变量来帮助Sass预处理器。这是Sass的常见问题，因为外部图像路径被认为是相对于主文件。事实上，通过指定图标路径，我们也做了第一个主题覆盖！我们可以通过将变量中的路径更改为包含图标集的目录来更改整个主题图标集。


但是，让我们做一些更简单的事情。我们可以将交替的行背景颜色覆盖为灰蓝色。添加以下行：

$ag-icons-path:"../node_modules/ag-grid/src/styles/icons/";
+$odd-row-background-color:#CFD8DC;

我们现在需要在src / main.js中引用这个新文件：

-import "../node_modules/ag-grid/dist/styles/ag-grid.css";
-import "../node_modules/ag-grid/dist/styles/ag-theme-balham.css";

+import './styles.scss';

如果一切配置正确，网格的第二行将变得稍暗。恭喜！您现在知道现在根据您的意愿改变网格 - 有几十个Sass变量可以让您控制字体系列和大小，边框颜色，标题背景颜色甚至单元格和列中的间距量。完整的Sass变量列表可在主题文档部分中找到。

小结

通过本教程，我们成功完成了许多工作。从三行/列设置的简陋开始，我们现在有一个网格，支持排序，过滤，绑定到远程数据，选择甚至分组！在这样做的同时，我们学习了如何配置网格，如何访问其API对象以及如何更改组件的样式。


不过，这只是表面上的问题。该网格提供了更多功能;使用自定义组件自定义单元格和标题的功能允许几乎无限的可能配置。

下一步

你渴望更多？请访问Vue指南部分，了解有关ag-Grid Vue的更多深入信息。
[ag-grid-vue（进阶）]（https://yuguo.site/2018/10/16/ag-grid-vue-%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%88%E8%BF%9B%E9%98%B6%EF%BC%89/#more）