Как применить SelectedRowStyle для gridview с дизайном начальной загрузки - PullRequest
Новая
       12

Как применить SelectedRowStyle для gridview с дизайном начальной загрузки

0 голосов
/ 17 сентября 2018

Когда я пытаюсь применить SelectedRowStyle для вида сетки, он не применяется.Приложение использует шаблон начальной загрузки.Я также применил таблицу css: Таблица с полосками Как применить стиль для выбранной строки?

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Ниже приведен пример

Использовать пользовательский класс для конкретной таблицы. 

$(".custom-table tbody tr").on('click', function() {
  $('.custom-table tbody tr').removeClass("selected");
  $(this).addClass("selected");
});
tr.selected {
  background-color: red;
}

/* This is not necessary if your not using table-striped. */
.table-striped tbody tr.selected:nth-of-type(odd) {
  background-color: red;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Bootstrap table example</title>
</head>

<body>

  <table class="custom-table table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 17 сентября 2018

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

$('.myTable').on('click', '.row', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

дает активному классу пользовательский css, поскольку вы используете полосатую таблицу, чтобы дифференцировать выбранную строку.

...