幻想天堂

YUI - treeView 通过JSON结构的数据构建数据表格

今天先讲下YUI的数据表格中,从服务端获取数据和根据服务端数据排序的方法.官方示例的地址:http://developer.yahoo.com/yui/treeview/
首先是必备的js,css文件的引入,可以从以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?treeview#configure

JSON数据格式

[

'Label 0',

{type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},

{type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[

'Label 1-0'

]},

{type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'},

{type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'},

{type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[

'Label 3-0',

'Label 3-1'

]}

]

当然,实际情况是你不一定返回一模一样的格式,但可以根据自己的结构来生成这样的格式!
下面是项目中用到的一个用来获取这种格式的方法(注:我的方法属于比较笨的方法,用的是递归循环)

YAHOO.uunav.getCatalogTree = function(root){
            var str;
            $.ajax({
                url:"${contextPath}/ajax/catalog!initTree.act",  //从服务器获取数据
                dataType:"json",
                async :false,
                success:function(data){
                    if(typeof(data.records)!="undefined" ){
                        str=createNodes(data.records,"menu");  //一个递归的函数,用于生成符合YUI树标准的JSON对象
                    }
                }
            });
            return eval(str); //其实刚刚的STR那只是个字符串,最后通过eval方法可以转成对象.
        }

数据准备好了,下一步就是构建树了

//构建树结构
        YAHOO.uunav.buildTree=function(treeContent){
            var treeNodes = YAHOO.uunav.getCatalogTree(0);
            var tree=new YAHOO.widget.TreeView(treeContent,treeNodes);

            tree.render();
            return tree;
        }

上面的只是个方法,需要在页面load的时候加载,YUI有它自己的load事件,但我更喜欢JQUERY的,写法比较简单,呵呵

$(document).ready(function(){

var tree = YAHOO.uunav.buildTree("catalogTree");

});

如果你的树只是想做菜单,连接之用,到这里就可以了,但如果希望能够在响应单击事件的时候做出点其他动作,那还需要给tree注册事件

tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});

合起来应该是下面这个样子

$(document).ready(function(){
            var tree = YAHOO.uunav.buildTree("catalogTree");

            //添加结点单击事件
            tree.subscribe('clickEvent',function(oArgs) {
                treeNodeClick(oArgs.node.data.id);
            });
        });

对参数做下解释:
oArgs.node.data:表示的是这个结点带的数据,而这些数据就是在生成树的JSON对象里面的,事实上,默认的最简单的树结点并没有oArgs.node.data.id这个数据,这个数据是在生成树结点JSON对象时加进去的,见如下代码:

同样可以通过oArgs.node.data.label访问结点名字,不过也可以直接通过oArgs.node.label直接访问label,至于什么原因,看了API就知道了

看上去貌似还是有些复杂,大家只当是个参考吧!

posted @ 2009-02-19 12:55 菜板阅读(2796) | 评论 (0) | 编辑收藏

YUI-dataTable 服务端分页及动态排序

摘要: 今天先讲下YUI的数据表格中,从服务端获取数据和根据服务端数据排序的方法.官方示例的地址:http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html 首先是必备的js,css文件的引入,可以从以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?datat... 阅读全文

posted @ 2009-02-07 21:25 菜板阅读(2941) | 评论 (2) | 编辑收藏

JS分页,存下,免得再去项目找

JS分页函数:

1 //pageSize必需,totalRecords:必需,startIndex必需,contenter必需
2         function pageNavBar(config){
3             //alert("pagesize:"+config.pageSize+"  total:"+config.totalRecords+"  unknowsss:"+config.startIndex);
4             var lastPage=0;
5             var startIndex=0;
6             var thisPage=1;
7             var template={firstPageLabel:"<<",previousPageLabel:"<",nextPageLabel:">",lastPageLabel:">>"};
8             var pfx=typeof(config.pfx)!="undefined"?config.pfx:"";
9             var param=typeof(config.param)!="undefined"?"&"+config.param:"";
10
11             if(typeof(config.template)!="undefined"){
12                 template=config.template;
13             }
14             var totalPage=parseInt((config.totalRecords-1)/config.pageSize)+1;
15             totalPage=totalPage<1?1:totalPage;
16
17             var navStr="";
18
19             navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex=0"+param+"' >"+template.firstPageLabel+"</a>";  //首页
20             startIndex=(config.startIndex-config.pageSize)<=0?0:(config.startIndex-config.pageSize);
21             navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.previousPageLabel+"</a>";//上一页
22
23             thisPage=parseInt(config.startIndex/15)+1;
24
25             for(var i=-5;i<6;i++){
26                 if((thisPage+i)>=0 && (thisPage+i)<totalPage){
27                     startIndex=(thisPage+i)*config.pageSize;
28                     if(startIndex==config.startIndex){
29                         navStr=navStr+" <strong>["+(thisPage+i+1)+"]</strong>";
30                     }else{
31                         navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+(thisPage+i+1)+"</a>";
32                     }
33                 }
34             }
35
36             startIndex=(config.startIndex+config.pageSize)>=config.totalRecords?(totalPage-1)*config.pageSize:config.startIndex+config.pageSize;
37             navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.nextPageLabel+"</a>";//下一页
38             startIndex=(totalPage-1)*config.pageSize;
39             navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.lastPageLabel+"</a>";//末页
40             if(config.contenter.constructor==Array){
41                  $(config.contenter).each(function(){
42                      $("#"+this).html(navStr);
43                  });
44             }else{
45                 $("#"+config.contenter).html(navStr);
46             }
47         }

页面调用方法:

$(document).ready(function(){
            var myconfig={
                pageSize:<s:property value="pages.pageSize" default="1"/>,
                totalRecords:<s:property value="pages.totalRecords" default="0"/>,
                startIndex:<s:property value="pages.startIndex" default="0"/>,
                url:"${contextPath}/p/phone!list.act",
                pfx:"pages.",
                contenter:["pags","pagsTop"], //在ID为pags,pagsTop的div里显示导航
                template:{firstPageLabel:"首页",previousPageLabel:"上一页",nextPageLabel:"Next",lastPageLabel:"Last"},
                param:"form.cid=<s:property value='form.cid' default='0' />"
            };
            pageNavBar(myconfig);
        });

服务端,因为我用的是mysql,所以只要有startIndex,pagesize就可以分页了,当然还要传个totalRecords回来,可以提供给JS使用.

posted @ 2009-02-06 11:36 菜板阅读(194) | 评论 (0) | 编辑收藏

循环删除LIST数据的方法

困惑了很久,一直没解决,今天总算是搞定了
下面一段是曾经偿试的代码

1 for(Object o:list){
2 list.remove(o);
3 }

这段代码的缺点是list.remove后for(Object o:list)有问题,会报错,因为删除数据后list的循环不一样了

下面是正确的循环删除数据的方法

1 List<AssetsCategory> list=CategoryService.list(SystemConst.CONDITION_DEL_FALSE, 0, 0, "");
3         Iterator<AssetsCategory> itr=list.iterator();
4         while(itr.hasNext()){
5             AssetsCategory obj=itr.next();
6             if(obj.getMyCode().length()==2){ //这里加了个条件
7                 itr.remove();
8             }
9         }

posted @ 2009-02-06 10:18 菜板阅读(1056) | 评论 (0) | 编辑收藏

google每天都在变化

早上打开GMAIL,发现按钮全变了,不仅变得比以前好看了很多,而且在moveto和label两个选择框里增加了搜索功能,非常实用.除此之外,去年我向GOOGLE反馈过一个igoogle上使用gtalk输入法切换BUG,今年也没有再出现那个问题了.
google每天都在变啊,哈哈

posted @ 2009-02-05 10:07 菜板阅读(195) | 评论 (0) | 编辑收藏

三只钟

一只新组装的小钟放在两只旧钟之间。其中一只旧钟对小钟说：“你也开始工作吧。可我有点担心，一年要走三千一百多万次，你能行吗？”

“天呀！三千一百多万次?”小钟吃惊地说：“要我做这么大的事，我怕是做不到。”

另一只旧钟马上说：“你只要每秒钟滴答一下就可以了。”

“真的这么简单？”小钟将信将疑，“如果真的这么简单，那我就试试吧!”于是，小钟抱着试一试的态度开始了工作。

不知不觉，一年的时间过去了，小钟很高兴，因为它轻松完成任务了。

本来可以活得很轻松，很真实。而现在的世人大多活得很累，过多地承担了生活的压力。

在现实的困惑和无助面前，人们的心境往往不能平静，因此常常问自己：我还能坚持吗？

遥望前程，人们常常感叹，还有多远？路在哪里？

面对各种压力，有时候我们真的很想放弃，可我们却又往往不甘心。

posted @ 2009-02-04 10:03 菜板阅读(146) | 评论 (0) | 编辑收藏

YUI - treeView 通过JSON结构的数据构建数据表格

YUI-dataTable 服务端分页及动态排序

JS分页,存下,免得再去项目找

循环删除LIST数据的方法

google每天都在变化

三只钟

统计

常用链接

留言簿(1)

随笔分类(2)

随笔档案(2)

文章分类(4)

文章档案(4)

收藏夹(4)

搜索

最新评论

阅读排行榜

评论排行榜