今天先講下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'
]}
]
當然,實際情況是你不一定返回一模一樣的格式,但可以根據自己的結構來生成這樣的格式!
下面是項目中用到的一個用來獲取這種格式的方法(注:我的方法屬于比較笨的方法,用的是遞歸循環(huán))
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對象時加進去的,見如下代碼:
function createNodes(list,nodeType){ //這就是前面的遞歸生成結點JSON對象的函數
var treeNodeStr="[";
$(list).each(function(i){
if(i>0) treeNodeStr+=",";
treeNodeStr+="{\"label\":\""+this.names+"\",\"id\":"+this.id+","; //這里的id就是data對象里的id
if(this.children.length>0){
treeNodeStr+="\"children\":"+createNodes(this.children,nodeType)+",";
}
treeNodeStr+="\"type\":\""+nodeType+"\"}";
});
treeNodeStr+="]";
return treeNodeStr;
}
同樣可以通過oArgs.node.data.label訪問結點名字,不過也可以直接通過oArgs.node.label直接訪問label,至于什么原因,看了
API就知道了
看上去貌似還是有些復雜,大家只當是個參考吧!
摘要: 今天先講下YUI的數據表格中,從服務端獲取數據和根據服務端數據排序的方法.官方示例的地址:http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
首先是必備的js,css文件的引入,可以從以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?datat... 閱讀全文
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使用.
困惑了很久,一直沒解決,今天總算是搞定了
下面一段是曾經償試的代碼
1 for(Object o:list){
2 list.remove(o);
3 }
這段代碼的缺點是list.remove后for(Object o:list)有問題,會報錯,因為刪除數據后list的循環(huán)不一樣了
下面是正確的循環(huán)刪除數據的方法
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 }
早上打開GMAIL,發(fā)現按鈕全變了,不僅變得比以前好看了很多,而且在moveto和label兩個選擇框里增加了搜索功能,非常實用.除此之外,去年我向GOOGLE反饋過一個igoogle上使用gtalk輸入法切換BUG,今年也沒有再出現那個問題了.
google每天都在變啊,哈哈
一只新組裝的小鐘放在兩只舊鐘之間。 其中一只舊鐘對小鐘說：“你也開始工作吧。可我有點擔心，一年要走三千一百多萬次，你能行嗎？”
“天呀！三千一百多萬次?”小鐘吃驚地說：“要我做這么大的事，我怕是做不到。”
另一只舊鐘馬上說：“你只要每秒鐘滴答一下就可以了。”
“真的這么簡單？”小鐘將信將疑，“如果真的這么簡單，那我就試試吧!”于是，小鐘抱著試一試的態(tài)度開始了工作。
不知不覺，一年的時間過去了，小鐘很高興，因為它輕松完成任務了。
本來可以活得很輕松，很真實。而現在的世人大多活得很累，過多地承擔了生活的壓力。
在現實的困惑和無助面前，人們的心境往往不能平靜，因此常常問自己：我還能堅持嗎？
遙望前程，人們常常感嘆，還有多遠？路在哪里？
面對各種壓力，有時候我們真的很想放棄，可我們卻又往往不甘心。