Я столкнулся с сложным дизайном стола. Мне нужно создать таблицу с возможными множественными 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%;
}
}
}
post js для получения дополнительной информации:
$scope.getExpenseLength = function(day){
var isScroll = false;
if(day.length>3){
isScroll = true;
}else{
isScroll = false;
}
return isScroll;
}
Как вы можете видеть, я могу добавить полосу прокрутки для каждого тела (что круто), но строка rowspan не работает после появления или исчезновения полосы прокрутки. любое обновление, которое мне нужно здесь?
Мы сделали подобное в одном из наших проектов, как показано ниже
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 при фиксации высоты.
Надеюсь это поможет.