Question

我正面临着复杂的桌面设计。我需要创建一个可能有多个tbodys的表。就像这样：

正如你所看到的，每个人都是为了约会。我需要通过点击每个日期的“+”图标来添加任意数量的行。并且还可以通过单击“ - ”图标删除每一行。现在这就是我所做的，但新要求是我需要为每个tbody添加滚动条！（不是对于所有表格）如果我创建超过3行，每个日期（tbody）将显示滚动条。正如您所看到的，如果我在2016年8月1日点击“+”图标，滚动将显示在该tbody的右侧（仅在此日期留下其他日子。）我该怎么做。这是我的HTML：

  <table class="table expensetable">
                  <thead>
                    <tr>
                      <th ng-hide="lodging.roomSameForAllDays">Date</th>
                      <th>Expense Type</th>
                      <th>Amount</th>
                      <th>Reimbursement</th>
                      <th ng-hide="lodging.sameDescriptionForAll">Description</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody ng-repeat="day in lodging.roomData" ng-class="{'scroll-bar':getExpenseLength(day)}">
                  <tr ng-repeat-start="expense in day" class="ecom-components" ng-repeat-end>
                    <td ng-show="!lodging.roomSameForAllDays && ($index == 0)"
                      rowspan="{{day.length + 1}}"
                      style="vertical-align: top;">{{indexToDate($parent.$index) | date : companyDateFormat}}</td>
                    <td>
                      <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          <span class="dropdown-label pull-left">{{expense.expenseType.expenseTypeName}}</span>
                          <span class="caret pull-right"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li ng-repeat="exp in roomRateTaxExpenseList | orderBy:'expenseTypeName'"><a href="javascript:void(0)"
                            ng-click="expense.expenseType = exp">{{exp.expenseTypeName}}</a></li>
                          <li></li>
                        </ul>
                      </div>
                    </td>  
                    <td><input type="text" ecom-amount ng-model="expense.amount"></td>
                    <td>
                      <div class="dropdown" style="width:100%">
                        <button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="dropdown-label pull-left">{{RNP_STATUSES[expense.rnp]}}</span>
                          <span class="caret pull-right"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'r'">Yes</a></li>
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'n'">No</a></li>
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'p'">Personal</a></li>
                          <li></li>
                        </ul>
                      </div>
                    </td>
                    <td ng-hide="lodging.sameDescriptionForAll"><input type="text" ng-model="expense.description"></td>
                    <td><span class="whitebutton remove" ng-click="deleteRow('roomData', $parent.$index, $index)"></span></td>
                  </tr>
                  <tr>
                    <td colspan="5"><span class="whitebutton add" ng-click="addRow('roomData', $index)"></span></td>
                  </tr>
                  </tbody>
                </table>

提前致谢。

这是我试过的，它很接近，但仍然没有100％符合要求：

 table.expensetable{
        width:100%;
        thead{
        display:table;
        width:100%;
        }

        tbody {
          max-height:240px;
          display:block;
          tr{
            display:table;
            width:100%;
          }
        }
      }

发布js以获取更多信息：

$scope.getExpenseLength = function(day){
        var isScroll = false;
        if(day.length>3){
            isScroll = true;
        }else{
            isScroll = false;
        }
        return isScroll;
      }

正如你所看到的，我可以为每个tbody添加滚动条（这很酷）但是滚动条出现或消失后，rowspan不起作用。我需要的任何更新？

Answer 1

我们在下面的项目中做了类似的事情

    var abc =  $scope.$watch('grid.gridModel.data.data.items.length', function (newValue, oldValue) {
                    if (newValue > 4) { //grid should show a scrollbar after 3 rows

                        $scope.grid.gridOptions.autoheight = false;
                        if ($scope.grid.stateModel.gridObj) {
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('height', '124px');
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
                        }
                    } else {
                        $scope.grid.gridOptions.autoheight = true;
                        if ($scope.grid.stateModel.gridObj) {
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('height', 'auto');
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
                        }
                    }
                });

我们正在做的是，如果它包含超过3行，我们正在修复网格的高度，否则它是自动高度。在你的情况下，如果你可以计算addRow中的行数（＆amp; deleteRow（函数，那么你也可以设置表的高度/最大高度。你可能需要在修复高度时设置overflow-y：auto。

希望这有帮助。

如何将滚动条添加到具有多个tbodys的动态表

1 个答案: