ag-grid中文教程

ag-grid单元格焦点相关方法getFocusedCell setFocusedCell

本章将描述ag-grid的单元格相关的方法包含getFocusedCell setFocusedCell clearFocusedCell tabToNextCell tabToPreviousCell

代码例子

//获取当前焦点的单元格
var cell=gridOptions.api.tabToNextCell();
//cell对象为{rowIndex: 0, column: Column, floating: null}

//设置name列的2行获得焦点
gridOptions.api.setFocusedCell(1,'name');

//清除单元格焦点
gridOptions.api.clearFocusedCell();

//设置下一个单元格为当前焦点
gridOptions.api.tabToNextCell();

//设置上一个单元格为当前焦点
gridOptions.api.tabToPreviousCell();

在线试一试

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid 单元格焦点例子</title>
    <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div style="margin-bottom: 10px;">
        <input type="button" value="setFocusedCell" onclick="func2()" />
        <input type="button" value="getFocusedCell" onclick="func1()" />
        <input type="button" value="clearFocusedCell" onclick="func3()" />
        <input type="button" value="tabToNextCell" onclick="func4()" />
        <input type="button" value="tabToPreviousCell" onclick="func5()" />
    </div>
    <div id="itxst" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
        //定义列
        var colData = [
            { headerName: '名称', field: 'name', 'pinned': 'left' },
            { headerName: '剩余', field: 'col2' },
            { headerName: '销量', field: 'col3' },
        ];
        //行数据
        var rowData = [];

        //模拟数据
        for (var i = 1; i < 10; i++) {
            rowData.push({ name: 'YO-' + i, col2: 612 * i, col3: 321 * i });
        }

        //将列和数据赋给gridOptions
        var gridOptions = {
            columnDefs: colData,
            rowData: rowData,
            enableCellChangeFlash: true,
            onGridReady: function () {
                gridOptions.api.sizeColumnsToFit();
            },
            defaultColDef: {
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true,
            }
        };
        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#itxst');
            new agGrid.Grid(eGridDiv, gridOptions);
        });

        function func1() {
          var cell=gridOptions.api.getFocusedCell();
        }

        function func2() {
          var cell=gridOptions.api.setFocusedCell(3,'name',null);
        }
        function func3() {
          var cell=gridOptions.api.clearFocusedCell();
        }
         function func4() {
          var cell=gridOptions.api.tabToNextCell();
        }
         function func5() {
          var cell=gridOptions.api.tabToPreviousCell();
        }
    </script>
</body>
</html>
Catalog
ag-grid中文教程 ag-grid vue ag-grid vue入门教程 umd浏览器版用法 vue全选反选 vue插入数据新增行 常用功能 ag-grid多表头 ag-grid固定列 ag-grid拖动宽度和位置 ag-grid数据刷选器 ag-grid编辑表格 ag-gird设置 ag-grid定义列 ag-grid 定义列宽 ag-grid设置行高列宽 ag-grid设置选择行 ag-grid设置复选框 ag-grid置顶合计行 ag-grid底部合计行 ag-grid行组 ag-grid客户端排序 ag-grid方法 setRowData重设表格行数据 ag-grid增加删除修改行 ag-grid全选反选 sizeColumnsToFit自适应大小 setColumnDefs新增列 setRowData插入新行 setPinnedTopRowData设置置顶行 setPinnedBottomRowData设置底部汇总行 forEachNode遍历行对象 getPinnedTopRowCount置顶行数 getPinnedBottomRow底部合计 getRowNode获取行对象 refreshCells刷新更新数据 ag-grid单元格焦点 ag-grid事件 onRowClicked行点击事件 onCellClicked单击单元格事件 onCellDoubleClicked双击单元格事件 ag-grid全部事件列表