让我们看看（向下滚动更新）
（demo at http://jsfiddle.net/u7UkS/2/）
-
左右表格滚动条（修复过度滚动？）
您需要为scrollLeft 而不是margin 设置动画。它会自动处理多余的值，因为它不能滚动超过允许的范围..
$("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 设置为th/td 元素
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？记住和恢复选定的行
无需使用 cookie，只需在第 4 步中不要删除整行并重新插入，而是编辑 td 元素的内容。这样tr 将保持其class 并且样式将保持不变。或者，如果它具有 selected 类，则在覆盖行 chack 之前，如果是，则将其添加到您将要插入的行中..
演示地址 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 和代码根据对下拉菜单的选择来显示/隐藏 CLASS
#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/
更新了演示