AngularJs ui-grid学习笔记(二) ——拖动改变列宽

版权声明:本文可转载 ,但转载必须注明出处并附带本文链接 https://blog.csdn.net/qq_27868533/article/details/86573036

ui-grid-auto-resize

使用方法:

  1. router中注入 ui.grid.resizeColumns
  2. grid容器上引用指引 <div ui-grid="gridOptions" ui-grid-resize-columns></div>

API:

  1. 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},
        ]
  1. columnSizeChanged 列宽改变后执行的事件
$scope.gridOptions = {
    onRegisterApi: function( gridApi ) {
       gridApi.colResizable.on.columnSizeChanged($scope,function(colDef, deltaChange) {
              console.log(colDef, deltaChange)
       })
    }
}

猜你喜欢

转载自blog.csdn.net/qq_27868533/article/details/86573036