Есть ли плагин JQuery Table, который поддерживает HTML-таблицу в качестве источника данных AJAX - PullRequest
3 голосов
/ 24 августа 2009

Я оценивал несколько плагинов таблиц JQuery для удовлетворения моих потребностей в подкачке и сортировке. Я ищу что-то, что позволяет разбивать на страницы и сортировать мои таблицы с помощью вызова AJAX.

Проблема, с которой я столкнулся, заключается в том, что все плагины, которые я обнаружил, ожидают, что вызов Ajax вернет JSON. Это идеально подходит для простых сценариев, но падает, когда я хочу применить сложное форматирование к моим таблицам, как только я хочу, чтобы моя таблица включала ссылки или значки, или другой сложный рендеринг, я столкнулся с воспроизведением кода на стороне сервера, который генерирует эти ссылки или выбирает соответствующий значок в качестве кода на стороне клиента, чтобы сделать то же самое.

То, что я хотел бы сделать, это вернуть новые данные таблицы в виде таблицы html и сделать так, чтобы плагин заменил существующую таблицу на возвращенную таблицу (либо напрямую, либо путем копирования ячеек, детали не важны). Есть ли рекомендации для лучшего способа сделать это?

Ответы [ 5 ]

1 голос
/ 24 августа 2009

взгляните на http://www.datatables.net/ я думаю, что это удовлетворит ваши потребности:)

Очень хорошо, это тоже!

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

0 голосов
/ 24 сентября 2009

Я думаю, что вашим лучшим вариантом будет создание действия контроллера, которое возвращает частичное представление, которое содержит вашу таблицу. Частичное представление может содержать любую таблицу / сетку на основе JavaScript, которую вы хотите. Это решение вообще не зависит от какой-либо конкретной реализации таблицы / сетки.

Например, допустим, у вас есть строго типизированное частичное представление типа ViewUserControl > с именем FooList.ascx

Затем вы бы определили какое-то действие в вашем контроллере, которое отобразило этот частичный

// For paging support, you would probably need to modify this action to accept
// a parameter that could be used to tell which records to retrieve.
// This would also require the appropriate route. However, this is beyond
// the scope of this example.
public PartialViewResult List()
{
  // get the collection of stuff that you want to display
  var items = this.itemRepository.GetItems();

  // return the partial
  return PartialView("FooList", items);
}


С вашей точки зрения, где будет использоваться эта частичная часть, вам понадобится что-то вроде следующего ...

<!-- this <div> will contain the partial, which we will be able to update via AJAX -->
<div id="FooList">
    <%-- this assumes a collection of "items" is available in Model.Items --%>
    <% Html.RenderPartial("FooList", Model.Items); %>
</div>

<!-- use an AJAX ActionLink to update the table -->
<%=
    Ajax.ActionLink
    (
        "Click Me to Update the Table using AJAX!",
        "List",
        new AjaxOptions()
        {
            HttpMethod = "GET",
            LoadingElementId = "FooList"
        }
    )
%>

Все, что мы здесь делаем, - это использование ASP.NET MVC AJAX Helper для создания ссылки, которая сгенерирует запрос AJAX GET на действие List в вашем контроллере. Кроме того, определив свойство LoadingElementId в объекте AjaxOptions, мы сказали помощнику, что хотим заменить внутреннее содержимое на результаты запрос AJAX.

Когда пользователь щелкает эту ссылку, запрос AJAX вызовет действие «Список». Ваше действие со списком просто возвращает отображаемое содержимое частичного представления FooList.ascx. Существующее содержимое div с id = "FooList" будет заменено содержимым, полученным из запроса AJAX. В приведенном выше примере действие контроллера всегда будет выбирать те же данные, что не совсем то, что вы хотите. В реальном сценарии вам придется изменить действие контроллера, чтобы получить соответствующие данные для вашего частичного просмотра. Я не могу предложить вам эффективный способ справиться с этим, не зная деталей вашей реализации.

Если вы не хотите использовать ссылку, просто посмотрите на HTML и JavaScript, сгенерированные помощником Ajax.ActionLink, и адаптируйте их под свои нужды. Например, создайте свой собственный вспомогательный помощник или просто напишите код JavaScript.

Наконец, не забудьте включить исходные файлы JavaScript MVC AJAX. Я рекомендую включить их в вашу главную страницу. Например:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
0 голосов
/ 03 сентября 2009

Для jQuery несколько сеток могут модифицировать HTML-таблицы на месте. Два, которые я использовал, это flexigrid и jqgrid.

Если вы сделаете это, вы можете, например, добавить html-таблицу с помощью вызова ajax (если необходимо), а затем применить flexigrid () или jqgrid () к полученной html-таблице.

0 голосов
/ 24 августа 2009

Попробуйте, это из YUI, а не JQuery, но я думаю, что это будет делать именно то, что вам нужно

http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html

0 голосов
/ 24 августа 2009

Я с тех пор нашел ingrid и выброшу его как потенциальное решение. Кажется, я делаю то, что хочу, хотя внешний вид кажется довольно тяжелым. Я посмотрю, как проголосуют за этот ответ, я думаю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...