通过模型 MVC 加载时 dataTables 的隐藏详细信息选项

Question

我有一张员工表，我使用$.load ajax 调用通过发回partialview 如下所示：

模型类

public class EmployeeDetails
{
    public string FirstName{get;set;}
    public string LastName{get;set;}
    public string AccountStatus{get; set;}
    public string LastLogin{get;set;}
    public string EmailAddress{get;set;}
    public string Contact {get;set;}
    public string Gender {get;set;}
}

控制器中的PartialViewResult方法

public PartialViewResult GetEmployeeDetails()
{
    List<EmployeeDetails> model=new List<EmployeeDetails>();
    using(var context=new ContextConnection())
    {
        var employees=(from e in context.tbl_employees select e).ToList();
        foreach(var employee in employees) //Fill the model
        {
            model.add(new EmployeeDetails(){
                 FirstName=employee.fname,
                 LastName=employee.lname,
                 AccountStatus=employee.acc_status,
                 LastLogin=employee.last_login,
                 EmailAddress=employee.email,
                 Contact=employee.contact,
                 Gender=employee.gender
            });
        }
    }
    return PartialView("_EmployeeDetails",model) //passing model back
}

_员工详情视图

@model IEnumerable<ProjectName.Models.EmployeeDetails>

<table id="employee" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Full Name</th>
                <th>Account Status</th>
                <th>Last Login</th>
                <th>Email Address</th>
            </tr>
        </thead>
        <tbody>
        @foreach(var emp in Model)
        {
            <tr>
                <td></td>
                <td>@emp.FirstName + " " + @emp.LastName</td>
                <td>@emp.AccountStatus</td>
                <td>@emp.LastLogin</td>
                <td>@emp.EmailAddress</td>
            </tr>
         }
         </tbody>
</table>

来自 this link 我能够实现链接中给出的UI

var table; //global variable
$('.loadEmployee').on('click',function(){
   $("#loadBody").load("/Admin/GetEmployeeDetails",function(){
         table=$("#employee").dataTable({
               "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "Full Name" },
                { "data": "Account Status" },
                { "data": "Last Login" },
                { "data": "Email Address" }
                ],
                "order": [[1, 'asc']]
         });
   }
})

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d["Full Name"]+'</td>'+ //this is fine
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d["Contact Details"]+'</td>'+ //Need to get Contact here
        '</tr>'+
        '<tr>'+
            '<td>Gender:</td>'+
            '<td>d["Gender"]</td>'+ //Need to get Gender here
        '</tr>'+
    '</table>';
}

// Add event listener for opening and closing details
$('#employee tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
 });

我的问题是：

我的模型填充了所有数据，但是如何在format 函数中显示模型中的额外数据（联系人）、（性别）

上面链接中给出的演示使用.txt 文件来提取数据，但没有提到如何根据我的上述场景使用model 数据执行此操作。 + 链接和 - 链接工作正常，但 Contact 和 Gender 的模型值未显示。我正在考虑的一种情况是将所有这些作为tds 添加到foreach 中并隐藏它们，以便我可以获取列值，因为我现在正在获取显示的数据。但是当有大量的列要显示时，这会很重。非常感谢您对此的任何想法/提示。

Answer 1

一种选择是将“额外”值添加为表格行中的data-* 属性。

@foreach(var emp in Model)
{
  <tr data-contact="emp.contact" data-gender="emp.Gender">
    ....
  </tr>
}

然后在按钮单击事件中提取它们并将这些值传递给format() 函数

$('#employee tbody').on('click', 'td.details-control', function () {
  var tr = $(this).closest('tr');
  var contact = tr.data('contact');
  var gender = tr.data('gender');
  // you could also add the following as an option to using the row data
  var fullName = tr.children('td').eq(1).text();
  var row = table.row( tr );
  if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(format(row.data(), contact, gender)).show();
    // or row.child(format(fullName, contact, gender)).show();
    tr.addClass('shown');
  }
});

然后更改format()函数以接受附加参数

function format(d, contact, gender) {