Таблица данных YUI: вопросы / вопросы - PullRequest
Новая
       9

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

0 голосов
/ 27 февраля 2011

Я использую таблицу данных с моим 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%?

Если бы я обновлял данные, они не отображаются как обновленные. Почему и что мне нужно сделать, чтобы обновленные данные отображались в таблице данных?

1 Ответ

1 голос
/ 27 февраля 2011

Вы настроили свою сетку YUI для использования AJAX-запроса для извлечения удаленных данных: 

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

GET AJAX-запросы могут кэшироваться браузером, что объясняет, почему действие вашего контроллера выполняется только один раз (при первой загрузке страницы).Чтобы избежать этого кэширования , вы можете настроить YUI на использование запроса POST или добавить случайное число к URL-адресу при каждой загрузке страницы.

Как загружаются данныев сетку?Если у меня есть 100 записей в таблице, и я установил для моего rowPerPage значение 20, у меня будет 5 страниц.

Независимо от того, что вы установили на стороне клиента, следующее: 

DataResultSet = newsService.FindAll()

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

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

...