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

0

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

Как вы можете видеть, каждый твой день. и мне нужно добавить столько строк, сколько захочу, щелкнув значок "+" для КАЖДОЙ даты. а также можно удалить каждую строку, щелкнув значок "-". Теперь это то, что я сделал, но новое требование - мне нужно добавить полосу прокрутки для КАЖДОГО 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%;
          }
        }
      }

post js для получения дополнительной информации:

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

Изображение 174551 Как вы можете видеть, я могу добавить полосу прокрутки для каждого тела (что круто), но строка rowspan не работает после появления или исчезновения полосы прокрутки. любое обновление, которое мне нужно здесь?

  • 0
    Вы должны добавить весь свой соответствующий код, например, CSS ...
  • 0
    все CSS для этой таблицы просто. они очень распространенный стиль таблицы. ничего особенного......
Показать ещё 4 комментария
Теги:

1 ответ

0

Мы сделали подобное в одном из наших проектов, как показано ниже

    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');
                        }
                    }
                });

Здесь то, что мы делаем, мы фиксируем высоту сетки, если она содержит более трех строк, кроме того, она имеет autoheight. В вашем случае, если вы можете подсчитать количество строк в addRow (& deleteRow (функция, то вы также можете установить высоту/максимальную высоту таблицы). Возможно, вам нужно будет установить overflow-y: auto при фиксации высоты.

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

  • 0
    Спасибо за вашу помощь. прямо сейчас проблема, я думаю, является частью CSS, как вы можете видеть в IMG, я уже сделал это, и я могу добавить полосу прокрутки, но проблема в том, как установить CSS для этой таблицы или Tbody (или Wahtevel). Я попытался установить таблицу tr: display block, например: stackoverflow.com/questions/27675459/… , но у меня ничего не вышло.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню