數據加載中……
          
    
          
        
					
	
          
		
          
			YUI-dataTable 服務端分頁及動態排序
		
          
		
          今天先講下YUI的數據表格中,從服務端獲取數據和根據服務端數據排序的方法.官方示例的地址:http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
          

          
首先是必備的js,css文件的引入,可以從以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?datatable#configure
          

          
服務端返回數據的格式(=.=! 暫時還沒找到改變這種格式的其他方法,應該是跟數據源有關):
          

          {"recordsReturned":25,
          
              "totalRecords":1397,
          
              "startIndex":0,
          
              "sort":null,
          
              "dir":"asc",
          
              "pageSize":10,
          
              "records":[
          
        {          "id":"0",
          
                  "name":"xmlqoyzgmykrphvyiz",
          
                  "date":"13-Sep-2002",
          
                  "price":"8370",
          
                  "number":"8056",
          
                  "address":"qdfbc",
          
                  "company":"taufrid",
          
                  "desc":"pppzhfhcdqcvbirw",
          
                  "age":"5512",
          
                  "title":"zticbcd",
          
                  "phone":"hvdkltabshgakjqmfrvxo",
          
                  "email":"eodnqepua",
          
                  "zip":"eodnqepua",
          
                  "country":"pdibxicpqipbsgnxyjumsza"},
          
        
          
    ]
          
}
          

          
JS代碼:
          
中間會穿插些struts2的標簽
          

          YAHOO.namespace('YAHOO.uunav');
          
$(document).ready(          function(){  //YUI的LOAD方法寫起來沒有JQUERY的簡單,呵呵,偷下懶,結合起來用
          
          var table = YAHOO.yayasoft.buildTable({
          
                url:          "${contextPath}/ajax/phone!initPhone.act?",
          
                param:          "sort=id&dir=desc&startIndex=0&pageSize=<s:property value='pages.pageSize' />",
          
                pageSize:          <s:property value='pages.pageSize' />
          
            });
          
}
          
          //構建一個表格,數據通過datasource獲取,服務器以JSON格式返回數據
          
                  YAHOO.uunav.buildTable=function(config){
          
                      var Dom = YAHOO.util.Dom;  //定義一個DOM對象 
          
                      //定義表格列,key:數據字段,label:頁面顯示名稱,sortable:是否排序,默認false
          
                      var myColumnDefs = [
          
                {key:          "id",label:"編號",sortable:true},
          
                {key:          "company",label:"公司名稱",sortable:true},
          
                {key:          "tel1",label:"電話號碼",sortable:true},
          
                {key:          "privinceStr",label:"省份"},
          
                {key:          "cityStr",label:"城市"},
          
                {key:          "ischeck",label:"審核情況",sortable:true},
          
                {key:          "catalog.names",label:"類別"},
          
                {key:          "createDate",label:"創建日期",sortable:true},
          
                {key:          "coment",label:"評論",formatter:"myComent"}
          
                          //{key:"ac",label:"操作",formatter:"myAction"}
          
                          //{key:"ac",label:"操作"}
          
                      ];
          
            
          
                      //格式化表格
          
                      YAHOO.widget.DataTable.Formatter.myComent = function(elCell, oRecord, oColumn, oData){
          
                          //var d=oData
          
                          //if(YAHOO.lang.isString(oData)){
          
                          //    elCell.innerHTML="string"+oData.length;
          
                          //} 
          
                          if(oData.length>5){
          
                    elCell.innerHTML          =oData.substring(0,5)+"";
          
                }          else{
          
                    elCell.innerHTML          =oData;
          
                }
          
                elCell.title          =oData;
          
            }
          
            
          
            YAHOO.widget.DataTable.Formatter.myAction           = function(elCell, oRecord, oColumn, oData){
          
                          var id=oRecord.getData("id");
          
                elCell.innerHTML          ="<a href=\"#"+id+"\" >edit</a>";
          
            }
          
            
          
                      //自定義轉換函數 用于表格數據展示不同效果 
          
                      var ischecked=function(odata){
          
                          if(!YAHOO.lang.isNumber(odata)) return  "數據有錯誤";
          
                          if(odata==0) return "未審核";  //此處由cfg4u配置輸出
          
                          if(odata==1) return "已審核";
          
                          if(odata==2) return "拒絕";
          
                          return "數據有錯誤";
          
            }
          
            
          
                       //格式化日期,因為服務器端獲取的日期格式是10位整形
          
                      var formatDate=function(odata){ 
          
                formatDate.re          =new Date(parseFloat(odata)*parseFloat(1000));
          
                          return formatDate.re.getYear()+"-"+(formatDate.re.getMonth()+1)+"-"+formatDate.re.getDate();
          
            }
          

          
                      //表格行格式化,elTr:一行,oRecord:數據
          
                      var myRowFormatter=function(elTr, oRecord){
          
                          if(oRecord.getData('ischeck')=='未審核' || oRecord.getData('tel1')==""){
          
                    Dom.addClass(elTr,'mark');
          
                }
          
                          return true;
          
            }
          

          
                      //設置數據源,數據最終會提供給表格處理
          
                      var myDataSource = new YAHOO.util.DataSource(config.url);
          
            myDataSource.responseType           = YAHOO.util.DataSource.TYPE_JSON;
          
            myDataSource.responseSchema           = {
          
                resultsList:          "records",  //服務端返回的數據
          
                          fields:[  //配置數據列,格式化數據
          
                              {key:"id", parser:"number"},
          
                    {key:          "uucallId", parser:"number"},
          
                    {key:          "uucallName"},
          
                    {key:          "privince"},
          
                    {key:          "city"},
          
                    {key:          "company"},
          
                    {key:          "address"},
          
                    {key:          "tel1"},
          
                    {key:          "grad"},
          
                    {key:          "coment"},
          
                    {key:          "ip"},
          
                    {key:          "ischeck", parser:ischecked},  //自定義格式化方法ischecked
          
                              {key:"createDate", parser:formatDate},
          
                    {key:          "privinceStr"},
          
                    {key:          "cityStr"},
          
                    {key:          "catalog.names"}
          
                              //{key:"ac"}
          
                          ],
          
                metaFields:{
          
                    totalRecords:          "totalRecords"
          
                }
          
            }
          
            
          
                      var pagnav=new YAHOO.widget.Paginator({
          
                containers:          "pagnav",
          
                rowsPerPage:config.pageSize,
          
                firstPageLinkLabel:          "首頁",
          
                lastPageLinkLabel:          "末頁",
          
                nextPageLinkLabel:          "下一頁",
          
                previousPageLinkLabel:          "上一頁"
          
            });
          
            
          
                      //表格配置,initialRequest:初始的URL參數,用于分頁的參數,dynamicData:是否動態獲取數據,sortedBy:排序{key:排序字段,dir:升序:CLASS_ASC,降序:CLASS_DESC}
          
                      var myConfigs = {
          
                initialRequest:config.param,
          
                dynamicData:          true,
          
                sortedBy:{key:          "id",dir:YAHOO.widget.DataTable.CLASS_DESC},
          
                paginator:pagnav           //分頁導航,這里可以通過Paginator對象配置導航樣式
          
                          //formatRow: myRowFormatter
          
                          //scrollable:true,
          
                          //width:"80%"
          
                      };
          
            
          
                      //創建一個帶數據的表格.參數:(表格輸出位置,列配置,數據源,表格配置)
          
                      var myDataTable = new YAHOO.widget.DataTable("phoneTable",myColumnDefs, myDataSource, myConfigs);
          
            myDataTable.handleDataReturnPayload           = function(oRequest,oResponse,oPayload){  //動態獲取totalRecords,分頁用
          
                          oPayload.totalRecords = oResponse.meta.totalRecords;
          
                          return oPayload;
          
            }
          
            
          
                      //高亮行,鼠標移過時高亮作用
          
                      myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
          
            myDataTable.subscribe(          "rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
          
            myDataTable.subscribe(          "rowClickEvent", myDataTable.onEventSelectRow); //標準行選擇,支持多行選擇
          
                      
          
                      //myDataTable.subscribe("rowClickEvent", function(){myDataTable.getSelectedRows;});
          
                       
          
                      return {
          
                ds:myDataSource,
          
                dt:myDataTable
          
            };
          
        }
          
          //給表格添加右健菜單,用于操作
          
                  YAHOO.uunav.buildMenu = function(){
          
                      //add context menu to table
          
                      var onContextMenuClick = function(p_sType,p_aArgs,p_myDataTable){
          
                          var task = p_aArgs[1];
          
                          //alert(1);
          
                              
          
                          if(task){
          
                              var elRow = this.contextEventTarget;
          
                    elRow           = p_myDataTable.getTrEl(elRow);
          
                              var oRecord=p_myDataTable.getRecord(elRow);
          
                              if(elRow){
          
                                  switch(task.index){
          
                                      case 0:
          
                                tb_show('添加號碼信息','${contextPath}          /mng/phone!adminit.act?width=450&height=220','false');
          
                                          break;
          
                                      case 1:
          
                                          //alert("edit"+oRecord.getData("id"));
          
                                          tb_show('修改-'+oRecord.getData("company"),'${contextPath}/mng/phone!adminit.act?width=450&height=220&form.id='+oRecord.getData("id"),'false'); 
          
                                          break;
          
                                      case 2:
          
                                          if(confirm("您確定要刪除這些記錄嗎?")){  //oRecord.getData("id")
          
                                              $.ajax({
          
                                        type:          "POST",
          
                                        url:          "${contextPath }/ajax/phone!del.act",
          
                                        data:          "form.id="+oRecord.getData("id"),
          
                                        dataType:          "json",
          
                                        success:          function(data){
          
                                                      if(data.message.result){
          
                                                p_myDataTable.deleteRow(elRow);          //先刪服務器信息,成功后再刪表格信息
          
                                                      }
          
                                        }
          
                                    });
          
                                }
          
                                          break;
          
                                      case 3:
          
                                alert(          "UUNAV Administrator - V1.0");
          
                        }
          
                    }
          
                }
          
            }
          
            
          
                      //右健菜單
          
                      var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
          
                {trigger: table.dt.getTbodyEl()});
          
            myContextMenu.addItem(          "添加");
          
            myContextMenu.addItem(          "修改");
          
            myContextMenu.addItem(          "刪除");
          
            myContextMenu.addItem(          "關于");
          
            myContextMenu.render(          "contextMenu");
          
            
          
            myContextMenu.clickEvent.subscribe(onContextMenuClick, table.dt);
          
                      return myContextMenu;
          
        }
          

          
代碼中加了注釋,可能看起來仍然有些吃力,建議邊做邊看.這樣效果好.
          

          
官方API:http://developer.yahoo.com/yui/docs/module_datatable.html          

          
		
          
			posted on 2009-02-07 21:25 菜板 閱讀(2964) 評論(2)  編輯  收藏  所屬分類: YUI 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
		
          
			
          
				# re: YUI-dataTable 服務端分頁及動態排序 2011-08-15 10:39 jjk
			
			
          
			
          
			    
          
				
          查詢怎么實現的呀,
          app.myDataTable.load(app.myConfigs,app.generateRequest,function(data){
          		alert("jjk");
          		app.sqlWhere = "and t.ZGDWBM=? ";
          		app.values = new Array();
          		app.values[app.values.length]=app.ZGDWBM;
          	},app.myDataSource);
          這個怎么改啊,有例子嗎?
          
				
          				
			
          
			
            回復  更多評論    
          
			
          
		
		
          
			
          
				# re: YUI-dataTable 服務端分頁及動態排序 2013-09-09 16:48 wk
			
			
          
			
          
			    
          
				
          我的代碼總是在{trigger: table.dt.getTbodyEl()});就斷了
          
				
          				
			
          
			
            回復  更多評論    
          
			
          
		

          




          








          

				
    
          
    

          

	

    







          
        
	




主站蜘蛛池模板：
乌鲁木齐县|
富宁县|
临清市|
牙克石市|
乌拉特中旗|
观塘区|
湘阴县|
铁岭县|
毕节市|
汽车|
巨鹿县|
永城市|
商城县|
勃利县|
浙江省|
普宁市|
合山市|
房山区|
合阳县|
岗巴县|
大冶市|
德安县|
丹阳市|
大宁县|
定结县|
潜山县|
高雄市|
乌什县|
博爱县|
环江|
华安县|
苗栗县|
农安县|
永定县|
双桥区|
陕西省|
天津市|
临西县|
铁岭县|
建昌县|
行唐县|