coding4.net Голосов: 1 Адрес блога: http://www.coding4.net/ Добавлен: 2012-06-11 20:16:46

Сортировка колонки ASP.NET GridView с использованием плагина jQuery TableSorter

Этот пост показывает как, используя плагин jQuery, отсортировать колонки привязанные к пользовательским классам.

Создайте ASP.NET вебсайт и добавьте GridView на него. Здесь я добавляю некий класс Employee и привязываю его к GridView.

Теперь загрузите плагин tablesorter отсюда tablesorter.com и положите его в папку со скриптами. Здесь я добавил jQuery плагин в папку со скриптами, но можно было бы взять этот скрипт из Microsoft CDN.

Плагин tablesorter нуждается в тегах THEAD и TBODY для своей работы. Контрол GridView по умолчанию не генерит эти теги, но он позаоляет включить с помощью настроечных свойств. Используйте последующий код для генерации этих тегов

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (gvCustom.Rows.Count > 0)
{
    //To render header in accessible format
    gvCustom.UseAccessibleHeader = true;

    //Add the <thead> element
    gvCustom.HeaderRow.TableSection = TableRowSection.TableHeader;

    //Add the <tfoot> element
    gvCustom.FooterRow.TableSection = TableRowSection.TableFooter;

    if (gvCustom.TopPagerRow != null)
    {
      gvCustom.TopPagerRow.TableSection = TableRowSection.TableHeader;
    }
    if (gvCustom.BottomPagerRow != null)
    {
      gvCustom.BottomPagerRow.TableSection = TableRowSection.TableFooter;
    }
}
}

Теперь добавим следующий код для вызова плагина tablesorter над GridView.

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

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