Дизайн материала - Создать действие, если установить флажок в строке таблицы - PullRequest
Новая
       13

Дизайн материала - Создать действие, если установить флажок в строке таблицы

0 голосов
/ 19 ноября 2018

Я использую дизайн материала, и теперь я пытаюсь реализовать таблицу с возможностью выбора.Мне нужно выполнить действие, если щелкнуть строку таблицы флажков, и я попытался сделать это с помощью jquery, но не работает.

Моя таблица такова: 

<table id="budget-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
                  <thead>
                    <tr>
                      <th class="mdl-data-table__cell--non-numeric"></th>
                      <th class="mdl-data-table__cell--non-numeric">Referência</th>
                      <th class="mdl-data-table__cell--non-numeric">Descrição</th>
                      <th class="mdl-data-table__cell--non-numeric">Alpha</th>
                      <th class="mdl-data-table__cell--non-numeric">Material</th>
                      <th class="mdl-data-table__cell--non-numeric">Qtt</th>
                      <th class="mdl-data-table__cell--non-numeric">Entrega</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($budgetLines as $key => $value)
                      <tr data-id="{{$value->u_bistamp}}">
                        <td></td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>

В теге таблицыЯ добавляю класс mdl-data-table--selectable, который делает эту строку таблицы доступной для выбора, и добавляю этот код в каждую строку tr: 

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox,MaterialRipple">
   <input type="checkbox" class="mdl-checkbox__input">
   <span class="mdl-checkbox__focus-helper"></span>
   <span class="mdl-checkbox__box-outline">
      <span class="mdl-checkbox__tick-outline"></span>
   </span>
   <span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple">
       <span class="mdl-ripple is-animating" style="width: 103.823px; height: 103.823px; transform: translate(-50%, -50%) translate(18px, 18px);"></span>
   </span>
</label>

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

    function checkLineBudget()
    {
      $("#budget-table tbody tr td .mdl-checkbox").click(function (e)
      {
        alert("Works");
      });
    }

Как я могу это сделать?

1 Ответ

0 голосов
/ 19 ноября 2018

Вы можете просто прослушивать события изменения строки: 

$('#budget-table tbody tr').on('change', function(e) {
     var rowIndex = $(this).closest("tr").index();
     console.log(rowIndex);
})


$('#budget-table tbody tr').on('change', function(e) {
    var rowIndex = $(this).closest("tr").index();
    console.log(rowIndex);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>


<table id="budget-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
    <thead>
    <tr>
        <th class="mdl-data-table__cell--non-numeric"></th>
        <th class="mdl-data-table__cell--non-numeric">Referência</th>
        <th class="mdl-data-table__cell--non-numeric">Descrição</th>
        <th class="mdl-data-table__cell--non-numeric">Alpha</th>
        <th class="mdl-data-table__cell--non-numeric">Material</th>
        <th class="mdl-data-table__cell--non-numeric">Qtt</th>
        <th class="mdl-data-table__cell--non-numeric">Entrega</th>
    </tr>
    </thead>
    <tbody>
    <tr data-id="{{$value->u_bistamp}}">
        <td></td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
    </tr>
    <tr data-id="{{$value->u_bistamp}}">
        <td></td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
    </tr>
    </tbody>
</table>
...