Question

我正在将数据表与我的ASP.NET MVC 3网络应用程序一起使用，到目前为止一切都很顺利。我连接到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);
}

我在返回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％的宽度？

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

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

YUI数据表问题/问题

1 个答案: