0

我在 MVC 3 中使用 Telerik 网格，我有一个包含一些列的网格，每行都有一个复选框。在提交 Ok 按钮时，我希望从选中复选框的行中获取网格的所有数据。我想将每列的记录存储在一个单独的数组中。我想使用 jquery 来做到这一点。

我该怎么办？

我做了这样的事情来计算网格中选中的复选框的数量：

function getData() {
    debugger;
    var Records = $(':checked');
    var checkedRecords = Records.length - 2;
    if (checkedRecords < 1) {
        alert('Check a few checkboxes first.');
        return checkedRecords;
    }
    else {
        alert("RecordsChecked: " + checkedRecords);
    }
}

getData()是一个将在单击确定按钮时调用的函数。

请给我一些建议...

这是我的 Telerik 网格代码：

<% Html.Telerik().Grid<Model>()
        .Name("TelerikGrid")
        .ToolBar(toolbar => toolbar.Template(
                            Html.Resource("Grid")))
                             .DataKeys(keys =>
                             {
                                 keys.Add(o => o.EmployeeID);
                             })
            .Columns(columns =>
            {
                columns.Bound(m => m.EmployeeID)
                   .ClientTemplate("<input type='checkbox' name='Employee1' onclick='return function1(this);' id='Employee1' />")
                columns.Bound(m => m.EmpFName).Title("F Name").ReadOnly(true).Width(65);
                columns.Bound(m => m.EmpLName).Title("L Name").ReadOnly(true).Width(70);
                columns.Bound(m => m.Task).Title("Task")
                    .ClientTemplate("<div id='textbox1'><input type='textbox' name='Task' id='Task' disabled='disabled' new { style='width:55px'} value='<#=Task#>' /></div>").Width(53);
            })
            .DataBinding(databinding => databinding
                                    .Ajax()
                                    .Select("GetData", "Home”)
            )
        .Selectable()
        .Render();
    %>
4

1 回答 1

2

我不认为我们彼此了解。但我会给你一个与呈现为表格的 Telerik Grid 一起使用的答案。所以假设这是你的网格：

<table cellspacing="0"><colgroup>
<col style="width:45px">
<col style="width:100px"><col style="width:200px"><col><col style="width:120px"></colgroup><tbody>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10248</td><td>Paul Henriot</td><td>59 rue de l'Abbaye</td><td>07/04/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10249</td><td>Karin Josephs</td><td>Luisenstr. 48</td><td>07/05/1996</td></tr>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10250</td><td>Mario Pontes</td><td>Rua do Paço, 67</td><td>07/08/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10251</td><td>Mary Saveley</td><td>2, rue du Commerce</td><td>07/08/1996</td></tr>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10252</td><td>Pascale Cartrain</td><td>Boulevard Tirou, 255</td><td>07/09/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10253</td><td>Mario Pontes</td><td>Rua do Paço, 67</td><td>07/10/1996</td></tr>
</tbody></table>

因此，您的网格从左到右依次具有以下列：

  • 复选框 -第一列
  • id员工的-第二列
  • name员工的-第三列

现在回答你的问题：

在提交 Ok 按钮时，我希望从选中复选框的行中获取网格的所有数据

您可以调用一个函数，该函数将在 jquery 中构建您的数组对象，如下所示：

function readGrid() {
    var employees = [];

    $('[name="SelectedEmployee"]:checked').each(function() {
        var row = $(this).closest('tr');                                
        var emp = {
            // we start at 2 because the first one is the checkbox
            // also it would be easier if you have an id for each of the column
            // and do this row.find('#idCol') / row.find('#nameCol')
            id: row.find('td:nth-child(2)').text(),
            name: row.find('td:nth-child(3)').text(),
        };                
        employees.push(emp);
    });       
}
于 2013-04-30T08:46:22.470 回答