Таблица данных YUI: вопросы / вопросы

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 записей в таблице, и я установил для моего rowPerPage значение 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 записей в таблице, и я установил для моего rowPerPage значение 20, у меня будет 5 страниц.

Неважно, что вы установили на стороне клиента:

DataResultSet = newsService.FindAll()

является явным признаком того, что сервер извлекает все записи из базы данных и отправляет все записи обратно клиенту, и именно клиент извлекает только необходимые записи, чтобы показать, что является неэффективным.

В идеале нумерация страниц должна выполняться на сервере. Вот пример из документации. Клиент отправляет startIndex а также results параметры сервера, чтобы он мог разбивать на пейджинг набор данных на сервере и возвращать только необходимые строки, которые будут отображаться на экране.