使用:

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. E - Leading and Trailing 求n^k得前三位数字以及后三位数字,保证一定至少存在六位。

    /** 题目:E - Leading and Trailing 链接:https://vjudge.net/contest/154246#problem/E 题意:求n^k得前三位数字以及后三位数字, ...

  2. 关于PHP.INI中的错误ERROR报告级别设置

    最近在写php的过程中发现php提示php notice:………………的字样,虽然这个只是php的提示内容,并没有什么大的影响,但是出于安全性和美观方面的考虑,小弟还是想把这个东西去掉. 那么,怎么办 ...

  3. java 提取数据

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class TextNested { public sta ...

  4. Servlet 编写过滤器

    Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servlet 过滤 ...

  5. Mysql中查看每个IP的连接数

    ) as ip , count(*) from information_schema.processlist group by ip;

  6. sqoop1.99.3配置过程

    感谢:http://www.myexception.cn/database/1600202.html 官网配置指导:http://sqoop.apache.org/docs/1.99.3/Instal ...

  7. cocos2d-x之读开发技术精解

    引擎位置(依次往下): 游戏App->逻辑与规则->引擎->运行的平台->硬件接口(驱动运行库API) 1. 渲染框架 CCNode绘制基类(引擎核心类都继承于它,形成一个链表 ...

  8. CodeIgniter框架——表单辅助函数总结

    首先第一步就是载入辅助函数: $this->load->helper('form'); 函数解析: 1.form_open() 创建一个开始form标签,相对于你的配置文档中的基础URL. ...

  9. camke GUI工具 选择 vs2017 时,如何指定工具集 v140 而不是默认的 v141?

    在参数位置加入 v140 即可,不需要加 -T

  10. springboot集成h2

    h2数据库是常用的开源数据库,与HSQLDB类似,十分适合作为嵌入式数据库使用,其他的数据库大部分都需要安装独立的客户端和服务器端 h2的优势: (1)h2采用纯java编写,因此不受平台的限制 (2 ...