用HTC做的客户端表格分页和点列头排序

最新推荐文章于 2025-12-18 16:31:11 发布

原创最新推荐文章于 2025-12-18 16:31:11 发布 · 961 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#htc #function #shell #null #input #class

本文介绍了一种使用JS实现的希尔排序算法，并应用于表格数据的分页展示中，通过具体实例代码展示了如何提高分页绘制效率，同时探讨了在大量数据处理时存在的性能瓶颈及可能的优化方向。

排序算法用的希尔。进入页面的时候，会先处理表格，将表格中的所有Row都放在了一个数组里面备用，然后删除表格中的行，只绘制本页面需要的Row。每次分页也是先删除本页的数据，然后只绘制本页面需要的数据。这样提高了分页绘制的效率，但是如果数据量太大，比如1万的时候，页面初始化的时候就不是很爽。呵呵

感觉js的效率太低，1000条数据的排序，用希尔竟然1~2秒的时间。不知道哪位达人有好的方法作。

这两天抽空做一个XML的，效率应该会高些。

-------------------- 以下是HTC文件----------------------

<public:attach event="ondocumentready" onevent="init()" />
<public:property name="BatchSize" />
<public:property name="PageSize" />
<public:property name="OverColor" />
<public:property name="SelectColor" />
<public:property name="DefualtColor" />

var lastclick = -1;
var CurrentBatchIndex=1;
var CurrentPageIndex=1;
var RowsCount=0;
var ColsCount=0;
var pagingCell;
var TmpTable;
var pagingRow;

var clickbakRowIndex = -1;

var Rows;
var Cells;

var CurrentOrderField;
var CurrentOrder;

function ShellSort(arr, orderIndex)
{ //插入排序->希儿排序
    var st = new Date();
    var increment = arr.length;
    do
    {
        increment = (increment/3|0) + 1;
        arr = ShellPass(arr, increment, orderIndex);
    }
    while (increment > 1)

status = (new Date() - st) + ' ms';
return arr;
}

function init()
{
    if(OverColor == null) OverColor = "#E5F1FF";
    if(DefualtColor == null) DefualtColor="#ffffff";
    if(SelectColor == null) SelectColor="#FFEFCE";
    if(PageSize == null)PageSize=5;
    if(BatchSize == null)BatchSize=5;

    element.attachEvent("onmouseover",OverThis);
    element.attachEvent("onmouseout",OutThis);
    element.attachEvent("onclick",ClickThis);

    RowsCount = element.rows.length-1;
    if(RowsCount>0)
        ColsCount = element.rows[0].cells.length;

    ReadTableToArrayList();

    element.rows[0].runtimeStyle.cursor = "hand";
    for(var i=0;i<ColsCount;i++)
    {
        element.cells[i].attachEvent("onclick",SortTable)
    }
    DrawPageRow();
}

function getTR()
{
    var obj = event.srcElement;
    if(obj == element) return null;
    while (obj.tagName != "TR")
    {
     obj = obj.parentElement;
        if(obj == null) return null;
    }
return obj;
}

function onPaging()
{
    var obj = event.srcElement;
    CurrentPageIndex = new Number(obj.innerText)

    ReDrawTable();
    DrawPageRow();
}

function DrawPageRow()
{
    if(element.rows.length > (PageSize+1))
    {
        element.deleteRow(element.rows.length-1);
    }

    var pageNumber = Math.ceil(RowsCount/PageSize);
    pagingRow = element.insertRow();

    pagingCell = pagingRow.insertCell();
    pagingCell.colSpan = element.rows[0].cells.length;
    pagingCell.align = "right";

    var preBatch = document.createElement("span");

    if(CurrentBatchIndex > 1)
    {
        preBatch.innerHTML = "...";
        preBatch.id = 'PreBatch';
        preBatch.attachEvent('onclick',onBatching);
        preBatch.style.cursor = 'hand';
        preBatch.style.textDecoration = 'underline';
    }
    pagingCell.insertAdjacentElement('beforeEnd',preBatch);

    var blank = document.createElement("span");
    blank.innerHTML = "  ";
    pagingCell.insertAdjacentElement('beforeEnd',blank);

    var pageIndex;
    for(var i = 0;i<BatchSize;i++)
    {
        if(((CurrentBatchIndex-1)*BatchSize-(-i)) * PageSize < RowsCount)
        {
            pageIndex = document.createElement("span");

            pageIndex.innerHTML = ((CurrentBatchIndex-1)*BatchSize-(-i)-(-1)).toString();
            if(pageIndex.innerHTML.toString() != CurrentPageIndex.toString())
            {
                pageIndex.style.cursor = 'hand';
                pageIndex.id = 'pageNumber';
                pageIndex.myPageIndex = (CurrentPageIndex-(-i)).toString();
                pageIndex.attachEvent('onclick',onPaging);
                pageIndex.style.textDecoration = 'underline';
            }
            pagingCell.insertAdjacentElement('beforeEnd',pageIndex);

            blank = document.createElement("span");
            blank.innerHTML = "  ";
            pagingCell.insertAdjacentElement('beforeEnd',blank);
        }
    }

    //if(CurrentPageIndex-(-BatchSize) < RowsCount)
    if((CurrentBatchIndex * BatchSize) * PageSize < RowsCount)
    {
        var nextBatch = document.createElement("span");

        nextBatch.innerHTML = "...";
        nextBatch.id = 'NextBatch';
        nextBatch.attachEvent('onclick',onBatching);
        nextBatch.style.textDecoration = 'underline';
        nextBatch.style.cursor = 'hand';
        pagingCell.insertAdjacentElement('beforeEnd',nextBatch);
    }
}

String.prototype.trim = function(){return this.replace(/(^/s*)|(/s*$)/g,'');}
</script>

--------------------测试页面的代码----------------------

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    for (int i = 0; i < 1000; i++)
    {
      System.Random rd = new System.Random(Environment.TickCount * i); ;
      dr = dt.NewRow();
      dr[0] = "ZZZ" + i.ToString();
      dr[1] = "TEST" + i.ToString();
      dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
      dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
      dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
      dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
      dt.Rows.Add(dr);
    }
    System.Data.DataView dv = new System.Data.DataView(dt);
    return dv;
}

protected void Page_Load( object sender, EventArgs e )
{
    if (!IsPostBack)
    {
      GridView1.Attributes.Add("style", "table-layout:fixed");
      GridView1.DataSource = CreateDataSource();
      GridView1.DataBind();
    }
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TestNBTable</title>
<style type="text/css">
.TableA
{
    behavior: url(/Test/AAA.htc);
}
.arrow   {
    FONT-WEIGHT:   normal;   FONT-FAMILY:   Marlett;   LETTER-SPACING:   -3px;   POSITION:   relative;   TOP:   2px
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<input name="Shell1" id="Shell1" type="text" size="100" value="6,g,v,u,f,p,o,i,a,t,j"/>
<input name="Shell2" id="Shell2" type="text" size="100" value="8,g,v,u,f,p,o,i,a,t,j"/>
<input name="Shell3" id="Shell3" type="text" size="100" value="1,g,v,u,f,p,o,i,a,t,j"/>
<input name="Shell4" id="Shell4" type="text" size="100" value="4,g,v,u,f,p,o,i,a,t,j"/>
<input name="Shell5" id="Shell5" type="text" size="100" value="2,g,v,u,f,p,o,i,a,t,j"/>
<input name="Shell6" id="Shell6" type="text" size="100" value="0,g,v,u,f,p,o,i,a,t,j"/>
<table><tr><td class="arrow">5</td></tr></table>
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
              GridLines="Both" CellPadding="4" Width="560" CssClass="TableA">
              <HeaderStyle BackColor="#EDEDED" Height="26px" />
                <SelectedRowStyle BackColor="#FFFFC0" />
            </asp:GridView>
    <table>
      <tr>
        <td>
          <div id="a">
          </div>
          <div style="overflow-y: scroll; height: 100%">

          </div>
        </td>
      </tr>
    </table>
</form>
</body>
</html>