見てみましょう（更新のために下にスクロールします）
( http://jsfiddle.net/u7UkS/2/のデモ)
左右のテーブル スクローラー (オーバースクロールを修正しますか?)の代わりに
をアニメーション化する必要があります。許容範囲を超えてスクロールできないため、余分な値は自動的に処理されます。 scrollLeftmargin
$("a.abc").click(function () {
$('#container').animate({
"scrollLeft": "-=204"
}, 200);
});
$("a.def").click(function () {
$("#container").animate({
"scrollLeft": "+=204"
}, 200);
});
アンカーサイクラー/各クラスにジャンプするドロップダウンリスト?
要素をループし、a要素を取得しidを追加できselectます。次に、イベントを処理クラスchangeで選択した位置にアニメーション化しますscrollToAnchor
<select class="class-selector">
<option value="">-select class-</option>
</select>
と
// gather CLASS info
var selector = $('.class-selector').on('change', function(){
var id = this.value;
if (id!==''){
scrollToAnchor(id);
}
});
$('a[id^="CLASS"]').each(function(){
var id = this.id,
option = $('<option>',{
value: this.id,
text:this.id
});
selector.append(option);
});
列の自動サイズ調整? /要素
設定white-space:nowrapするthtd
td, th {
white-space:nowrap;
}
JSON からのクラス セクションの読み込み/更新。
このためのコードが提供されていません。だから私はそれを行う方法を説明します..
繰り返しのAJAXリクエストにはタイムアウトを使用し、その結果を処理したら新しいものを起動します
function handleData(data){
//loop over data and edit the DOM
$.each(data, function(index, item){
// variable item refers to the current CLASS of the iteration
// assuming that the JSON is an array of CLASS groups describing the rows..
//find the DOM section with the current class info and update data..
});
setTimeout(checkData, 30000);
}
function checkData(){
$.getJSON('the-url-to-your-json', handleData);
}
// initiate the first timeout
setTimout(checkData, 30000); // 30000 ms is 30sec.
クッキー？選択した行を記憶して復元
するには Cookie を使用する必要はありません。手順 4 で、行全体を削除して再挿入するのではなく、td要素の内容を編集します。このようにして、trはその状態を維持しclass、スタイリングは持続します。または、クラスがある場合は行を上書きする前に、そのselected場合は挿入しようとしている行に追加します。
http://jsfiddle.net/u7UkS/2/のデモ
scrollToAnchorまた、見出しを説明するために、scrollTop から 80 を編集して削除しました
function scrollToAnchor(aid) {
var aTag = $("a[id='" + aid + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - 80
}, 1);
}
アップデート
質問への更新から、すべてのクラスを常に表示したり、すべてを更新したりする必要はないと仮定します
このcssとコードを使用して、ドロップダウンへの選択に応じてクラスを表示/非表示にすることができます
#container tbody, #container thead {
display:none;
}
#container tbody.current {
display:table-row-group;
}
#container thead.current {
display:table-header-group;
}
と
var classSelector = $('.class-selector');
// gather CLASS info
classSelector.on('change', function () {
var id = this.value;
$('#container').find('thead, tbody').removeClass('current');
if (id !== '') {
//scrollToAnchor(id);
var group = $('#' + id).closest('thead');
group.add(group.next('tbody'))
.addClass('current');
}
// since we changed the current CLASS, initiate a checkdata() so that we can update as soon as possible..
checkData();
}).trigger('change');
これで、AJAX リクエストを実行するときに、サーバーにデータを送信して、返される情報を制限できます。だからcheckData私たちは
function checkData() {
var currentId = classSelector.val();
if (currentId !== ''){
// Start AJAX request
alert('starting ajax request for ' + currentId);
// change /echo/json/ with the url to your json
// delay should be removed, it just for jsfiddle..
jsonRequest = $.getJSON('/echo/json/', {'delay':2,'class' : currentId}, handleData);
}
}
とhandleData
function handleData(data) {
alert('handling data');
//loop over data and edit the DOM
var classBody = $('#container').find('tbody.current');
$.each(data, function (index, item) {
// variable item refers to the current CLASS of the iteration
// assuming that the JSON is an array of CLASS groups describing the rows..
// populate classBody with the JSON data
});
jsonTimeout = setTimeout(checkData, 10000); // change the 10000 to whatever you want.. i set it to 10 seconds to see the repeating..
}
jsonTimeout = setTimeout(..) とに気付くでしょうjsonRequest = $.getJSON(..)。それらを変数に保存して、現在の CLASS を変更したときにそれらを中止して過剰な処理を回避できるようにします。
これは、追加することによって行われます
if (jsonTimeout) clearTimeout(jsonTimeout);
if (jsonRequest) jsonRequest.abort();
ドロップダウンのchangeハンドラーに。
http://jsfiddle.net/u7UkS/4/で更新されたデモ