2011-02-27 130 views
0

我正在使用數據表和我的ASP.NET MVC 3 Web應用程序,到目前爲止它進行得非常順利。我連接到一個SQL Server 2008數據庫,並使用存儲過程返回數據。我正在使用IE 8和最新版本的Firefox。版本YUI2.8.2r1。我有一個關於數據表:)YUI數據表問題

這裏是我的數據表的代碼幾個問題:

<script type="text/javascript"> 
    YAHOO.util.Event.onDOMReady(function() { 
     var grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs, grdNewsDataTable; 

     // News list data table 
     var formatActionLinks = function (oCell, oRecord, oColumn, oData) { 
      var newsId = oRecord.getData('NewsId'); 
      oCell.innerHTML = '<a href="Edit/' + newsId + '">Edit</a> | ' + 
       '<a href="Details/' + newsId + '">Details</a>'; 
     }; 

     var formatActive = function (oCell, oRecord, oColumn, oData) { 
      if (oData) { 
       oCell.innerHTML = "Yes"; 
      } 
      else { 
       oCell.innerHTML = "No"; 
      } 
     }; 

     grdNewsColumnDefs = [ 
      { key: 'Title', label: 'Title', className: 'align_left' }, 
      { key: 'Active', label: 'Active', className: 'align_left', formatter: formatActive }, 
      { key: 'Action', label: 'Actions', className: 'align_left', formatter: formatActionLinks } 
     ]; 

     grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())'); 
     grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
     grdNewsDataSource.responseSchema = { 
      resultsList: 'DataResultSet', 
      fields: [ 
       { key: 'NewsId' }, 
       { key: 'Title' }, 
       { key: 'Active' }, 
       { key: 'Action' } 
      ] 
     }; 

     grdNewsConfigs = { 
      paginator: new YAHOO.widget.Paginator({ 
       rowsPerPage: 20 
      }) 
     }; 

     grdNewsDataTable = new YAHOO.widget.DataTable('grdNews', grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs); 
     grdNewsDataTable.on('initEvent', function() { 
      YAHOO.util.Dom.setStyle(grdNewsDataTable.getTableEl(), 'width', '100%'); 
     }); 
    }); 
</script> 

不知道我做錯了,但這裏是返回我的數據我的操作方法:

public ActionResult JsonList() 
{ 
    JsonEncapsulatorDto<News> data = new JsonEncapsulatorDto<News> 
    { 
     DataResultSet = newsService.FindAll() 
    }; 

    return Json(data, JsonRequestBehavior.AllowGet); 
} 

我在返回的Json ...行上放置了一個斷點,以查看這個操作方法是否被命中。當頁面第一次加載到中斷時,我點擊F5,然後運行並顯示帶有填充網格的視圖。當我按F5刷新我的瀏覽器時,我的斷點再次沒有被擊中,我不知道爲什麼,它再也不會進入這裏。

數據如何加載到網格中?如果我在表中有100條記錄,並且我已將rowsPerPage設置爲20,那麼我將有5個頁面。鑑於上面的代碼,數據是同時加載的,意思是一次加載100行?我最好希望將它加載到「塊」中,而不是一次加載它。在另一個表中,我有更多的記錄,這不是一次一次加載所有內容的明智設計方法。我將如何實現這樣的事情?

我想在數據表中設置某些表格標題和單元格的樣式。我通過本文介紹瞭如何設置數據表的樣式:http://www.satyam.com.ar/yui/widgetstyles.html。當我將td設置爲向右對齊時,那個列的th也是右對齊的,爲什麼?你可以在上面看到我如何設置className屬性。這裏是我的樣式表代碼:

.yui-skin-sam .yui-dt td.align_left{text-align:left} 

鑑於上述情況,我想留在列標題對齊和相應的列行右對齊?我可能不會像這樣使用它,但只想知道如何將樣式設置爲不同的元素?

我將數據表的寬度設置爲100%,但是當我翻頁到下一頁時,它似乎失去了這個100%的寬度。爲什麼是這樣?我需要做什麼來讓我的數據表保持100%的寬度?

如果我要更新數據,那麼它不顯示爲已更新。爲什麼會這樣?我需要做些什麼才能讓更新的數據在數據表中顯示?

回答

1

你已經配置了YUI網格使用AJAX請求來獲取遠程數據:

grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())'); 

GET AJAX請求可以通過這解釋了爲什麼你的控制器動作被擊中一次瀏覽器(第一緩存當你加載頁面)。爲了避免這種緩存您可以配置YUI使用POST請求或每次頁面加載時附加一個隨機數到URL。

如何將數據加載到網格中?如果我在表中有100條記錄,並且我已將rowsPerPage設置爲20,那麼我將有5個頁面。

無論你在客戶端設置如下:

DataResultSet = newsService.FindAll() 

是一個明顯的跡象表明,服務器會在數據庫中的所有記錄,並將所有記錄返回給客戶端,它是客戶端只檢索必要的記錄以顯示哪些是低效的。

理想情況下,分頁應該在服務器上完成。這是一個example from the documentation。客戶端將startIndexresults參數發送到服務器,以便它可以對服務器上的數據集進行分頁並僅返回將顯示在屏幕上的必要行。