2013-08-14 2 views
1

Я собираюсь использовать сетку. он содержит флажок для каждой строки.Как я могу использовать ввод в виде сетки?

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

Теперь Как я могу указать проверочные строки ID в моем действии?

Есть ли у вас идеи?

Спасибо.

+0

Какой король сетки вы используете ...? jqgrid? DataTables? raw html table ...? – AminSaghi

+0

Я использовал raw html table. – Mehdi

ответ

0

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

1

OK. Мы предполагаем, что вы хотите получить список продуктов и показать их в сырой сетке html.

Прежде всего, организовать ваш взгляд, как это:

@model IEnumerable<MyPrj.Product> 
// ... Other codes ... 
<table id="tblGrid"> 
    <tr> 
     <th>Delete</th> 
     <th>ProductName</th> 
     // ... Other Properties ... 
    </tr> 
    @foreach(var item in Model) 
    { 
     <tr id="[email protected](item.ProductID)"> 
      <td> 
       @Html.Raw("<input type='checkbox' id='[email protected](item.ProductID)' onclick='chkChange(@chkID)' />");   
      </td> 
      <td>@item.ProductName</td> 
      // ... Other Properties ... 
     </tr> 
    } 
</table> 

<input type="button" id="btnDelete" value="Delete Selected Rows" onclick="performDelete()"/> 

Теперь у вас есть мнение, и это сделает сетку для вас с помощью прилагаемой модели. Затем вам нужно добавить некоторые javascript и jquery-коды для выполнения удаления строки для вас.

Функция для обработки флажка щелкает:

<script> 
    function chkChange(id) { 
     if ($(id).val() != 'false') 
      $(id).val('false'); 
     else 
      $(id).val('true'); 
    } 

    // ... 
</script> 

И, наконец, функция для обработки удаления щелчков кнопки:

function performDelete() { 
    var rows = $("input:checked"); 
    rows.each(function() { 
     $(this).parent().parent().remove(); 
    }); 
} 

Вот оно! - Все готово. Полный блог <script> выглядит следующим образом:

<script> 
    function chkChange(id) { 
     if ($(id).val() != 'false') 
      $(id).val('false'); 
     else 
      $(id).val('true'); 
    } 

    function performDelete() { 
     var rows = $("input:checked"); 
     rows.each(function() { 
      $(this).parent().parent().remove(); 
     }); 
    } 
</script>