Question

我使用nggrid作为我的数据表示，其中一个列保存地址，有时是多行和长行。我希望我的行是多行的，大小取决于地址分配的行数。我怎么能有一个可编辑的行。我正在使用nggrid 2.012

"devDependencies": {
    "ng-grid": "~2.0.12"
}

我实施了分页

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    plugins: [new ngGridFlexibleHeightPlugin()],
    columnDefs: [{field:'client_order_id', displayName:'Order Id'}, {field:'customer_name',displayName:'Customer Name'},
        {field:'customer_phone', displayName:'Phone Number'},{field:'address', displayName:'Address'}]
};

以下是我目前的观点

<section data-ng-controller="OrdersController" data-ng-init="find()">
  <div class="page-header">
    <h1>Orders</h1>
  </div>

  <div class="gridStyle" ng-grid="gridOptions"/></div>

</section>

还希望拥有多行地址

Answer 1

另一种常见的方法是在鼠标悬停在单元格上时显示带有整个长文本的工具提示：

columnDefs: [
    {
        field:'address',
        displayName:'Address',
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text title="{{COL_FIELD}}">{{COL_FIELD}}</span></div>'
    }
]

Answer 2

你不能拥有变量rowHeight，因为ngGrid使用固定的rowHeight进行虚拟滚动。

你需要破解ngGrid风格来修复这个

按照这种方式在单元格中创建滚动条以查看整个地址

columnDefs: [
    {
        field:'address',
        displayName:'Address',
    }
]

以您自己的风格覆盖ngGrid样式：

.ngCellText {
    overflow: auto;
    text-overflow: auto;
}

Answer 3

您可以通过设置＆＃39; rowHeight＆＃39;来更改行高。属性。

columnDefs: [{
        field:'address',
        displayName:'Address',
        rowHeight: 60,
        cellClass: 'wrap-text'
    }
]

您可以将其与自定义模板一起使用，以显示之前建议的工具提示。

将它与自定义css类一起使用。

.wrap-text {
    white-space: normal;
}

如何在nggrid中创建多行单元格

3 个答案: