引导数据表 JSON 类解析

Question

bootstrap datatable plugin 有问题我的班级看起来像这样：

型号

public class Class1 {
  public string EmployeeID { get; set; }
  public string FirstName { get; set; }
  public Position Position { get; set; }

  public Class1 GetEmployees()
 {
  return this;
 }
}

public class Position {
  public string PositionID { get; set; }
  public string PositionName { get; set; }
//Other functions below
}

控制器

public JsonResult GetEmployees()
{
 return Json(new Class1().GetEmployees(), JsonRequestBehavior.AllowGet);
}

HTML

   <table id="tblLeaveCredits"
    data-url="/Employees/GetEmployees" 
    data-toggle="table" 
    data-search="true"
    data-click-to-select="true"
    data-select-item-name="rdoSelectedItem"
    data-cache="false">
     <thead>
      <tr>
       <th data-field="state" data-radio="true"></th>
       <th data-field="FirstName" data-sortable="true">Description</th>
       <th data-field="Position.PositionName" data-sortable="true">Available</th>
      </tr>
     </thead>
   </table>

我的问题是，如何从 Json 返回中获取 Position 类的数据并将其显示为数据表中的字段？

Answer 1

如上所述，数据表插件似乎没有将嵌套的 json 对象数组绑定到表的选项。所以我使用客户端方法来展平嵌套的 json 对象数组，以便能够将其绑定到数据表。见my demo to bind a nested object to the datatable：

$(function () {
    // apply flattenJson to every item in the array and return a new array
    // using jQuery.map
    flattenedData = jQuery.map( data, function(d){ return flattenJson(d) });
    // bind the now unnested array to the datatable
    $('#table').bootstrapTable({
        data: flattenedData
    });
    console.log(flattenedData);
});

给定这个嵌套的 json 对象数组：

var data = [
    {
        "EmployeeID": "123",
        "FirstName": "Marc",
        "Position": {"PositionID": 1, "PositionName": "Supermarket"}
    },
    {
        "EmployeeID": "456",
        "FirstName": "Scott",
        "Position": {"PositionID": 2, "PositionName": "Googleplex"}
    },
    {
        "EmployeeID": "789",
        "FirstName": "John",
        "Position": {"PositionID": 3, "PositionName": "SanFran"}
    }    
];

为了展平嵌套的 json 对象，我使用了code from this answer：

function flattenJson(data) {
    var result = {};
    function recurse (cur, prop) {
        if (Object(cur) !== cur) {
            result[prop] = cur;
        } else if (Array.isArray(cur)) {
             for(var i=0, l=cur.length; i<l; i++)
                 recurse(cur[i], prop + "[" + i + "]");
            if (l == 0)
                result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop+"."+p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
}

要绑定现在未嵌套的对象，您可以使用此 html

<table id="table">
    <thead>
    <tr>
        <th data-field="EmployeeID">ID</th>
        <th data-field="FirstName">Firstname</th>
        <th data-field="Position.PositionID">PositionID</th>        
        <th data-field="Position.PositionName">PositionName</th>        
    </tr>
    </thead>
</table>

就是这样see the fully working demo to bind a nested object to the datatable