Question

我在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]);
            }               
        }
    });      
});
});

我已经在一个隐藏字段中存储了我的UserID，使用该字段我将获取用户数据，但每次我只获取第一行的UserId时。

Answer 1

ID必须是唯一的。请参阅：Does ID have to be unique in the whole page?

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

1）在＆lt; tr＆gt;中包含唯一ID，因此您最终得到类似：＆lt; tr id =“id123”＆gt;。在用户ID前面添加至少一个字母字符，例如“id”或任何您想要的字符。那是因为你不希望HTML ID是一个数字（比如id =“12356”）。 ID应以字符开头。

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

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

请注意，子字符串（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。

Answer 2

我没有使用隐藏变量，而是将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。

在JQuery弹出窗口中编辑数据时，仅显示所有行的第一行数据

2 个答案: