1.使用了硕正套件中和Treelist并列的另一个组件:Freeform(自由表头)组件, 可参考自由表头演示页及相关资料;
2.紧挨着Treelist下方的工具条就是 Freeform 的 Pager(分页器);
3.分页方案必须结合后端开发,本demo的后端是asp.net;




1.下方的Freeform(自由表头)组件中的含有分页器,可查看该Freeform的XML描述文件,其核心就是如下这句:
    <pager id="ID0" ...>
  其它都是背景外观、自定义功能按钮之类的和分页无关的内容,可见分页器的外观设计也很自由.

2.分页显示的关键是 dataURL 的书写格式必须包含 @rows 宏和二选一的 @page、@startRow宏;
  dataURL = "http://www.supcan.cn/DotNet/access.aspx?rows=@rows&startRow=@startRow"
也可以写成:
  dataURL = "http://www.supcan.cn/DotNet/access.aspx?rows=@rows&page=@Page"
  本例通过 SetObjectProp 函数修改分页器的dataURL,当然,你也可以在XML中将dataURL写死.

3.该TreeList采用了第一个演示页的XML描述文件;

4.Treelist和Freeform的js创建语句:
<div style="position:relative;width:90%;height:300px">
 //borderColor 须和下面的Freeform XML描述文件中的边界线色一致
 <script>insertTreeList('AF1', 'borderColor=#377d8d')</script>
</div>
//Treelist 和 Freeform 上下紧挨着
<div style="position:relative;width:90%;height:40px">
 <script>insertFreeForm('AF2', 'Border=none;isUseContextFont=false')</script>
</div>

5.源码分析:
var count=0;
function OnReady(id)
{
 count++;
 if(count != 2) return;   //须保证在AF1、AF2全部创建后,见下面的备注
 AF1.func("Build", "treelist/t1.xml");
 AF2.func("Build", "treelist/pager.xml");
 
 //绑定
 var url = "http://www.supcan.cn/DotNet/access.aspx?sleep=1&startRow=@startRow&rows=@rows";
 var h = AF1.func("GetHandle", "");
 AF2.func("BindPager", h + "\r\n ID0");  //绑定
 //设置分页器的dataURL (将自动加载Treelist数据)
 AF2.func("SetObjectProp", "ID0\r\n dataURL \r\n" +url+ "\r\n mode=asynch");	//让Treelist异步加载数据
}
备注:请注意 count 变量,其作用相当于是计数器,count=2表示插件全部已创建好,这样才能绑定, 因为本例中 Treelist 和 Freeform 处在不同的<Div>中,而浏览器是以多线程方式工作的,写在脚本中靠前的位置的Div未必先完成创建!

6.后端的C#源码,后端的Access数据库文件(access.mdb)您可下载;

7.给程序员的提示:本demo只是分析分页的原理,真正使用时,不要参考本页面,建议参考演示页"30.FreeformBar";