0

我在 MVC3 中使用 JQuery DataTable 来显示用户列表。我正在打开一个用于编辑数据的 JQuery 对话框，但在对话框中，第一行的数据仅针对所有行显示。

以下是我的观点：

@model IEnumerable<EditorDataTable.Models.UserModel>
@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
 }
 <div id="mypopup" style="display:none;">
 <label id="lblFirstName">FirstName</label>
 <br />
 <input type="text" id="txtFirstName" name="txtFirstName" />
 <br />
 <label id="lblLastName">LastName</label>
 <br />
 <input type="text" id="txtLastName" name="txtLastName" />
  <br />
 <label id="lblCity">City</label>
 <br />
 <input type="text" id="txtCity" name="txtCity" />
 <br />
 <input type="submit" id="btnUpdate" value="Update" />
 </div>
<table id="example" class="display">
<thead>
<tr>
    <th>
        FirstName
    </th>
    <th>
        LastName
    </th>
    <th>
        City
    </th>     
    <th>
        Action
    </th>
</tr>  
</thead> 
<tbody>
@foreach (var item in Model) {
<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>     
    <td class="click">
         @Html.HiddenFor(modelItem => item.UserID,"Value")
        <a href="#" id="edit">Edit</a>         
    </td>
</tr>
}
</tbody>
</table>

下面是我的jQuery：

  $(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    var UserId = $("#item_UserID").val();
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: UserId },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data) {
                $("#txtFirstName").val(data.aaData[0][0]);
                $("#txtLastName").val(data.aaData[0][1]);
                $("#txtCity").val(data.aaData[0][2]);
            }               
        }
    });      
});
});

我采用了一个隐藏字段来存储我的用户 ID，我使用它来获取我的用户数据，但每次我只获取第一行的用户 ID。

4

2 回答 2

1

ID 必须是唯一的。请参阅： ID 在整个页面中是否必须是唯一的？

但是有一种更好的方法来做你想做的事情：

1) 在 <tr> 中包含唯一 ID，因此您最终会得到类似：<tr id="id123">。使用至少一个字母字符作为用户 ID 的前缀，例如“id”或任何您想要的。那是因为您不希望 HTML ID 是数字（例如 id="12356"）。ID 应以字符开头。

2) 在表格的行上添加一个 click 或 dblclick 处理程序，例如：

  $(document).on("click", "#example tbody tr", 
         function () { editUser(this.id.substring(2)); } );

注意 substring(2) 去掉了前面的“id”文本，所以只剩下实际的用户 ID。

3）在editUser函数中使用这个值：

function editUser(id)
{
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: id },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data) {
                $("#txtFirstName").val(data.aaData[0][0]);
                $("#txtLastName").val(data.aaData[0][1]);
                $("#txtCity").val(data.aaData[0][2]);
            }               
        }
    });      
});

这是一个简单的小提琴： http: //jsfiddle.net/95jB5/ 单击一行，它将显示用户 ID。

于 2013-09-02T15:25:50.613 回答
0

我没有采用隐藏变量，而是将 id 分配给了我的td，如下所示：

<tbody>
@foreach (var item in Model) {

<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>    
    <td class="click" id="@item.UserID">           
        <a href="#" id="edit">Edit</a>        
    </td>
</tr>
}
</tbody>

在单击编辑时，我正在使用此 ID 在我的 js 中获取如下数据：

$(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
$("#txtFirstName").val("");
$("#txtLastName").val("");
$("#txtCity").val("");        
var UserId = this.id;
$("#mypopup").dialog();
$.ajax({
    type: "GET",
    url: "Home/EditData",
    data: { UserId: UserId },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        if (data) {
            $("#txtFirstName").val(data.aaData[0][0]);
            $("#txtLastName").val(data.aaData[0][1]);
            $("#txtCity").val(data.aaData[0][2]);
        }               
    }
  });      
});
});

它现在正在工作，对于每一行，我只获取该行的 id。

于 2013-09-03T07:10:38.570 回答