JavaScript Dragscroll不使用HTML表

时间:2018-05-15 19:07:27

标签: javascript html html-table draggable

我正在尝试创建一个带有固定标题和左列的表格,我可以自由滚动。我希望能够使用客户端鼠标拖动滚动方法来实现滚动。每当我尝试实现dragscroll函数时,我都无法让它工作。如何将dragscroll正确地实现到我创建的表中?

HTML:

<div class="dragscroll">
      <script>
        var sysDate = new Date();
        var sysDay = new Date();
        var sysMonth = new Date();
        var dayCount = sysDay.getDay();
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var emps = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
                    "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
        var drawTable = '<table>';
        drawTable += "<thead>";
        drawTable += "<tr>";
        drawTable += "<th></th>";
        for (let i = sysDate.getDate() - 7; i <= sysDate.getDate() + 7; i++) {
          drawTable += "<th>" + weekdays[sysDay.getDay()] + " " + sysMonth.getMonth() + "/" + i + "</th>";
        }
        drawTable += "</tr>";
        drawTable += "</thead>";
        drawTable += "<tbody>";
        for (let i = 0; i < emps.length; i++) {
          drawTable += '<tr>';
          drawTable += "<td>Employee " + emps[i] + "</td>";
          for (let j = sysDate.getDate() - 7; j <= sysDate.getDate() + 7; j++) {
            drawTable += "<td></td>";
          }
          drawTable += '</tr>';
        }
        drawTable += "</tbody>";
        drawTable += "</table>";
        document.write(drawTable);
      </script>
    </div>

Dragscroll JS:https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js

JSFiddle:https://jsfiddle.net/a7esqent/#&togetherjs=wPxuoQcPGr

感谢您的时间!

1 个答案:

答案 0 :(得分:0)

不是在div中放置'class =“dragscroll”',而是将它放在tbody的开头,在那里创建表的主要部分。

pub struct Thunk<T>(ThunkState<T>);

enum ThunkState<T> {
    Forced(T),
    Unforced(Box<Fn() -> T>),
}

impl<T> Thunk<T> {
    pub fn new<F>(f: F) -> Thunk<T>
    where
        F: Fn() -> T + 'static,
    {
        Thunk(ThunkState::Unforced(Box::new(f)))
    }

    pub fn get(&mut self) -> &T {
        let func_result: T;
        match self.0 {
            ThunkState::Forced(ref t) => {
                return &t;
            }
            ThunkState::Unforced(ref f) => {
                func_result = f();
            }
        }
        self.0 = ThunkState::Forced(func_result);
        self.get()
    }
}