![]() |
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"; |