Как добавить идентификатор строки в таблицы django, чтобы получить выбранный переключатель из указанной строки c - PullRequest
Новая
       24

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

0 голосов
/ 11 апреля 2020

Я пытаюсь использовать jQuery, чтобы получить строку, в которой находится выбранное радио, а также выбранное значение переключателя при использовании django -tables2.

Итак, у меня есть три столбца в таблице, и я отобразил их с помощью django -tables2. Третий столбец - это templatecolumn с шаблоном HTML (кнопки. html: 

<form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form>

. Затем я добавляю templatecolumn в таблицу (я создал свой собственный класс таблицы, унаследовав его от tables.Table): 

myTableCol={}
        mylist = []
        for i in queryResults:
            mydic = {}
            for j in i:
                className=str(type(j)).split(".")[1]
                mydic.update({className: j.name})
                myTableCol.update({className: tables.Column()})
            mylist.append(mydic)
        myTableCol.update({'Action': tables.TemplateColumn(template_name="buttons.html", verbose_name=("Actions"), orderable=True)})
        Meta = type('Meta', (object,), {'template_name':"django_tables2/bootstrap4.html", 'attrs':{"class": "paleblue"},})
        myTableCol.update({'Meta':Meta})
        QueryTable2=type('QueryTable', (tables.Table,), myTableCol)

Затем таблица отображается с помощью {% render_table table%}, которая дает html ниже. Я пытаюсь определить, какая радио-кнопка была выбрана для строки. 

$(document).ready(function () {
        $('input').click(function() {
            var $selectedButton = $('input[name=result]:checked').val();
            var $row = $(this).closest("tr");
            var $rowData = $row.children("td").map(function() {
                        return $(this).text();
                    }).get();
                    alert($selectedButton);
                    });});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="table-container">  
        <table class="paleblue">
                <thead class="thead-default" >
                <tr>                
                    <th class="orderable">                        
                            <a href="?sort=UseCase">UseCase</a>                        
                    </th>                
                    <th class="orderable">                        
                            <a href="?sort=MainFlow">MainFlow</a>                        
                    </th>                        
                    <th class="orderable">                        
                            <a href="?sort=Action">Actions</a>                        
                    </th>                
                </tr>
                </thead>                  
                <tbody >             
                    <tr scope="row" class="even">                        
                            <td >UC3_Make_Online_Payments</td>                        
                            <td >UC3_BasicFlowGroup_BF_5</td>                      
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    <tr scope="row" class="odd">
                            <td >UC9_Create_New_Account</td>
                            <td >UC9_BasicFlowGroup_BF_3</td>
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    
                
                    
                    <tr scope="row" class="even">
                        
                            <td >UC5_Login</td>
                        
                            <td >UC5_BasicFlowGroup_BF_3</td>
                        
                            
                        
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>       
                    </tr>            
                </tbody>
        </table>
</div>

Проблема заключается в том, что при выборе переключателя значение основывается на выбранном переключателе первого ряда. Я знаю, что было бы лучше использовать селектор идентификатора формы вместо класса формы в кнопке. html, но я не знаю, как получить доступ к переключателю c из указанной строки таблицы c.

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

1 Ответ

0 голосов
/ 11 апреля 2020

Чтобы получить выбранный вход, просто используйте 

var $selectedButton = $(this).val();

вместо 

var $selectedButton = $('input[name=result]:checked').val();

Fiddle

...