Как сгруппировать элементы в подзаголовки в элементе управления сеткой ASP.NET?

Question

Я хотел бы взять две таблицы и заполнить сетку с результатами:

продукт категория

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

Что-то вроде:

(категории: еда, одежда, жилье)

FOOD

 Rice 10s Available <buy now>

 Beans 20s Available <buy now>

 Chicken 50s Available <buy now>

CLOTHING

 Cloak 30s Available <buy now>

 Helmet 45s Available <buy now>

 Sandals 10s Available <buy now>

SHELTER

 Tent 100s Available <buy now>

Любая помощь будет оценена!

Answer 1

Я попытался реализовать код Марка, и мне пришлось немного его настроить, чтобы он заработал. Для тех, кто сталкивается с этим постом в будущем, здесь есть модифицированный код:

var lastCategory = '';
$('tr').find('td:first').each(function() {
    var thisCategory = $(this).text().trim();
    if (thisCategory != lastCategory) {
        // new category - insert subheading row
        var thisRow = $(this).parent();
        var colspan = $('> td', thisRow).length;
        thisRow.before(
          '<tr class="subheading">' +
              '<td colspan="' + colspan.toString() + '">' +
                thisCategory +
              '</td>' +
          '</tr>'
        );
        lastCategory = thisCategory;
    }
}).hide();

Мне пришлось изменить начальный селектор, чтобы получить первую ячейку в каждой, и изменить insertBefore () на before (), так как insertBefore () используется для объектов jQuery, а не html-содержимого.

Answer 2

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

Я не знаю, можете ли вы сделать это в GridView (я не думаю, что вы можете), но вы можете сделать это с помощью сетки DeveExpress.

Answer 3

ListView сделает это довольно легко, так как имеет шаблоны группировки. Повторитель для категорий с вложенными GridView для элементов также будет работать.

Если вы настроили GridView, это займет некоторое время. Вы можете либо изменить данные, чтобы поместить их в классифицированные строки, создать подкласс GridView для добавления новых строк, добавить пользовательский элемент управления для вставки разметки в HTML-код GridView (я использую тот, который закрывает текущую строку и добавляет новую строку с соединением), или использовать JQuery на клиенте.

Создание подклассов - это «правильный» способ - и его можно использовать повторно - но это немного работы. Изменить данные довольно просто, но это довольно уродливо и зависит от того, как вы привязываетесь к данным. JQuery может быть самым простым маршрутом здесь. Установите категорию в 1-м столбце, создайте новые строки при изменении категории, а затем скройте 1-й столбец. Это также хорошо понижает, так как noscript будет категория в первом столбце. Это не проверено, но оно должно приблизить вас:

var lastCategory = '';
$('TR > TD:first').each(function() {
   var thisCategory = $(this).text().trim();
   if (thisCategory != lastCategory) {
      // new category - insert subheading row
      var thisRow = $(this).parent();
      var colspan = $('> TD', thisRow).length;
      thisRow.insertBefore(
          '<tr class="subheading">' +
              '<td colspan="' + colspan.toString() + '">' +
                thisCategory +
              '</td>' +
          '</tr>'
      );
      lastCategory = thisCategory;
   }
}).hide(); // hide 1st columns

Answer 4

Вы не можете делать с сеткой asp.net из коробки.

Вы можете использовать повторитель и вкладывать сетку в элемент повторителя. Повторитель для категорий. .NET 3.0 + использовать ListView

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

Andrew