使用JavaScript排序HTML表格问题 [英] problem with JavaScript sortable html table
本文介绍了使用JavaScript排序HTML表格问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是webtoolkit但是......
Here is webtoolkit but ...
var t = new SortableTable(document.getElementById('myTable'), 100);
2的参数
function SortableTable (tableEl) {
和在哪里高度？
下面是我尽量做到工作，但它不工作（仅评论code ++工程，但对于FF和IE只）
Here is my try to make it work but it doesn't works (only commented code works but for ff and ie only)
function ScrollableTable(tableEl, tableHeight, tableWidth)
{
this.tbody = tableEl.getElementsByTagName('tbody');
this.thead = tableEl.getElementsByTagName('thead');
this.tfoot = tableEl.getElementsByTagName('tfoot');
this.getInnerText = function(el) {
if (typeof (el.textContent) != 'undefined') return el.textContent;
if (typeof (el.innerText) != 'undefined') return el.innerText;
if (typeof (el.innerHTML) == 'string') return el.innerHTML.replace(/<[^<>]+>/g, '');
}
this.getParent = function(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
return el;
else
return this.getParent(el.parentNode, pTagName);
}
this.sort = function(cell) {
var column = cell.cellIndex;
var itm = this.getInnerText(this.tbody[0].rows[1].cells[column]);
var sortfn = this.sortCaseInsensitive;
if (itm.match(/\d\d[-]+\d\d[-]+\d\d\d\d/)) sortfn = this.sortDate; // date format mm-dd-yyyy
if (itm.replace(/^\s+|\s+$/g, "").match(/^[\d\.]+$/)) sortfn = this.sortNumeric;
this.sortColumnIndex = column;
var newRows = new Array();
for (j = 0; j < this.tbody[0].rows.length; j++) {
newRows[j] = this.tbody[0].rows[j];
}
newRows.sort(sortfn);
if (cell.getAttribute("sortdir") == 'down') {
newRows.reverse();
cell.setAttribute('sortdir', 'up');
} else {
cell.setAttribute('sortdir', 'down');
}
for (i = 0; i < newRows.length; i++) {
this.tbody[0].appendChild(newRows[i]);
}
}
this.sortCaseInsensitive = function(a, b) {
aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]).toLowerCase();
bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]).toLowerCase();
if (aa == bb) return 0;
if (aa < bb) return -1;
return 1;
}
this.sortDate = function(a, b) {
aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]);
bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]);
date1 = aa.substr(6, 4) + aa.substr(3, 2) + aa.substr(0, 2);
date2 = bb.substr(6, 4) + bb.substr(3, 2) + bb.substr(0, 2);
if (date1 == date2) return 0;
if (date1 < date2) return -1;
return 1;
}
this.sortNumeric = function(a, b) {
aa = parseFloat(thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]));
if (isNaN(aa)) aa = 0;
bb = parseFloat(thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]));
if (isNaN(bb)) bb = 0;
return aa - bb;
}
// define variables
var thisObject = this;
var sortSection = this.thead;
// constructor actions
if (!(this.tbody && this.tbody[0].rows && this.tbody[0].rows.length > 0)) return;
if (sortSection && sortSection[0].rows && sortSection[0].rows.length > 0) {
var sortRow = sortSection[0].rows[0];
} else {
return;
}
for (var i = 0; i < sortRow.cells.length; i++) {
sortRow.cells[i].sTable = this;
sortRow.cells[i].onclick = function() {
this.sTable.sort(this);
return false;
}
}
/*
this.initIEengine = function() {
this.containerEl.style.overflowY = 'auto';
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
this.tableEl.style.width = this.newWidth - this.scrollWidth + 'px';
} else {
this.containerEl.style.overflowY = 'hidden';
this.tableEl.style.width = this.newWidth + 'px';
}
if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x = 0; x < trs.length; x++) {
trs[x].style.position = 'relative';
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
}
}
if (this.tfoot) {
var trs = this.tfoot.getElementsByTagName('tr');
for (x = 0; x < trs.length; x++) {
trs[x].style.position = 'relative';
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
}
}
eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};
this.initFFengine = function() {
this.containerEl.style.overflow = 'hidden';
this.tableEl.style.width = this.newWidth + 'px';
var headHeight = (this.thead) ? this.thead.clientHeight : 0;
var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
var bodyHeight = this.tbody.clientHeight;
var trs = this.tbody.getElementsByTagName('tr');
if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
this.tbody.style.overflow = '-moz-scrollbars-vertical';
for (x = 0; x < trs.length; x++) {
var tds = trs[x].getElementsByTagName('td');
tds[tds.length - 1].style.paddingRight += this.scrollWidth + 'px';
}
} else {
this.tbody.style.overflow = '-moz-scrollbars-none';
}
var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
};
if (!this.tbody) return;
if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();
*/
this.tableEl = tableEl;
this.scrollWidth = 16;
this.originalHeight = this.tableEl.clientHeight;
this.originalWidth = this.tableEl.clientWidth;
this.newHeight = parseInt(tableHeight);
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
this.tableEl.style.height = 'auto';
this.tableEl.removeAttribute('height');
this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
this.containerEl.appendChild(this.tableEl);
this.containerEl.style.height = this.newHeight + 'px';
this.containerEl.style.width = this.newWidth + 'px';
var thead = this.tableEl.getElementsByTagName('thead');
this.thead = (thead[0]) ? thead[0] : null;
var tfoot = this.tableEl.getElementsByTagName('tfoot');
this.tfoot = (tfoot[0]) ? tfoot[0] : null;
var tbody = this.tableEl.getElementsByTagName('tbody');
this.tbody = (tbody[0]) ? tbody[0] : null;
}
麻烦的是我没有THEAD和TBODY这里：
<asp:Panel ID="Panel2" style="width:990px; border-style: outset; border-width: 4px; " runat="server" ScrollBars="Horizontal">
<asp:GridView ID="GridView2" runat="server"
DataSourceID="SqlDataSource1" Width="100%"
ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333"
GridLines="both" ShowFooter="True" onrowdatabound="GridView2_RowDataBound"
HorizontalAlign="Center">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Center"
VerticalAlign="Middle" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center"
VerticalAlign="Middle" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"
HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775"
HorizontalAlign="Center" />
</asp:GridView>
</asp:Panel>
有一些WAIS，使这个脚本适用于GridView的？..
Is there some wais to make this script works for GridView ?..
和香港专业教育学院得到了与垂直滚动条隐藏一个麻烦，如果有水平滚动条（但这是麻烦，如果我用评论code）
and Ive got a trouble with hiding of vertical scrollbar if there is horizontal scroll bar (but that's trouble if I use commented code)
推荐答案
你不能只是有实例化一个新SortableTable新功能？或者你必须重写一切因某种原因？
Couldn't you just have a new function that instantiates a new SortableTable? Or do you have to rewrite everything for some reason?
是这样的：
function ScrollableTable(tableEl, tableHeight, tableWidth)
{
var table = new SortableTable(document.getElementById('myTable'), 100);
do stuff to the table that you whant..like width and height..
}
这篇关于使用JavaScript排序HTML表格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
