Question

我在div中将数据布局到页面中，当用户将鼠标悬停在向上/向下按钮上时，主div设置为自动滚动。这里有一个简单的例子：

http://troycomptonworld.com/sorting

现在，如果用户点击其中一个列名（名字，工资等），我需要添加对div升序或降序进行排序的功能。如何使用jQuery / javascript执行此操作，但保留所有其他功能（即自动滚动和列标题被冻结）

Answer 1

首先，我建议您布置HTML以更好地表示数据。现在，您有许多表示单元格的div，并且将它们划分为行的唯一信息是样式。通常，您希望HTML的结构代表数据的结构（尝试查看关闭CSS的页面！）。

我希望将其列出来的方式是使用包含<thead>，<tfoot>和<tbody>的实际HTML表格，因为是表格数据，然后通过滚动将tbody上的样式设置为特定高度。

这样做的问题在于它在旧版浏览器中不起作用。我不知道您对浏览器兼容性的要求是什么。

如果你要坚持使用<div>，那么至少要在每行周围加一个包含div。

一旦你有一个结构，其中某个元素的每个子元素代表一行，排序是微不足道的。你可以获取所有元素，将它们粘贴在一个数组中，对它进行排序，然后将它们重新插入到DOM中。

如果标题中的所有单元格也在某种容器中（如果可能的话，再次，<th>中最好<tr>}，那么你可以找出孩子的索引单击该容器，然后使用每行中具有相同索引的子项值对行进行排序。

Answer 2

通常我建议使用jQuery UI - 但他们仍然在将数据网格表实现到UI中。

看看这个jQuery插件：

http://datatables.net/

您将要使用某种datagrid插件来处理您正在寻找的排序类型。

至少，请访问该网站，并调查他们如何进行排序功能调用。欢呼声。

Answer 3

我可以推荐tinysort吗？

Answer 4

我发现Datatables和Tinysort有点太沉重了。我完全赞同@SpoonMeiser，因为他已经在考虑中更容易坚持到桌面。这就是为什么我要推荐你的tablesort.js，我不记得是谁写了这个，对不起，我根据自己的需要编辑了这段代码，现在是：

(function(){
    var a_re = /[cdu]\_\d+\_[cdu]/
    function hc(s, c){return (" " + s + " ").indexOf(" " + c + " ") !== -1}
    prepTabs = function (t) {
        var el, th, ts = (t && t.className) ? [t] : document.getElementsByTagName("table")
        for (var e in ts) {
            el = ts[e]
            if (hc(el.className, "sortable")) {
                th = el.tHead
                th.onclick = clicktab
                el.sorted = NaN
            }
        }
    }
    var clicktab = function (e) {
        e = e || window.event
        var obj = e.target || e.srcElement
        while (!obj.tagName.match(/^(th)$/i)) obj = obj.parentNode
        var i = obj.cellIndex, t = obj.parentNode
        while (!t.tagName.match(/^table$/i)) t = t.parentNode
        var cn = obj.className, verse = /d\_\d+\_d/.test(cn), dir = (verse) ? "u" : "d", new_cls = dir + "_1_" + dir
        if (a_re.test(cn)) obj.className = cn.replace(a_re, new_cls)
        else obj.className = new_cls
        var j = 0, tb = t.tBodies[0], rows = tb.rows, l = rows.length, c, v, vi, si, arr
        if (i !== t.sorted) {
            t.sarr = []
            for (j; j < l; j++) {
                c = rows[j].cells[i]
        v = (c) ? (c.innerHTML) : ""
        v = v.match(/txt-edit/mi) && (arr = v.match(/ value="(.+)"/mi)) ? arr[1] : v;
        v = v.match(/select-indot/mi) && (arr = v.match(/selected="selected">(.+)/mi)) ? arr[1] : v;
                vi = Math.round(100 * parseFloat(v)).toString()
        if (!isNaN(vi)) while (vi.length < 10) vi = "0" + vi
                else vi = v
                t.sarr[j] = [vi + (j/1000000000).toFixed(10), rows[j]]
      }
        }
    t.sarr = t.sarr.sort()
        if (verse) t.sarr = t.sarr.reverse()
        t.sorted = i
        for (j = 0; j < l; j++) tb.appendChild(t.sarr[j][1])
    }
    window.onload = prepTabs
})()

JSFIDDLE

更新：

CSS

col {overflow:hidden !important;}
THEAD TD {background:#000;}
.sortable {clear:both;border-collapse:collapse;}
.sortable td, .sortable th {border:1px solid #000;padding:0 9px 0 9px;}
.sortable TBODY TR:hover {background-color:#ffe;}
.sortable .even {background-color:#f0f0f0;}
.sortable .odd {background-color:#fff;}
.sortable thead {cursor:pointer;}

/* arrows */
.c_0_c TH {
background:url(images/c1.gif) no-repeat right center;
background-color:#eee;
}
.c_0_c .d_1_d {
background:url(images/d10.gif) no-repeat right center;
background-color:#eee;
}
.c_0_c .u_1_u {
background:url(images/u10.gif) no-repeat right center;
background-color:#eee;
}

c1.gif

d10.gif

u10.gif

将div排序为表格

4 个答案: