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

Question

我有一个员工表,我使用$.loadajax调用通过发回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
}

_EmployeeDetails查看

@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函数中显示模型中的额外数据(Contact),(Gender)

上面链接中给出的演示使用.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) {