<div id="content_views" class="htmledit_views">
<p id="main-toc"><strong>目录</strong></p>
一 定义列
表格的列有如下常用属性。
| 名称 | 说明 |
| headerName | 显示的列名称，和数据没有关系显示给用户看的 |
| field | 字段，headerName对于的数据字段，如上面代码“姓名”列对应的数据字段是name |
| pinned | 列固定（冻结列）的位置，，支持left right,把列固定在左边或者右边 |
| valueFormatter | 自定义过滤函数,比如数据库status字段存储了0或1数字，想前端网页把 0 显示为正常 1显示为删除，即可使用该属性 function nameFormatter(item) { if(item.value==0) return "正常"; if(item.value==1) return "删除"; return "itxst"; } |
| filter | 过滤器刷选器，定义了过滤器后用户就可以在列头部的输入框对数据进行刷选查找 默认提供了以下几种过滤器 agNumberColumnFilter 数字过滤器 agTextColumnFilter 文本过滤器 agDateColumnFilter 日期过滤器 |
| width, minWidth, maxWidth | width, minWidth, maxWidth设置任意一个属性来控制列的宽度 |
| hide | true隐藏 false显示 |
| sort | 前端排序方式 asc 顺序 desc倒序 |
| sortable | 设置true 用户点击列的表头可以进行排序。 |
| resizable | true可以拖动改变列的大小，false不允许用户拖动改变列大小 |
二 选择行（复选框）
选择行是使用复选框来进行选择。
首先，设置列表复选框，在表头设置代码中添加如下属性便可以进行设置：
-
checkboxSelection:
true,
/
/设置数据复选框
-
headerCheckboxSelection:
true 表头是否也显示复选框，用于全选反选用
然后，设置复选框是用于多选还是单选，如果是mutiple则是多选，若是single则是单选。
rowSelection: 'multiple', //设置多行选中 ，若是single
设置多行选中时，还可以控制多行选中的方式：
rowMultiSelectWithClick:true, //单击就选中，如果为false需要按ctrl再点击才能选中多行
但是控制多选方式自己测试并未实现，还有待解决。
选中数据后，可以根据以下方式获取选中的数据，并转化为Json格式的数据。
-
var rows
=gridOptions.api.getSelectedRows();
/
/获取选中的数据
-
var JsonData
= JSON.stringify(rows));
/
/将数据转化为Json格式
三设置行高列宽
1.设置行高：在gridOptions 中设置rowHeight 即可。默认为25px。
动态设置行高：
-
/
/动态设置行高 重新设置为
100px
-
function setHeight()
-
{
-
ag.gridOptions.rowHeight
=
100;
-
ag.gridOptions.api.resetRowHeights();
-
}
2.设置列宽：在gridOptions 中设置width即可。
四 置顶合计行
可以通过pinnedTopRowData把一行或者多行数据置顶在表格的顶部，注意这些行不能选中、排序、刷选和分组。效果如下：
实现方式：设置置顶行数据data，然后在gridOptions中设置属性pinnedTopRowData，并把置顶行数据赋值给它,并可以用getRowStyle给置顶行数据设置样式。具体代码如下：
-
-
/
/置顶行数据
-
var pinnedTopRowData
= [
-
{ name:
'置顶行1', sex:
'0', age:
'15',
'jg':
'中国',
'sf':
'顶部1',
'dz':
'杭州市文一西路' },
-
{ name:
'置顶行2', sex:
'1', age:
'15',
'jg':
'中国',
'sf':
'顶部2',
'dz':
'杭州市文一西路' }
-
];
-
-
/
/将列和数据赋给gridOptions
-
var gridOptions
= {
-
columnDefs: columnDefs,
-
rowData:
data,
-
onGridReady:
function () {
-
-
gridOptions.api.sizeColumnsToFit();
-
},
-
defaultColDef: {
-
editable:
true,
-
enableRowGroup:
true,
-
enablePivot:
true,
-
enableValue:
true,
-
sortable:
true,
-
resizable:
true,
-
filter:
true
-
},
-
pagination:
true,
-
paginationAutoPageSize:
true,
-
rowSelection:
'multiple',
-
rowMultiSelectWithClick:
true,
-
rowDeselection:
true,
-
pinnedTopRowData: pinnedTopRowData,
/
/设置置顶行数据
-
getRowStyle:
function (params) {
/
/给置顶行数据设置样式
-
if (params.node.rowPinned) {
-
return {
'font-weight':
'bold',
'color':
'red' };
-
}
-
},
-
-
};
上面的合计行数据是测试定义的死数据，实际上合计行需要对某些列的数据进行合计计算，这就需要遍历怎个列表的列，将同一列的值都加起来，就可以算作是合计行。
五 底部合计行
设置方式与设置置顶行一样，只不过使用的属性不同，置底合计行用的是：pinnedBottomRowData属性，getRowStyle方法同样可以渲染其属性。
六 行组
行组，即对行进行分组，只有企业版才有的功能。
效果图如下：
要实现上面的效果，只需要在定义列的时候，在需要合并的列（比如上面的姓名）上加上属性： rowGroup:true即可。然后加上 hide:true属性隐藏本列。如果不隐藏本列，效果如下，看起来不太美观。
整个界面代码如下：
-
<!doctype html>
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
<title>设置属性
</title>
-
<script type="text/javascript" src="../js/ag-grid-enterprise.min.js">
</script>
-
-
</head>
-
-
<body>
-
<input type="button" value="获取选中行" onclick="getSelect()" />
-
<div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine">
</div>
-
-
<script>
-
//定义表格列
-
var columnDefs = [
-
{
-
headerName:
'姓名',
-
field:
'name',
-
'pinned':
'left',
-
filter:
'agTextColumnFilter',
-
rowGroup:
true,
-
-
// checkboxSelection: true, //设置数据复选框
-
// headerCheckboxSelection: true //列头设置复选框
-
},
-
{
-
headerName:
'性别',
-
field:
'sex',
-
type:
"nonEditableColumn",
-
valueFormatter: sexFormatter
-
},
-
{
-
headerName:
'年龄',
-
field:
'age',
-
filter:
'agNumberColumnFilter'
-
},
-
{
-
headerName:
'籍贯',
-
field:
'jg'
-
},
-
{
-
headerName:
'省份',
-
field:
'sf'
-
},
-
{
-
headerName:
'地址',
-
field:
'dz'
-
},
-
];
-
-
//将0转化为男，把1转化为女
-
function
sexFormatter(
item) {
-
if (item.
value ==
0)
return
"男";
-
if (item.
value ==
1)
return
"女";
-
return
"";
-
}
-
-
var data = [
-
{
name:
'张三',
sex:
'0',
age:
'100',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路1号' },
-
{
name:
'李四',
sex:
'1',
age:
'5',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'1',
age:
'20',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路31号' },
-
{
name:
'王五',
sex:
'1',
age:
'26',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路111号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'1',
age:
'20',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路31号' },
-
{
name:
'王五',
sex:
'1',
age:
'26',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路111号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' },
-
{
name:
'王五',
sex:
'0',
age:
'35',
'jg':
'中国',
'sf':
'浙江',
'dz':
'杭州市古墩路12号' }
-
];
-
-
//置顶行数据
-
var pinnedTopRowData = [
-
{
name:
'置顶行1',
sex:
'0',
age:
'15',
'jg':
'中国',
'sf':
'顶部1',
'dz':
'杭州市文一西路' },
-
{
name:
'置顶行2',
sex:
'1',
age:
'15',
'jg':
'中国',
'sf':
'顶部2',
'dz':
'杭州市文一西路' }
-
];
-
-
//置底部数据
-
var pinnedBottomRowData = [
-
{
name:
'置底行1',
sex:
'0',
age:
'15',
'jg':
'中国',
'sf':
'顶部1',
'dz':
'杭州市文一西路' },
-
{
name:
'置底行2',
sex:
'1',
age:
'15',
'jg':
'中国',
'sf':
'顶部2',
'dz':
'杭州市文一西路' }
-
];
-
-
//将列和数据赋给gridOptions
-
var gridOptions = {
-
columnDefs: columnDefs,
//设置列名
-
rowData: data,
//设置数据
-
defaultColDef: {
-
editable:
true,
//单元表格是否可编辑
-
enableRowGroup:
true,
-
enablePivot:
true,
-
enableValue:
true,
-
sortable:
true,
//开启排序
-
resizable:
true,
//是否可以调整列大小，就是拖动改变列大小
-
filter:
true
//开启刷选
-
},
-
pagination:
true,
//开启分页（前端分页）
-
paginationAutoPageSize:
true,
//根据网页高度自动分页（前端分页）
-
rowSelection:
'multiple',
//设置多行选中 ，若是single
-
rowMultiSelectWithClick:
true,
-
rowDeselection:
true,
-
// pinnedTopRowData:pinnedTopRowData, //设置置顶合计行数据
-
// pinnedBottomRowData: pinnedBottomRowData ,//设置置底合计行
-
getRowStyle:
function (
params) {
//给置顶（置底）行数据设置样式
-
if (params.
node.
rowPinned) {
-
return {
'font-weight':
'bold',
'color':
'red' };
-
}
-
},
-
onGridReady:
function (
) {
-
//表格创建完成后执行的事件
-
gridOptions.
api.
sizeColumnsToFit();
//调整表格大小自适应
-
}
-
};
-
-
//在dom加载完成后 初始化agGrid完成
-
document.
addEventListener(
"DOMContentLoaded",
function (
) {
-
var eGridDiv =
document.
querySelector(
'#myGrid');
//myGrid 是容器div的ID
-
new agGrid.
Grid(eGridDiv, gridOptions);
-
});
-
//获取选中的数据
-
function
getSelect(
) {
-
var rows = gridOptions.
api.
getSelectedRows();
-
alert(
JSON.
stringify(rows));
-
}
-
</script>
-
</body>
-
-
</html>
七 客户端排序
表格有自动排序的功能，点击列头就可自动排序。
注：
此篇文章学习资源来自 ag-grid中文教程网 ag-grid ，在此表示非常感谢。
扫一扫
2217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
