JS快速表格封装完成，瞬间展示万条数据，散分。。。。

前段时间提出了一个在JS中快速展示数据的方式思路，原贴见网址：
http://topic.csdn.net/u/20100302/13/dc1c3e79-800f-4f56-94fc-20d844bfede1.html?30977现在已经把它初步封装完成，代码较多，我就不发上来了，示例网址见下：
http://shice.heliohost.org/demotable.htm文件主要由以下几个js构成：
1. Lib.js 这个是我自己写的一个小框架的核心文件，包含AJAX封装、JSON功能封装及其它的核心功能。经过近两年积累，也封装了不少的代码，都是以这个文件为核心。可以实现类似 C语言中的 include 功能和函数入口main()。2. DataBinder.js 实现数据与模板的双向绑定功能，靠它来实现数据展现3. BorderLayout.js 看名字应该猜出来了吧，实现布局功能，靠它来设置表格和滚动条的位置关系4. Scrollbar.js 滚动条，相比上次代码有所改进，可为水平滚动条，也可为垂直滚动条5. QTable.js 表格控件的具体封装，引用2、3、4这三个JS功能因为其中前面4个JS，是我以前所积累下来的东西，直接使用就可以了，所以我就不把所有代码都写在QTable中了。在上一个贴中有人建议我封装成JQuery插件，因为我不用JQuery，所以就不写成JQuery插件了。很多人都会写自己封装的JS代码，包括我也有一套相对完整的东西了，包括树型控件、表格控件、选项卡控件、右键菜单等等，其中Lib.js就是我的这套框架的核心，所有那些东西都依赖于Lib.js以上代码可以在http://shice.heliohost.org/demotable.htm中下载。这是我申请的免费空间

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

发个页面的代码吧，其它的代码太多了，自己去下载吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试</title>
<style type="text/css">
    body,span,p,div,td,th,a,input,textarea,select,li
    {
        font-family:宋体;
        font-size:12px;
    }
    .table
    {
        border-collapse:collapse;
        border-width:1px;
        border-style:solid;
        border-color:#99BBE8;
    }
    .table td,.table th
    {
        border-style:solid;
        border-width:1px;
        border-color:#99BBE8;
    color:#15428B;
    }
    #divDataList
    {
        height:260px;
    }
</style>
    <script src="JsLib/Lib.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        // 使用Lib.js。可以像C一样写JS
        include("QTable.js");

        var dataList = [];
        var mapList = [
            { id: "tdID", field: "id" },    //将在tdID的表格中显示数据的id属性，以下类推
            { id: "spData1", field: "d1" },
            { id: "tdData2", field: "d2" },
            { id: "tdData3", field: "d3" },
            { id: "tdData4", field: "d4" }
        ];

        //创建一个表格控件
        var tbl = new QTable();

        // main,入口函数，页面加载完成后会运行
        // 该函数由window.onload调用
        // 但同时你也可以设置其它的window.onload代码，而不会有冲突，也可以不要main()
        function main() {
            tbl.BindDom("divDataList"); //绑定到模板
            tbl.setMaplist(mapList);  //设置数据映射关系
        }
        function InitData() {
            for (var i = 0; i < 10000; i++) {
                var data = { id: i, d1: "测试数据" + i, d2: "测试数据" + i,
                           d3: "测试数据" + i, d4: "测试数据" + i };
                dataList.push(data);
            }
            alert("数据初始化完成，即将加载数据");
            tbl.BindData(dataList);
        }

        function ViewData(lnk) {
            // 取得“查看”所在的行
            var row = lnk.parentNode.parentNode;
            // 由QTable生成的行，每行的data属性即为其绑定的数据
            var data = row.data;
            // 既然取得了数据，你爱干嘛就干嘛
            alert(data.id);
        }
    </script>
</head>
<body>
<input type="button" onclick="InitData()" value="开始" />
<a href="demo.rar">下载源码</a>


<div id="divDataList">
    
    <table class="table">
        
        <col width="30"/>
        <col/>
        <col/>
        <col/>
        <col/>
        <col width="50"/>

        
        <thead><tr>
            <th>ID</th>
            <th>数据1</th>
            <th>数据2</th>
            <th>数据3</th>
            <th>数据4</th>
            <th>操作</th>
        </tr></thead>

        
        <tbody><tr>
            <td id="tdID"></td>
            
            <td><span id="spData1" style="color:Red"></span></td>
            <td id="tdData2"></td>
            <td id="tdData3"></td>
            <td id="tdData4"></td>
            <td><a href="javascript:;" onclick="ViewData(this);">查看</a></td>
        </tr></tbody>
    </table>
</div>


</body>
</html>
这个错误,是因为编码原因.
因为其中用到了ajax动态加载JS,而ajax默认编码是utf8,所以如果被加载的JS编码为GB2312而且中有中文注释的情况下,就容易出来这种错误.解决办法是:删除所有中文注释,以及把所有出现中文的地方,用英文代替
或者是:把所有JS文件全部转为UTF-8编码
不好意思，免费空间已经挂掉了
代码上传到CSDN了
http://download.csdn.net/source/2269634
我之前也考虑过这种方式，只是这种方式需要跟对应的grid插件结合在一起才能发挥它的作用，比如扩展到jquery的flexigrid，jqgrid中。楼主继续加油！！！！