2011-02-27 128 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参数发送到服务器,以便它可以对服务器上的数据集进行分页并仅返回将显示在屏幕上的必要行。