ag-grid
使用:
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);
});
},
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',单选和多选
多选显示选择框
自动宽度:
column设置:
拖拽改变行位置:
columnDefs中第一列 添加rowDrag:true//启用行拖拽
columnDefs:[
{
headerName:"序号",
width:50,
valueGetter:params=>params.node.rowIndex+1
},
{
headerName: "模块",
field: "moduleName"
}
],
在隐藏的情况下,先显示后面的,前面的序号就会重复,正确的做法是:
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的更多相关文章
- 分享12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
- 12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...
- JavaScript表格插件库
DataTables https://datatables.net/ Handsontable https://handsontable.com/ JsGrid http://js-grid.com/ ...
- 13 个最佳 JavaScript 数据网格库
13 个最佳 JavaScript 数据网格库 转自:开源中国 www.oschina.net/translate/best-javascript-data-grid-libraries Java ...
- CSS 之Grid网格大致知识梳理1
CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下: 1.将父容器的display属性值设置为grid 即可将其转换为网格容器: 2.在网格容器中添加列的属 ...
- CSS 之Grid 网格知识梳理2
继上篇的CSS 之Grid下半部分 14.将单元格划分到一个区域,使用grid-template-areas属性: ag: grid-template-areas: "header h ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- WPF中Grid实现网格,表格样式通用类
/// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...
- 在 Windows Phone 中,为 Grid 添加 Tilt 效果
在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...
- wpf 列表、菜单 收起与展开,通过Grid DoubleAnimation或者Expander实现
菜单收缩有很多种方法具体如何实现还是看个人想法: 第一种通过后台控制收起与展开: 效果图: 代码 : <Grid> <Grid.ColumnDefinitions> <C ...
随机推荐
- E - Leading and Trailing 求n^k得前三位数字以及后三位数字,保证一定至少存在六位。
/** 题目:E - Leading and Trailing 链接:https://vjudge.net/contest/154246#problem/E 题意:求n^k得前三位数字以及后三位数字, ...
- 关于PHP.INI中的错误ERROR报告级别设置
最近在写php的过程中发现php提示php notice:………………的字样,虽然这个只是php的提示内容,并没有什么大的影响,但是出于安全性和美观方面的考虑,小弟还是想把这个东西去掉. 那么,怎么办 ...
- java 提取数据
import java.util.regex.Matcher; import java.util.regex.Pattern; public class TextNested { public sta ...
- Servlet 编写过滤器
Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servlet 过滤 ...
- Mysql中查看每个IP的连接数
) as ip , count(*) from information_schema.processlist group by ip;
- sqoop1.99.3配置过程
感谢:http://www.myexception.cn/database/1600202.html 官网配置指导:http://sqoop.apache.org/docs/1.99.3/Instal ...
- cocos2d-x之读开发技术精解
引擎位置(依次往下): 游戏App->逻辑与规则->引擎->运行的平台->硬件接口(驱动运行库API) 1. 渲染框架 CCNode绘制基类(引擎核心类都继承于它,形成一个链表 ...
- CodeIgniter框架——表单辅助函数总结
首先第一步就是载入辅助函数: $this->load->helper('form'); 函数解析: 1.form_open() 创建一个开始form标签,相对于你的配置文档中的基础URL. ...
- camke GUI工具 选择 vs2017 时,如何指定工具集 v140 而不是默认的 v141?
在参数位置加入 v140 即可,不需要加 -T
- springboot集成h2
h2数据库是常用的开源数据库,与HSQLDB类似,十分适合作为嵌入式数据库使用,其他的数据库大部分都需要安装独立的客户端和服务器端 h2的优势: (1)h2采用纯java编写,因此不受平台的限制 (2 ...