YUI 数据表问题/疑问

Question

我正在将数据表与我的 ASP.NET MVC 3 Web 应用程序一起使用，到目前为止一切进展顺利。我连接到 SQL Server 2008 数据库，并使用存储过程返回数据。我使用的是 IE 8 和最新版本的 Firefox。 YUI 的版本是 2.8.2r1。我有几个关于数据表

的问题:)这是我的数据表的代码：

<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);
}

我在 return Json... 行上放置了一个断点看看这个action方法是否被命中。当页面第一次加载到中断时，我按 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% 的宽度？

如果我要更新数据，那么它不会显示为已更新。这是为什么？我需要做什么才能让更新的数据显示在数据表中？

Answer 1

您已将 YUI 网格配置为使用 AJAX 请求来获取远程数据：

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

浏览器可以缓存 GET AJAX 请求，这解释了为什么您的控制器操作仅被命中一次（第一次加载页面时）。为了避免这种缓存，您可以将 YUI 配置为使用 POST 请求，或者在每次加载页面时向 URL 附加一个随机数。

数据如何加载到网格中？如果表中有 100 条记录，并且我将 rowsPerPage 设置为 20，那么我将有 5 页。

无论您在客户端设置什么，以下内容都

DataResultSet = newsService.FindAll()

清楚地表明服务器从数据库中获取所有记录并将所有记录发送回客户端，而客户端只检索必要的记录，这表明效率低下。

理想情况下，分页应该在服务器上完成。这是文档中的示例。客户端将 startIndex 和 results 参数发送到服务器，以便它可以对服务器上的数据集进行分页，并仅返回将在屏幕上显示的必要行。