Как добавить полосы прокрутки в динамическую таблицу с несколькими tbodys

Question

Я столкнулся с сложным дизайном стола. Мне нужно создать таблицу с возможными множественными tbodys. просто так:

Как вы можете видеть, каждый твой день. и мне нужно добавить столько строк, сколько захочу, щелкнув значок «+» для КАЖДОЙ даты. а также можно удалить каждую строку, щелкнув значок «-». Теперь это то, что я сделал, но новое требование - мне нужно добавить полосу прокрутки для КАЖДОГО tbody! (не для всей таблицы), каждая дата (tbody) будет показывать полосу прокрутки, если я создаю более трех строк. как вы можете видеть, если я нажму значок «+» на дату 01/08/2016, свиток появится на правой стороне этого тела (только для этой даты выйдут только одни дни.) Как я могу это сделать. Вот мой 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; 
     } 

Как вам могу видеть, я могу добавить полосу прокрутки к каждому телу (что круто), но 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 (& deleteRow (функция, то вы также можете установить высоту/максимальную высоту таблицы. Возможно, вам нужно будет установить переполнение-y: auto при фиксации высоты.

Надеюсь, это поможет.