幻想天堂

數(shù)據(jù)加載中……

2009年2月19日

YUI - treeView 通過(guò)JSON結(jié)構(gòu)的數(shù)據(jù)構(gòu)建數(shù)據(jù)表格

今天先講下YUI的數(shù)據(jù)表格中,從服務(wù)端獲取數(shù)據(jù)和根據(jù)服務(wù)端數(shù)據(jù)排序的方法.官方示例的地址:http://developer.yahoo.com/yui/treeview/
首先是必備的js,css文件的引入,可以從以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?treeview#configure

JSON數(shù)據(jù)格式

[

'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'

]}

]

當(dāng)然,實(shí)際情況是你不一定返回一模一樣的格式,但可以根據(jù)自己的結(jié)構(gòu)來(lái)生成這樣的格式!
下面是項(xiàng)目中用到的一個(gè)用來(lái)獲取這種格式的方法(注:我的方法屬于比較笨的方法,用的是遞歸循環(huán))

YAHOO.uunav.getCatalogTree = function(root){
            var str;
            $.ajax({
                url:"${contextPath}/ajax/catalog!initTree.act",  //從服務(wù)器獲取數(shù)據(jù)
                dataType:"json",
                async :false,
                success:function(data){
                    if(typeof(data.records)!="undefined" ){
                        str=createNodes(data.records,"menu");  //一個(gè)遞歸的函數(shù),用于生成符合YUI樹(shù)標(biāo)準(zhǔn)的JSON對(duì)象
                    }
                }
            });
            return eval(str); //其實(shí)剛剛的STR那只是個(gè)字符串,最后通過(guò)eval方法可以轉(zhuǎn)成對(duì)象.
        }

數(shù)據(jù)準(zhǔn)備好了,下一步就是構(gòu)建樹(shù)了

//構(gòu)建樹(shù)結(jié)構(gòu)
        YAHOO.uunav.buildTree=function(treeContent){
            var treeNodes = YAHOO.uunav.getCatalogTree(0);
            var tree=new YAHOO.widget.TreeView(treeContent,treeNodes);

            tree.render();
            return tree;
        }

上面的只是個(gè)方法,需要在頁(yè)面load的時(shí)候加載,YUI有它自己的load事件,但我更喜歡JQUERY的,寫(xiě)法比較簡(jiǎn)單,呵呵

$(document).ready(function(){

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

});

如果你的樹(shù)只是想做菜單,連接之用,到這里就可以了,但如果希望能夠在響應(yīng)單擊事件的時(shí)候做出點(diǎn)其他動(dòng)作,那還需要給tree注冊(cè)事件

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

合起來(lái)應(yīng)該是下面這個(gè)樣子

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

            //添加結(jié)點(diǎn)單擊事件
            tree.subscribe('clickEvent',function(oArgs) {
                treeNodeClick(oArgs.node.data.id);
            });
        });

對(duì)參數(shù)做下解釋:
oArgs.node.data:表示的是這個(gè)結(jié)點(diǎn)帶的數(shù)據(jù),而這些數(shù)據(jù)就是在生成樹(shù)的JSON對(duì)象里面的,事實(shí)上,默認(rèn)的最簡(jiǎn)單的樹(shù)結(jié)點(diǎn)并沒(méi)有oArgs.node.data.id這個(gè)數(shù)據(jù),這個(gè)數(shù)據(jù)是在生成樹(shù)結(jié)點(diǎn)JSON對(duì)象時(shí)加進(jìn)去的,見(jiàn)如下代碼:

同樣可以通過(guò)oArgs.node.data.label訪問(wèn)結(jié)點(diǎn)名字,不過(guò)也可以直接通過(guò)oArgs.node.label直接訪問(wèn)label,至于什么原因,看了API就知道了

看上去貌似還是有些復(fù)雜,大家只當(dāng)是個(gè)參考吧!

posted @ 2009-02-19 12:55 菜板閱讀(2817) | 評(píng)論 (0) | 編輯收藏

2009年2月7日

YUI-dataTable 服務(wù)端分頁(yè)及動(dòng)態(tài)排序

摘要: 今天先講下YUI的數(shù)據(jù)表格中,從服務(wù)端獲取數(shù)據(jù)和根據(jù)服務(wù)端數(shù)據(jù)排序的方法.官方示例的地址: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 菜板閱讀(2964) | 評(píng)論 (2) | 編輯收藏

2009年2月6日

JS分頁(yè),存下,免得再去項(xiàng)目找

JS分頁(yè)函數(shù):

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>";  //首頁(yè)
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>";//上一頁(yè)
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>";//下一頁(yè)
38             startIndex=(totalPage-1)*config.pageSize;
39             navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.lastPageLabel+"</a>";//末頁(yè)
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         }

頁(yè)面調(diào)用方法:

$(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里顯示導(dǎo)航
                template:{firstPageLabel:"首頁(yè)",previousPageLabel:"上一頁(yè)",nextPageLabel:"Next",lastPageLabel:"Last"},
                param:"form.cid=<s:property value='form.cid' default='0' />"
            };
            pageNavBar(myconfig);
        });

服務(wù)端,因?yàn)槲矣玫氖莔ysql,所以只要有startIndex,pagesize就可以分頁(yè)了,當(dāng)然還要傳個(gè)totalRecords回來(lái),可以提供給JS使用.

posted @ 2009-02-06 11:36 菜板閱讀(208) | 評(píng)論 (0) | 編輯收藏

循環(huán)刪除LIST數(shù)據(jù)的方法

困惑了很久,一直沒(méi)解決,今天總算是搞定了
下面一段是曾經(jīng)償試的代碼

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

這段代碼的缺點(diǎn)是list.remove后for(Object o:list)有問(wèn)題,會(huì)報(bào)錯(cuò),因?yàn)閯h除數(shù)據(jù)后list的循環(huán)不一樣了

下面是正確的循環(huán)刪除數(shù)據(jù)的方法

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){ //這里加了個(gè)條件
7                 itr.remove();
8             }
9         }

posted @ 2009-02-06 10:18 菜板閱讀(1073) | 評(píng)論 (0) | 編輯收藏

僅列出標(biāo)題

<

2025年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

統(tǒng)計(jì)

隨筆 - 2
文章 - 4
評(píng)論 - 2
引用 - 0

常用鏈接

留言簿(1)

隨筆分類(2)

事件 (rss)
隨(2) (rss)

隨筆檔案(2)

2009年2月 (2)

文章分類(4)

文章檔案(4)

2009年2月 (4)