Anchor Cycler / Dropdown 定期导入学校班级数据

Posted 2023-03-05

【中文标题】Anchor Cycler / Dropdown 定期导入学校班级数据

【英文标题】：Anchor Cycler / Dropdown to import school class data periodically

【发布时间】：2013-11-19 16:02:27

【问题描述】：

所以，

我最近一直在研究一些 html/javascript/css，以便为我的学生创建一个在线表格，以查看详细信息、分数和各种信息，但我遇到了难题，不知道该怎么做正在努力。

我将所有这些都发布在一个线程中的原因是因为我认为其中一些可能会发生冲突并导致以前的编辑无法正常工作...

我意识到这里有很多问题，不要指望有人编写整个代码，我只是在寻找一些帮助/代码片段/想法，非常感谢那些有 cmets 的人/descriptions 以便我可以继续学习和改进 :)

---

更新 13/11/2013 @ 02:43 GMT

最新消息：http://jsfiddle.net/pwv7u/

我正在尝试让 Next Class | Previous Class 成为循环按钮，以与下拉菜单的工作方式相同的方式在课堂之间移动。 原来页面底部的滚动条因为宽度改变而消失了... 底部的页脚无法在移动设备上正确显示，并且“向左滚动”和“滚动”按钮根本不会在移动设备上显示。 无法单击向左滚动按钮

刷新页面会将水平滚动位置重置为最左侧（我很确定这与滚动条有关）

关于加载/刷新，我想我将不得不再发一篇文章，因为当前选项几乎就在那里但并不完全，我将在下面举例说明我理想地希望它工作的方式。

main.html 将不包含任何类详细信息：http://pastebin.com/raw.php?i=HwXM67up “选项”（下拉菜单）会以某种方式轮询 json 文件以收集可用类的列表 “选项”（下拉菜单）将包含每个学校班级以及“所有更新”和“所有非更新”的选项 选择单个学校班级只会将该特定学校班级导入页面。 选择不同的个别学校班级将破坏旧学校班级并导入新选择的学校班级。 各个学校班级将定期轮询 json 文件以检查该学校班级数据的更新/更改，并在更改/更新时重新绘制/重新导入。 选择“所有更新”将导入所有学校课程并定期轮询 json 文件以检查任何学校课程的更新/更改（如果可能，仅更新已更改/更新的学校课程）但所有课程都在页面。 选择“所有非更新”将执行与上述相同的操作，但不需要轮询 json 文件来更新。 我可以很容易地将数据分成如下块：http://pastebin.com/raw.php?i=MRpjvJp0（第一个块示例）并给它们正确的标题（将在选项下拉列表中使用的标题），但不确定如何将它们放入 json 格式李>

【问题讨论】：

我认为在容器上放置一个固定宽度并使用overflow-x:scroll 来处理表格中的滚动是明智的

@Danny 它已经在一个容器中并且有一个滚动条，但我正在尝试让一些按钮正常工作，它们现在滚动但太远了（如图所示：i.imgur.com/4YBHXgs.png）

@DennisSylvian 请查看我的更新答案

您是否考虑过使用“分页/页码”而不是在一页中显示整个内容？它会让你的生活更轻松

这个问题似乎离题了，因为就目前而言，没有一个特定问题会引起未来读者的广泛兴趣——它更像是一个调试会话。不过，很高兴你解决了它！

【参考方案1】：

更新 2013 年 11 月 13 日 @ 格林威治标准时间 12:09 仅仅因为你对你的帖子做了一个完整的编辑，我也做了同样的事情！不需要这些数据！但是，我已经回答了您已经提出的很多问题！ 最新：http://jsfiddle.net/sijav/pwv7u/1/

我做的很简单，就用blow code：（缩小了！）

$("#PreviousClass").click(function()if(currentClass>1)currentClass--;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass););
$("#NextClass").click(function()if(currentClass<6)currentClass++;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass););

您还需要将 Next Class 和 Previous class ID 设置为正确的 ID 并删除 href！

您需要从容器类中删除overflow: auto;！然后在向左/向右滚动按钮中将 $("#container") 替换为 $("body")！所以：

#container 
margin: 0 auto;
/*overflow: auto;*/
padding: 80px 0;
width: 100%;

和：

$("a.def").click(function () 
        $('body').animate(
            "scrollLeft": "-=204"
        , 200);
);

$("a.abc").click(function () 
    $("body").animate(
            "scrollLeft": "+=204"
        , 200);
);

因为你只是把它放在了footer1下面！你把它转发它会正确显示，为什么不放一个半透明的黑色背景？ background: rgba(0, 0, 0, 0.58);

在上述更改之后，我没有看到任何问题！

好主意...让我们看看...：

再一次，我已经给了你如何使用 ajax 两次的代码！再一次，你不需要把它们放在 json 格式中！ html 格式将非常适合您想做的事情！只需将它们保存为 class1.html、class2.html、class3.html 等，然后获取正确的 html 并将表格插入容器中而不是当前表格！代码是：

$.ajax(
url: "class1.html", //this can be anything! better to use a variable like "class"+currentClass
dataType: "HTML",
error: function()alert("Error on communicate to server", //what to do on error
success: function(html)$("#container").html(html), //replace the container on success
);

简单吧？你可以把http://fiddle.jshell.net/pwv7u/show/放在url里测试一下看看会发生什么？！

为什么不把这些选项放在一个 html 文件中并像我提到的那样得到它 上面？！ 好吧，我已经在上面告诉你了， $("#container").html(SomeHtmlString) 会将整个容器更改为当前容器 你可以有...（等待它）...setInterval(functionThatIncludeAjaxName,milisecond)（我之前告诉过你） 你可以从他们那里得到所有的数据，然后用'+'加上你想要的，然后$("container").html(TheAppendedHTMLString) 你可以有这样的东西 => http://jsfiddle.net/sijav/WJ8Js/ 有一件事，对于移动视图，您可以使用一些根据body宽度缩放整个网页的api！它在平板电脑和移动设备上非常有用。

祝你好运，如果你不能正确理解我的答案或者只是有新问题，请随时询问。

【讨论】：

那里有一些很棒的答案，请参阅我的原始帖子（在底部）以了解我对您的观点的回复（在 cmets 中构建非常困难）

我为您添加了另一个更新，在你们可爱的人之间回复我只是通过查看您的编辑并与您之前的编辑进行比较来学习很多东西。

我仍在查看每个人的贡献，为我挑选最好的位/工作位，然后我会更新主帖，但我无法让你的 cookie 完全工作。我目前遇到的两个问题是cookie不会在第二天删除/擦除删除，它们会在24小时后删除/擦除（我需要找到一种方法，所以如果cookie的日期不是当天那么它应该删除cookie），当我选择一行时它会添加cookie但再次选择它我无法编辑以删除cookie（除了吃它们之前我从未对cookie做过任何事情）：S跨度>

我已经奖励了你应得的积分，我已经发布了一篇关于我制作的一些新错误的新帖子（我认为都是基于 css 的）。我必须再次感谢您的出色帮助。我学到了很多东西：）谢谢

@DennisSylvian 不客气，谢谢 ;) 很高兴我能帮上忙。

【参考方案2】：

前言

为了涵盖您的所有问题，我尝试在所有答案中包含演示。不幸的是，我只是一个人，我无法为所有答案创建演示。 如果有人觉得他有什么要贡献的，请随时发表评论或编辑。

更新

针对@DennisSylvian 的更新问题，这里是我的更新。

答案

要滚动溢出，最好使用：

$('.table-wrapper')[0].scrollLeft += 50;

DEMO here

如果您想使用 css 以简单的方式定位元素，您可以将父元素定义为 position: relative;，然后给每个元素一个 position: absolute; 以将它们“扔”到每个角落：

.controller-wrapper 位置：相对； .top-left, .top-right, .bottom-left, .bottom-right 位置：绝对； .top-left 顶部：0;左：0； .top-right 顶部：0;右：0； // ...

更新：DEMO here

您可以为滚动功能添加任何偏移量：

var offset = 80; // Or any other calculation
$('html,body').animate(
    scrollTop: aTag.offset().top + offset
, 1);

我不完全确定您的意思是 CSS .class 中的班级或学校班级中的班级，但如果是后者，那么您可以在每个 td 上放置一个 ID，您希望滚动到：

<td id="class1" class="scrollto">Title</td>
<!-- ... -->
<td id="class2" class="scrollto">Title</td>

然后您可以使用以下 id 构建您的列表：

var anchorList = [];

$('.scrollto').each(function()

  anchorList.push( '<option value="'+ this.id +'">'+ this.id +'</option>' );

);

// This is an empty select menu
$('#anchor-list')
  .append( anchorList.join('') )
  .change(function()

    scrollToAnchor( $(this).val() );

  );

这需要对您的 scrollToAnchor 函数稍作更改：

// Put this line
var aTag = $('#' + aid);

// Instead of this one:
var aTag = $("a[id='" + aid + "']");

DEMO here

这有点棘手，因为浏览器渲染引擎不会根据最大单元格的内容计算列值。

您必须使用插件（因为编写此代码的代码远远超出此答案所能涵盖的范围），或者根据列数据的逻辑手动设置宽度，即如果您有一个具有名称的列在其中您可以手动将第一个 td 宽度设置为列表中最长的名称。

更新： @sijav 建议的另一个选项是使用：

table td  white-space: nowrap; 

更新：

您可以使用下拉菜单和$.get() 拉单个页面：

<select id="class-list">
  <option value="1">Class 1</option>
</select>

 

$('#class-list').change(function()
  $.get('/server/data/class',  class: $(this).val() , function(data)
    $('#container').html( data );
  );
);

在上面的示例中，您的服务器端代码将呈现html 并发送准备好插入dom 的表。由于所有表都是动态创建的，因此您必须使用事件冒泡（将事件绑定到未通过 ajax 调用呈现的元素）。

例如，高亮行按钮必须这样写：

 $('#container').on('click', 'tr', function()
   var $this = $(this);

   $this
     .addClass('highlight')
     .siblings('tr')
     .removeClass('highlight');
 );

---

数据不一定必须采用JSON 格式（尽管如果将来您需要对数据执行其他操作，它会更加灵活）。

您可以在服务器代码中将数据输出为HTML 而不是 JSON。

要检查数据是否更新，您可以轮询服务器代码应输出的标志。

// Poll every minute
setTimeout(function()

  // Check for changed content
  $.get('/server/data/changed', function( data )

    // Server indicates content has changed get the content and update
    if ( data.flag )

      $.get('/server/data/get', function( data )
        updateHtml( data );
      );

    

  );
, 1000 * 60);

以上代码是用于更新内容的polling technique 示例。

要“记住”被点击的行，您可以使用localStorage。

有几种方法可以做到这一点，这是其中之一：

 // On page ready
 jQuery(function( $ )

   var rowIndex = localStorage.getItem('rowIndex');

   if ( rowIndex ) 

     $( 'table tr' ).eq( rowIndex ).addClass('highlight');

   

   // Save the row to localstorage based on it's index in the table
   var saveRow = function ( index ) 

     localStorage.setItem( 'rowIndex', index );

   ;

   // Highlight the row and save it
   $( 'table tr' ).click(function()

     var $this = $(this);

     $this
       .addClass('highlight')
       .siblings('tr')
       .removeClass('highlight');

     saveRow( $this.index() );

   );

   // On page exit/reload/change check for highlighted row and "save" it to localstorage
   $(window).on('beforeunload', function()

     saveRow( $('.highlight').index() );

   );

 );

DEMO here

【讨论】：

一些非常好的答案，请参阅我的原始帖子（在底部）以了解我对您的观点的回复（在 cmets 中构建非常困难）

非常感谢您的时间、精力和质量，就像我对其他两个回复的人所做的一样。在一个理想的世界中，如果 *** 能够分割赏金点，我会这样做。您的帖子一点也不相关，您帖子中的某些内容仍然有效，有些甚至一开始就没有效果。最终，其他人对我的需求的回答效果更好。修订系统意味着您的回复对我的帖子原始修订仍然有效。这篇文章中有很多功能和方法会以不同的方式适合人们。很抱歉让你感到如此痛苦:(谢谢

@hitautodestruct 当问题有 250 分的赏金时，您通常会得到多个答案，他们应该“赢得”赏金。这个问题有 3 个不错的答案，所有这些都可能值得赏金。个人宁愿向 OP 投诉，他显然很感谢你的回答，你应该把它带到 meta 并要求引入拆分赏金的能力。

@DennisSylvian 老实说，我并不关心赏金。我的观点是，既然问题已经修改，我的回答就没有相关性了。说有人会看修订版就像说有人会看***条目的修订内容，这意味着它不会发生。如果我的任何解决方案都不起作用，请指出它们，我会纠正它们。好像你回复的评论也被删除了，为什么？

@hitautodestruct 相关性就在那里，我的原始帖子有字符限制，我不得不多次编辑才能真正编辑我的主要帖子，因为您之前的评论必须有人标记您的帖子和版主必须同意它是“不具建设性的、冒犯性的或垃圾邮件”（将鼠标悬停在标志按钮上）

【参考方案3】：

让我们看看（向下滚动更新）

（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/

更新了演示

【讨论】：

请看我更新的原始帖子，我在底部添加了一些 cmets，因为无法在 cmets 中构建回复>_

@DennisSylvian 我已经更新了我的答案（更新的部分在答案的末尾）

我已经为你添加了另一个更新，我必须说虽然你的代码真的令人印象深刻，但我正在学习很多小东西：P

【参考方案4】：

1) 您必须意识到您并没有像在鼠标上滚动那样滚动页面。您实际上是在操纵 margin-left 并且这种行为会导致您给它非常大的值。然后，看起来你已经告诉了。桌子和屏幕末端之间有很大的空间。为了解决这个问题，你必须添加一个 if 语句来检查你是否试图增加 margin-left 太多。

 $("a.def").click(function() 
    $("#gradient-style").each(function()
        var margin =$(this).css("margin-left");

        if(margin > -204)
             $(this).animate("margin-left":"+=204px",200);
        else
             $(this).animate("margin-left":"+=" +(-margin),200);
    );
);

5) 您可以使用内置 JavaScript 功能的 localStorage 变量。您可以简单地定义任何变量并在会话中使用它。示例如下：

 localStorage.numberOfRow =1;
 console.log(localStorage.numberOfRow);     //1

【讨论】：

我已经为第一个选项尝试了您的示例，但我仍然无法让它工作，由于某种原因，当我尝试添加 if 语句检查时它根本不会滚动。至于你对第 5 点的回复，我从来不知道“localStorage”的存在，它看起来非常棒，但我昨天花了几个小时却无处可去。

它适用于您的代码的第一个副本。现在您将其更改为 ScrollLeft，这是一个更好的主意。关于 localStorage，它应该可以在您的网站上运行，但由于浏览器支持可能存在一些问题。您应该尝试阅读参考资料。