固定ヘッダー テーブルに関する問題で行き詰まっています。AngularJS と Bootstrap を使用して Web アプリケーションを構築しています。ng-gridIE7に対応していないので使えません。そのため、テーブルの行にng-repeat. アプリケーションはレスポンシブです。したがって、セル/ヘッダーに固定幅を与えることはできません。テーブル ヘッダーを修正する簡単な方法はありますか?
AngularJS を使用して Fixed ヘッダー テーブルにPlunker を配置しました
前もって感謝します。
Kumar の提案を使用して、2 つのテーブルを作成しました。1 つは thead を含み、もう 1 つは thead と tbody の両方を含みます。
<div ng-style="{'margin-right': scrollBarWidth}">
<table>
<thead>
<tr>
<th width="{{tableSizes[0].width}}">Col0</th>
<th width="{{tableSizes[1].width}}">Col1</th>
<th width="{{tableSizes[2].width}}">Col2</th>
</tr>
</thead>
</table>
</div>
<div class="fixedHeadBody">
<table ng-style="{'margin-top': -rowSize.height}">
<thead>
<tr el-size="rowSize">
<th el-size="{{tableSizes[0].width}}">Col0</th>
<th el-size="{{tableSizes[1].width}}">Col1</th>
<th el-size="{{tableSizes[2].width}}">Col2</th>
</tr>
</thead>
<tbody>
<!-- data goes here -->
</tbody>
</table>
</div>
2 番目のヘッダー内に、各列の幅と高さを監視するディレクティブ (以下を参照) を追加しました。これらの列の出力は、最初のスレッドの幅を設定するために使用されます (角度バインディング)。また、同じディレクティブを 2 番目のテーブルの thead tr に追加し、高さの値を使用して 2 番目のテーブルのスクロール可能な thead を非表示にしました。そうすれば、修正された最初のスレッドのみが表示されます。
私が整理しなければならなかったもう1つのことは、スクロールバーでした。スクロール バーはスペースを取り、最初のテーブルと 2 番目のテーブルの間で列の位置がずれます。これを修正するために、スクロールバーの幅 (テーブルを含む div とテーブルの幅の差) に等しいマージン右を上部テーブルに追加しました。スクロールバーの幅はブラウザーによって異なり、最後の機能はどのブラウザーでも機能します。
app.directive('elSize', ['$parse', '$timeout', function ($parse, $timeout) {
return function(scope, elem, attrs) {
var fn = $parse(attrs.elSize);
scope.$watch(function () {
return { width: elem.innerWidth(), height: elem.innerHeight() };
},
function (size) {
fn.assign(scope, size);
}, true);
}
}])
コントローラー内で、以下の関数を使用して scrollBarWidth を設定できます。テーブルがレンダリングされたら、どこからでも $scope.setScrollBarWidth() を呼び出すことができます。
$scope.scrollBarWidth = "5px";
$scope.setScrollBarWidth = function () {
$timeout(function () {
var divWidth = $(".fixedHeadBody").width();
var tableWidth = $(".fixedHeadBody table").width();
var diff = divWidth - tableWidth;
if (diff > 0) $scope.scrollBarWidth = diff + "px";
}, 300);
}
まあ、$watch と jQuery を使った汚い方法でしたか。
テーブルヘッダーを複製して粘着性を持たせるだけです。完璧ではありませんが、目的には役立ちます。
これがフィドルです： http://jsfiddle.net/jchnxu/w1n1fp97/7/
// watch the width of table headers
scope.$watch(function() {
return {
width: $(th).innerWidth(),
height: $(th).innerHeight()
};
}, function(size) {
console.log(size);
$($stickyThs[i]).attr('width', size.width);
}, true);
// also watch the table width
scope.$watch(function() {
return $bodyTable.innerWidth();
}, function(width) {
$headerTable.css('width', width + 'px');
});
優れたag-Gridライブラリを使用できます。
agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php
angular.module('myApp', ['agGrid'])
次に、コントローラーでgridOptions(または他の変数名) を次のように定義します。
var nbCols = 10,
nbLines = 300,
list = [],
cols = [],
columnDefs = [],
i, j;
for (i = 0 ; i < nbCols ; i++) {
var fieldName = 'col' + i;
cols.push(fieldName);
columnDefs.push({
headerName: 'Col' + i,
field: fieldName,
editable: true
});
}
for (i = 0 ; i < nbLines ; i++) {
var elem = {};
for (j = 0 ; j < nbCols ; j++) {
elem[cols[j]] = 'content '+i+'-'+j;
}
list.push(elem);
}
$scope.list = list;
$scope.cols = cols;
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: list,
singleClickEdit: true
};
最後に、HTML で次のようにテーブルを定義します。
<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>
ヘッダー部分はテーブルの外に置いたほうがよいでしょう。次の 2 つのテーブルを使用します。
幸運を！