使用:

import { AgGridVue } from "ag-grid-vue";
<ag-grid-vue style="width:100%;height:100%;" class="ag-theme-fresh"
:gridOptions="agGrid.gridOptions"
:columnDefs="agGrid.columnDefs"
:rowData="data">
</ag-grid-vue>
 
 
 
 
class:主题
gridOption:表格配置
columnDefs:表格列设置
rowData:表格数据

rowDoubleClicked:双击事件

<ag-grid-vue class="ag-theme-fresh" style="width:100%;height:100%;"
:gridOptions="gridOptions"
:columnDefs="columnDefs"
:rowData="dataList"
:rowDoubleClicked="viewRow">
</ag-grid-vue>
viewRow(row) {
this.$router.push({ path: this.$utils.getPath("/osap/abnormal/view/" + event.data.rowID) });
}


treeData树形结构:

<ag-grid-vue class="ag-theme-fresh" style="width:100%;height:100%;"
:gridOptions="gridOptions"
:columnDefs="columnDefs"
:rowData="dataList"
:treeData="true"
:groupDefaultExpanded="-1"
:getDataPath="getDataPath"
:autoGroupColumnDef="autoGroupColumnDef"
:rowDataChange="autoSizeColumns">
</ag-grid-vue>


gridOptions:{
rowSelection:"single",
enableColResize:true,
suppressMovableColumns:true,
animateRows:true
},
columnDefs:[
{
headerName: "岗位名称",
field: "posName"
},
{
headerName: "备注",
field: "remark"
}
],
autoGroupColumnDef:{
headerName:"部门编码",
cellRendererParams:{
suppressCount:true,
innerRenderer:this.initGroupColumn()
}
}, initGroupColumn() {
function SimpleCellRenderer() {}
SimpleCellRenderer.prototype.init = function(params) {
if(params.data)
this.eGui = params.data.posCode;
else
this.eGui = 'null'
};
SimpleCellRenderer.prototype.getGui = function() {
return this.eGui;
};
return SimpleCellRenderer;
},
getDataPath(data) {
var id = "";
if (this.$utils.isNULL(data.parentFullID)) id = data.rowID;
else id = data.parentFullID.substring(1) + "/" + data.rowID;
id= id.replace('//','/')
// console.log(id)
return id.split("/");
},
autoSizeCloumns() {
var allColumnIds = [];
this.gridOptions.columnApi.getAllColumns().forEach(function(column) {
allColumnIds.push(column.colId);
});
this.gridOptions.columnApi.autoSizeColumns(allColumnIds);
this.$nextTick(() => {
this.gridOptions.columnApi.autoSizeColumns(allColumnIds);
});
},
 
agGrid获得选中一行getSelect:
doGetSelect() {
var selectedRows = this.gridOptions.api.getSelectedRows();
var v = selectedRows[0];
if (!v) {
this.showWarning("没有选择数据");
return null;
}
return v;
},
 

选中一行整行获得焦点:gridOption中配置rowSelection:single,

'single' or 'multiple',单选和多选

多选显示选择框

enableFilter:启用检索

自动宽度:

me.agGrid.gridOptions.api.sizeColumnsToFit();
 
允许改变列宽: gridOption.enableColResize:true

column设置:

columnDefs: [
{
headerName: "类型",  //列名称
field: "typeDescription",  //字段名
width:85        //宽度
rowDrag:true  //启用拖拽改变行位置
},
 
禁止拖拽move column:gridOptions.suppressMovableColumns:true
 

拖拽改变行位置:

columnDefs中第一列 添加rowDrag:true//启用行拖拽

gridOptions.rowDragManaged:true //启用行拖拽托管
gridOptions.animateRows:true  //使用动画
 
显示行序号,添加一个索引列:
columnDefs:[
{
headerName:"序号",
width:50,
valueGetter:params=>params.node.rowIndex+1
},
{
headerName: "模块",
field: "moduleName"
}
],
显示序号,valueGetter:params=>params.node.rowIndex+1,存在bug,假如有检索的话,

在隐藏的情况下,先显示后面的,前面的序号就会重复,正确的做法是:

 
 
允许排序:
gridOptions:{
rowSelection:"single",
enableColResize:true,
enableSorting:true,
animateRows:true
},
 
 
拖动行位置后事件:
<ag-grid-vue style="width:100%;height:100%;" class="ag-theme-fresh"
:gridOptions="agGrid.gridOptions"
:columnDefs="agGrid.columnDefs"
:rowData="data"
:rowDragEnd="onRowDragEnd">
</ag-grid-vue>
 
 
 
遍历ag-grid的行
 
 
 
 
 
 
 

ag-grid的更多相关文章

  1. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  2. 12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  3. JavaScript表格插件库

    DataTables https://datatables.net/ Handsontable https://handsontable.com/ JsGrid http://js-grid.com/ ...

  4. 13 个最佳 JavaScript 数据网格库

    13 个最佳 JavaScript 数据网格库   转自:开源中国 www.oschina.net/translate/best-javascript-data-grid-libraries Java ...

  5. CSS 之Grid网格大致知识梳理1

    CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下: 1.将父容器的display属性值设置为grid 即可将其转换为网格容器: 2.在网格容器中添加列的属 ...

  6. CSS 之Grid 网格知识梳理2

    继上篇的CSS 之Grid下半部分   14.将单元格划分到一个区域,使用grid-template-areas属性: ag: grid-template-areas: "header  h ...

  7. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  8. WPF中Grid实现网格,表格样式通用类

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  9. 在 Windows Phone 中,为 Grid 添加 Tilt 效果

    在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...

  10. wpf 列表、菜单 收起与展开,通过Grid DoubleAnimation或者Expander实现

    菜单收缩有很多种方法具体如何实现还是看个人想法: 第一种通过后台控制收起与展开: 效果图: 代码 : <Grid> <Grid.ColumnDefinitions> <C ...

随机推荐

  1. SHELL $RANDOM产生的随机数范围是0到32767

    1.使用系统的 $RANDOM 变量 fdipzone@ubuntu:~$ echo $RANDOM 17617 fdipzone@ubuntu:~$ echo $RANDOM 17617 $RAND ...

  2. mysql 顺序问题

    unsigned    必须出在 not  null 的前面,如果出现在这个后面就出错呢.

  3. mongodb性能问题及原理分析

    近期忙着把一个项目从MySQL迁移到MongoDB,在导入旧数据的过程中.遇到了些许波折,犯了不少错误,但同一时候也学到了不少知识,遂记录下来. 公司为这个项目专门配备了几台高性能务器,清一色的双路四 ...

  4. wtform 表单示例

    用户注册 from flask import Flask, render_template, request, redirect from wtforms import Form from wtfor ...

  5. linux 文件文件夹操作

    文件夹下查询哪些文件含有abc内容: find .|xargs grep -ri "abc"

  6. idea 全部报错找不到包

    解决报错方法如下:

  7. Android系统中Parcelable和Serializable的区别,自动化实现Parcelable接口的插件

    Parcelable和Serializable的区别 参考地址:http://greenrobot.me/devpost/android-parcelable-serializable/ 由于最终的区 ...

  8. GridView中给DropDownList动态绑定数据,及选择列表值后自动更新数据库

    protected void sgvFile1_RowDataBound(object sender, GridViewRowEventArgs e) { DropDownList ddlAM = ( ...

  9. Storm 集群安装

    http://archive.apache.org/dist/storm/  版本都在这 本人安装的是 其他版本的自行安装吧,估计都差不多 sudo mkdir /export/serverssudo ...

  10. UI中各种手势的使用点击,捏合,清扫,旋转,平移,边缘移动,长按

    #import "RootViewController.h" @interface RootViewController (){    UIImageView *imageView ...