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 ...
随机推荐
- SHELL $RANDOM产生的随机数范围是0到32767
1.使用系统的 $RANDOM 变量 fdipzone@ubuntu:~$ echo $RANDOM 17617 fdipzone@ubuntu:~$ echo $RANDOM 17617 $RAND ...
- mysql 顺序问题
unsigned 必须出在 not null 的前面,如果出现在这个后面就出错呢.
- mongodb性能问题及原理分析
近期忙着把一个项目从MySQL迁移到MongoDB,在导入旧数据的过程中.遇到了些许波折,犯了不少错误,但同一时候也学到了不少知识,遂记录下来. 公司为这个项目专门配备了几台高性能务器,清一色的双路四 ...
- wtform 表单示例
用户注册 from flask import Flask, render_template, request, redirect from wtforms import Form from wtfor ...
- linux 文件文件夹操作
文件夹下查询哪些文件含有abc内容: find .|xargs grep -ri "abc"
- idea 全部报错找不到包
解决报错方法如下:
- Android系统中Parcelable和Serializable的区别,自动化实现Parcelable接口的插件
Parcelable和Serializable的区别 参考地址:http://greenrobot.me/devpost/android-parcelable-serializable/ 由于最终的区 ...
- GridView中给DropDownList动态绑定数据,及选择列表值后自动更新数据库
protected void sgvFile1_RowDataBound(object sender, GridViewRowEventArgs e) { DropDownList ddlAM = ( ...
- Storm 集群安装
http://archive.apache.org/dist/storm/ 版本都在这 本人安装的是 其他版本的自行安装吧,估计都差不多 sudo mkdir /export/serverssudo ...
- UI中各种手势的使用点击,捏合,清扫,旋转,平移,边缘移动,长按
#import "RootViewController.h" @interface RootViewController (){ UIImageView *imageView ...