0

我正在将数据表与我的ASP.NET MVC 3Web 应用程序一起使用，到目前为止一切顺利。我连接到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... 行上放了一个断点，看看这个动作方法是否被命中。当页面第一次加载到中断时，我按 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% 的宽度？

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

4

1 回答 1

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

于 2011-02-27T15:33:18.413 回答