ag-grid刷选器在线例子浮动显示刷选器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Table入门例子</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 id="myGrid" style="width: 100%;height: 500px;"  class="ag-theme-balham"></div>
  <script>
 //定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'left', filter: 'agTextColumnFilter'
 },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age' , filter: 'agNumberColumnFilter'},
    { headerName: '生日', field: 'sr', filter: 'agNumberColumnFilter' }
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '张三', sex: '男', age: 100, 'sr':1918 },
    { name: '李四', sex: '女', age: 5, 'sr':2000 },
    { name: '王五', sex: '女', age: 20, 'sr':2018 },
    { name: '王五', sex: '女', age: 26, 'sr':2018 },
    { name: '王五', sex: '男', age: 5, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 3, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 3, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 },
    { name: '王五', sex: '男', age: 35, 'sr':2018 }
];

//将列和数据赋给gridOptions 
var gridOptions = {
    floatingFilter: true, /***********这里！！！****************/
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
         //表格创建完成后执行的事件
        gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
    },
    defaultColDef: {
        resizable: true,//是否可以调整列大小，就是拖动改变列大小
        filter: false  //开启刷选
    },
    pagination: true,  //开启分页（前端分页）
    paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
  </script>
</body>
</html>