ag-grid动态生成表头及绑定表数据

ag-grid动态加载表数据

　　优势：灵活度高，代码复用性强

实现步骤：

1.  安装 ag-grid-vue 组件，

　　      在vue项目中，运行如下命令即可安装

　　      npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0

　　　   安装完成后，在 package.json 文件中可以看到如下组件，说明已经安装成功

　　　

 　　　 在后续运行项目过程中，如果提示要安装  enterprise 组件，根据控制台提示的命令安装即可。

　　　　npm install --save ag-grid-enterprise

2. 在vue页面中引入组件　

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css"
import {AgGridVue} from "ag-grid-vue"
import "ag-grid-enterprise"  //关键依赖：引入之后组件才会生效

　其中：ag-grid-enterprise 是非常关键的依赖，一定要导入，aggrid组件才会生效。

3. 在 components 方法中注册 AgGridVue

　　　

4. 搭建aggrid框架

      <!--右侧内容栏（动态表格）-->
      <div class="commendContent" id="ag-gridStyle">
        <ag-grid-vue
                class="table ag-theme-balham"
                v-show="isSee"
                id="myGrid"
                :columnDefs="columnDefs"
                :rowData="rowData"
                :sideBar="sideBar"
                :enableColResize="true"
                row-selection="multiple"
                @selection-changed="onSelectionChanged"
                @gridReady="onGridReady"
                :tooltipShowDelay="tooltipShowDelay"
                :localeText="localeText"
                :height="tableMaxHeight"
        >
        </ag-grid-vue>
      </div>

　　框架搭建完成之后，一定要指定table的高度，否则列表不会展示数据

　　

　　5. 定义aggrid相关变量及完成汉化

      //ag-grid相关
      domLayout:null,  //高度自适应，根据获取到的数据条数自适应高    度，加载速度慢，页面卡顿，不推荐使用
      tooltipShowDelay: [],  //鼠标悬浮在单元格上，显示全名
      gridOptions: {},
      gridApi: {},
      columnApi: [],
      //定义ag-grid列
      columnDefs: [],
      //ag-grid需要显示的数据
      rowData: [],
      //ag-grid列表右侧的过滤器
      sideBar: [],
      //存放多选框选中的数据
      selectRows: [],
      // 当输入sql错误和结果集为0的时候不显示aggrid表格
      isSee: true,
      globalDropDownBox: false, //移入显示下拉框
      globalDropTop: 0,
      globalDropLeft: 0,
      timeOut: setTimeout,
      modelDetailRelation: [], // 存放模型详细关联表
      countData:'',
      selectedData:0,
      //ag-grid汉化
      localeText:{
        // for filter panel
        page: '页',
        more: '更多',
        to: '到',
        /* of: 'daOf', */
        next: '下一页',
        last: '最后',
        first: '第一',
        previous: '以前的',
        loadingOoo: '加载中...',
        // Row:"行",
        // 'Row Groups':"行分组",
        // for set filter
        selectAll: '全部选择',
        searchOoo: '搜索...',
        blanks: '空',
        Column:"列",
        labels:"标签",
        // for number filter and text filter
        filterOoo: '过滤',
        applyFilter: '过滤中...',
        equals: '等于',
        notEqual: '不等于',
        // for number filter
        lessThan: '少于',
        greaterThan: '多于',
        lessThanOrEqual: '小于等于',
        greaterThanOrEqual: '大于等于',
        inRange: '在范围内',
        // for text filter
        contains: '包含',
        notContains: '不包含',
        startsWith: '开始',
        endsWith: '结束',
        // filter conditions
        andCondition: '并且',
        orCondition: '或者',
        // the header of the default group column
        // group: '分组',
        // tool panel
        columns: '列',
        filters: '过滤器',
        rowGroupColumns: '行列组',
        // rowGroupColumnsEmptyMessage: '行列组为空',
        valueColumns: '列值',
        pivotMode: '透视模式',
        // groups: '分组',
        values: '值',
        // pivots: '中心点',
        valueColumnsEmptyMessage: '列值为空',
        // pivotColumnsEmptyMessage: '中心点为空',
        toolPanelButton: '工具按钮',
        // other
        noRowsToShow: '暂时没有要展示的数据',
        // enterprise menu
        pinColumn: '列位置调整',
        valueAggregation: '聚合值',
        autosizeThiscolumn: '自动调整此列大小',
        autosizeAllColumns: '自动调整所有列的大小',
        groupBy: '分组',
        ungroupBy: '取消分组',
        resetColumns: '重置列',
        expandAll: '展开所有',
        collapseAll: '关闭所有',
        toolPanel: '工具',
        export: '导出',
        csvExport: 'CSV 导出',
        excelExport: 'Excel 导出(.xlsx)',
        excelXmlExport: 'Excel 导出(.xml)',
        // enterprise menu pinning
        PinColumn:"固定",
        pinLeft: '居左',
        pinRight: '居右',
        noPin: '默认',
        // enterprise menu aggregation and status bar
        sum: '合计',
        min: '最小值',
        max: '最大值',
        /* none: 'laNone', */
        count: '计数',
        average: '平均值',
        avg : '平均值',
        // standard menu
        copy: '复制',
        copyWithHeaders: '携表头复制',
        ctrlC: 'ctrl-C',
        paste: '粘贴',
        ctrlV: 'ctrl-V'
      },             

6. 开启列表右侧的工具面板

      this.gridOptions = {}
      this.sideBar = true;  //开启右侧面板的关键代码
      this.domLayout = 'autoHeight';  //高度自适应

7. aggrid创建完后之后要执行的事件

    onGridReady(params) {
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 这时就可以通过gridApi调用ag-grid的传统方法了
      this.gridApi.sizeColumnsToFit();
      //默认隐藏右侧栏
      this.gridApi.closeToolPanel();
      this.gridApi.getDisplayedRowCount();

    }

完整的aggrid动态加载实例：

<template>
    <div>
        <el-card class="box-card" style="margin-left: 14px; 100%;float: right;">
            <div>
                <el-button
                        class="buttonStyle"
                        type="primary"
                        plain
                        @click="submitForm()"
                >
                    提交审核
                </el-button>
                <ag-grid-vue
                        class="table ag-theme-balham"
                        v-show="isSee"
                        id="myGrid"
                        :columnDefs="columnDefs"
                        :rowData="rowData"
                        :sideBar="sideBar"
                        :enableColResize="true"
                        row-selection="multiple"
                        :localeText="localeText"
                >
                </ag-grid-vue>
            </div>
            <!--分页组件-->
            <div class="block"
                 style="float: right;margin-right: 15px;margin-top: 10px;">
                <el-pagination
                        @size-change="handleSizeChange($event)"
                        @current-change="handleCurrentChange($event)"
                        :current-page="page.current"
                        :page-sizes="[10, 15, 20]"
                        :page-size="page.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="this.page.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { AgGridVue } from "ag-grid-vue"
import "ag-grid-enterprise"  //关键依赖：引入之后组件才会生效
import {loadContentData} from "@/api/warning/warningdata";

export default {
    name: "show",
    components:{
        AgGridVue,
    },
    data (){
        return{
            gridOptions: {},
            gridApi: {},
            columnApi: [],
            //定义ag-grid列
            columnDefs: [],
            //ag-grid需要显示的数据
            rowData: [],
            //ag-grid列表右侧的过滤器
            sideBar: [],
            //存放多选框选中的数据
            selectRows: [],
            // 当输入sql错误和结果集为0的时候不显示aggrid表格
            isSee: true,
            //ag-grid汉化
            localeText:{
                // for filter panel
                page: '页',
                more: '更多',
                to: '到',
                /* of: 'daOf', */
                next: '下一页',
                last: '最后',
                first: '第一',
                previous: '以前的',
                loadingOoo: '加载中...',
                // Row:"行",
                // 'Row Groups':"行分组",
                // for set filter
                selectAll: '全部选择',
                searchOoo: '搜索...',
                blanks: '空',
                Column:"列",
                labels:"标签",
                // for number filter and text filter
                filterOoo: '过滤',
                applyFilter: '过滤中...',
                equals: '等于',
                notEqual: '不等于',
                // for number filter
                lessThan: '少于',
                greaterThan: '多于',
                lessThanOrEqual: '小于等于',
                greaterThanOrEqual: '大于等于',
                inRange: '在范围内',
                // for text filter
                contains: '包含',
                notContains: '不包含',
                startsWith: '开始',
                endsWith: '结束',
                // filter conditions
                andCondition: '并且',
                orCondition: '或者',
                // the header of the default group column
                // group: '分组',
                // tool panel
                columns: '列',
                filters: '过滤器',
                rowGroupColumns: '行列组',
                // rowGroupColumnsEmptyMessage: '行列组为空',
                valueColumns: '列值',
                pivotMode: '透视模式',
                // groups: '分组',
                values: '值',
                // pivots: '中心点',
                valueColumnsEmptyMessage: '列值为空',
                // pivotColumnsEmptyMessage: '中心点为空',
                toolPanelButton: '工具按钮',
                // other
                noRowsToShow: '没有可以展示的数据',
                // enterprise menu
                pinColumn: '列位置调整',
                valueAggregation: '聚合值',
                autosizeThiscolumn: '自动调整此列大小',
                autosizeAllColumns: '自动调整所有列的大小',
                groupBy: '分组',
                ungroupBy: '取消分组',
                resetColumns: '重置列',
                expandAll: '展开所有',
                collapseAll: '关闭所有',
                toolPanel: '工具',
                export: '导出',
                csvExport: 'CSV 导出',
                excelExport: 'Excel 导出(.xlsx)',
                excelXmlExport: 'Excel 导出(.xml)',
                // enterprise menu pinning
                PinColumn:"固定",
                pinLeft: '居左',
                pinRight: '居右',
                noPin: '默认',
                // enterprise menu aggregation and status bar
                sum: '合计',
                min: '最小值',
                max: '最大值',
                /* none: 'laNone', */
                count: '计数',
                average: '平均值',
                avg : '平均值',
                // standard menu
                copy: '复制',
                copyWithHeaders: '携表头复制',
                ctrlC: 'ctrl-C',
                paste: '粘贴',
                ctrlV: 'ctrl-V'
            },
            //分页相关（参数）
            page: {current: 1, size: 10, total: 0, records: []},
            pageQueryTree: {
                condition: {},
                pageNo: 1,
                pageSize:10,
                sortBy: 'asc',
                sortName: 'create_time',
                modelParamName: '',
            },
            beforeTableName: ''
        };
    },
    methods:{
        //获取预警表数据，将返回的数据放在ag-grid-vue 组件上
        getData(tableName){
            this.pageQueryTree.condition.单位名称 = tableName;
            this.pageQueryTree.condition.统一社会信用代码 = '';
            loadContentData(this.pageQueryTree).then(resp =>{
                var jsonStr = JSON.stringify(resp.data);
                var items = resp.data.columnData
                this.columnDefs = []  //表头
                for(let i in items){
                    //过滤掉pk主键
                    if ("PK主键" !== items[i].columnName){
                        if (1 == i){
                            var obj ={
                                headerName: items[i].columnName,
                                field: items[i].columnName,
                                filter: true,
                                //flex: 1,    该字段会影响列的宽度
                                editable: true,
                                checkboxSelection: true
                            };
                            this.columnDefs.push(obj);
                        }else {
                            var obj ={
                                headerName: items[i].columnName,
                                field: items[i].columnName,
                                filter: true,
                                //flex: 1,    该字段会影响列的宽度
                                editable: true,
                            };
                            this.columnDefs.push(obj);
                        }
                    }
                };
                //获取表数据
                this.rowData = []
                for (var i = 0; i < resp.data.specifyData.records.length;i++){
                    //alert("返回数据的长度是："+resp.data.specifyData.records.length)
                    var items = resp.data.specifyData.records[i];
                    if (items.状态 === 0) {
                        items.状态 = '待挂号'
                    } else if (items.状态 === 1) {
                        items.状态 = '挂号中'
                    } else if (items.状态 === 2) {
                        items.状态 = '预警待查'
                    } else { // 3
                        items.状态 = '已销号'
                    }
                    this.rowData.push(items);
                }
                //分页的总条数
                this.page.total = resp.data.specifyData.total;
            })
            this.gridOptions = {}
            this.sideBar = true;   //这是ag-grid列表右侧的筛选器，不能删除
        },
        //获取所选节点的列表
        submitForm(){

        }
    },
    mounted() {
        this.gridApi = this.gridOptions.api;
        this.columnApi = this.gridOptions.columnApi;
    }
}
</script>

<style scoped>
    .table {
         600px;
        height: 520px;
    }
    #myGrid {
        flex: 1 1 0px;
         100%;
    }
    .buttonStyle {
        background: #559ed4;
         70px;
        height: 24px;
        padding: 4px;
        border-radius: 4px;
        position: relative;
        color: #ffffff;
        font-style: normal;
        font-family: "iconfont" !important;
        font-weight: normal !important;
        margin-right: 6px;
        margin-left: 970px;
        margin-bottom: 2px;
    }
</style>