Javascript 使div有点像桌子
我的数据以divs的形式显示在页面上,当用户将鼠标悬停在向上/向下按钮上时,主div被设置为自动滚动。以下是我所拥有的一个简单示例:Javascript 使div有点像桌子,javascript,jquery,Javascript,Jquery,我的数据以divs的形式显示在页面上,当用户将鼠标悬停在向上/向下按钮上时,主div被设置为自动滚动。以下是我所拥有的一个简单示例: 现在,如果用户单击其中一个列名(名字、薪水等),我需要添加对div进行升序或降序排序的功能。如何使用jQuery/javascript做到这一点,但保持所有其他功能(即自动滚动和列标题被冻结)通常我建议使用jQuery UI,但它们仍在将datagrid表实现到UI中的过程中 看看这个jQuery插件: 您需要使用某种类型的datagrid插件来实现所需的排序
现在,如果用户单击其中一个列名(名字、薪水等),我需要添加对div进行升序或降序排序的功能。如何使用jQuery/javascript做到这一点,但保持所有其他功能(即自动滚动和列标题被冻结)通常我建议使用jQuery UI,但它们仍在将datagrid表实现到UI中的过程中 看看这个jQuery插件: 您需要使用某种类型的datagrid插件来实现所需的排序类型
至少,访问站点,调查他们是如何进行排序的函数调用的。干杯。我可以推荐您吗?首先,我建议您将HTML布局为更好地表示数据。现在,您有许多按顺序表示单元的div,将它们划分为行的唯一信息是样式。通常,您希望HTML的结构表示数据的结构(尝试在关闭CSS的情况下查看页面!) 我更喜欢的布局方式是使用带有
、
和
的实际HTML表格,因为它是表格数据,然后通过滚动将tbody上的样式设置为特定高度
问题是它在旧浏览器中不起作用。我不知道你对浏览器兼容性的要求是什么
如果你想坚持使用
s,至少在每一行周围加上一个包含div的字符
一旦有了一个结构,其中某个元素的每个子元素表示一行,排序就变得很简单了。您可以获取所有元素,将它们粘贴到一个数组中,对其进行排序,然后将它们重新放入DOM中
如果标题中的所有单元格也在某种容器中(如果可能的话,最好是
中的
),那么您可以计算该容器中单击的子项的索引,然后使用每行中具有相同索引的子级的值对行进行排序。我发现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
})()
谢谢您的回答。我避免使用插件,因为我迟早需要为项目编辑插件,这需要一段时间。我看到有两个表被使用,第二个表周围有一个可滚动的div。我正在这么做。当我让它工作时,我会发布。谢谢,我完全理解,我也是。你完全可以只看一眼插件的JavaScript,然后自己动手,让它为你工作。祝你好运。
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;
}