版权声明:本文可转载 ,但转载必须注明出处并附带本文链接 https://blog.csdn.net/qq_27868533/article/details/86573036
ui-grid-auto-resize
使用方法:
- router中注入
ui.grid.resizeColumns
- grid容器上引用指引
<div ui-grid="gridOptions" ui-grid-resize-columns></div>
API:
-
ColumnDef
在gridOptions.columnDefs中定义 resizeColumns的特性
例如:
$scope.gridOptions = {
enableColumnResizing: true, // 自由调整宽度开关
columnDefs: [
{fileId: "id", displayName: "ID", name: "id", width: "20%", minWidth: 50}, // width 初始化宽度 maxWidth 最大宽度 minWidth 最小宽度
{fileId: "description", displayName: "描述", name: "description", minWidth: 50},
{fileId: "action", displayName: "操作", name: "action", width: "10%", minWidth: 50, enableColumnResizing: false}, // 单独设置enableColumnResizing此项不能改变宽度
{fileId: "add_time", displayName: "添加时间", name: "add_time", width: "10%", minWidth: 80},
]
- columnSizeChanged 列宽改变后执行的事件
$scope.gridOptions = {
onRegisterApi: function( gridApi ) {
gridApi.colResizable.on.columnSizeChanged($scope,function(colDef, deltaChange) {
console.log(colDef, deltaChange)
})
}
}