адаптивная таблица (не более таблиц) с ASP DataGrid asp: BoundColumn - PullRequest
Новая
       8

адаптивная таблица (не более таблиц) с ASP DataGrid asp: BoundColumn

0 голосов
/ 25 декабря 2018

Я новичок в .NET.Я превращаю существующий веб-сайт HTML и asp.net в адаптивный.Я преобразовал ASP DataGrid в адаптивный, используя метод «больше таблиц», и он работает отлично, за исключением того, что заголовки столбцов перекрываются .Столбцы DataGrid представляют собой такие элементы, как: 

<asp:BoundColumn DataField="M_DATENAME" HeaderText="Day"></asp:BoundColumn>

, и некоторые из этих столбцов содержат элементы <span>, поэтому при небольших размерах экрана, когда заголовки добавляются до td (s), эти столбцы перекрываются.

Итак, я попробовал два способа:

  1. Согласно Курсу Удеми с использованием атрибута data-title или data-th:

    no-more-tables td:before { content: attr(data-title); }

Однако проблема в том, что asp BoundColumn не имеет атрибута с именем data-title или data-th

Второй способ - это добавление заголовков вручную на основе примера -> проблема с ним: некоторые столбцы установлены как невидимые и видимые только в определенных условиях.Так что в какой-то момент эти заголовки текста перекрываются.

Так что может быть решением моей проблемы?

Или как я могу добавить BoundColumn HeaderText в качестве значения свойства content css вместо data-titleили data-th.

1 Ответ

0 голосов
/ 26 декабря 2018

Я нашел решение проблемы.На самом деле проблема была вызвана столбцами DataGrid, которые имеют нулевые значения (пусто), поэтому эти ячейки не отображались во время отображения заголовков и, таким образом, перекрывались со следующими ячейками.Для этого я сделал следующее: 1) Я добавил <ItemStyle CssClass="headerStyle5"/> для каждого BoundColumn и TemplateColumn 2) Затем в CSS вместо добавления заголовков с абсолютной позицией в столбце я ссылалсястолбцы, использующие имя headerStyle, которое я добавил на шаге 1, как показано ниже: 

#no-more-tables td[class="headerStyle1"]:before { content: "Date"; }
#no-more-tables td[class="headerStyle2"]:before { content: "Day"; }
#no-more-tables td[class="headerStyle10"]:before { content: "Remarks"; }

3) в VB.NET, ниже я написал код для циклического прохождения всех пустых ячеек и добавленияметка с пробелом, в которой в ячейке будет отображаться 

Dim i As Integer
For i = 0 To DataGrid1.Columns.Count - 1

    If e.Item.Cells(i).Text.Trim Is Nothing Or e.Item.Cells(i).Text.Trim = "" Then
        Dim sosoLabel As New Label
        sosoLabel.Text = "<label>&nbsp;</label>"
        e.Item.Cells(i).Controls.Add(sosoLabel)

    End If
Next

, и теперь она работает отлично :)

...