JSON到HTML表的对象列表？答案

【问题标题】：List of objects to JSON to Html Table?JSON到HTML表的对象列表？
【发布时间】：2011-02-02 04:28:22
【问题描述】：

如果我有一个对象列表

IEnumerable<MyType> myTypes;

我是否可以将其作为 JSON 返回给客户端

return Json(myTypes);

如果是这样，当它到达客户端时，我是否可以将此（现在是 JSON 格式）列表转换为 <table>？

有没有 jQuery 插件可以做到这一点？

问题是，我还需要以 JSON 格式发送大量其他内容，因此生成带有 PartialView 的表并将其嵌入 JSON 是我希望避免的额外复杂性。

【问题讨论】：

标签： jquery json asp.net-mvc html-table

【解决方案1】：

我想出了自己的解决方案来解决类似的问题，我希望能够将任何 JSON 对象数组响应显示到一个漂亮的表格中，而无需在 JavaScript 中硬编码任何东西，这样它就可以重用了！

这就是我所做的......

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "DemoSvc.asmx/GetJSONTableContents",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}",
            success: function(res) {
                $('#<%= DynamicGridLoading.ClientID %>').hide();
                $('#<%= DynamicGrid.ClientID %>').append(CreateDynamicTable(res.d)).fadeIn();
            }
        });
    });
</script>

这是将数据从 Web 服务拉到页面，此代码的重要部分是调用“CreateDynamicTable()”，它将 JSON 对象数组转换为漂亮的 HTML 表。下面是代码，输出是一个漂亮的 HTML 表格。

function CreateDynamicTable(objArray) {
  var array = JSON.parse(objArray);

  var str = '<table class="lightPro">';
  str += '<tr>';
  for (var index in array[0]) {
    str += '<th scope="col">' + index + '</th>';
  }
  str += '</tr>';
  str += '<tbody>';
  for (var i = 0; i < array.length; i++) {
    str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
    for (var index in array[i]) {
      str += '<td>' + array[i][index] + '</td>';
    }
    str += '</tr>';
  }
  str += '</tbody>'
  str += '</table>';
  return str;
}

我还寻找免费的东西来执行此操作，但我发现的所有内容都是商业或需要硬编码列值。我写了一篇简短的博客文章，其中包含更多细节、屏幕截图和一个简单的 VS 2008 演示。总的来说，它非常适合我的需要。

Blog Article on JSON data to HTML Table

【讨论】：

【解决方案2】：

确切地说，它不是 HTML 表格，但我使用 jqGrid 和 Craig Stuntz 的 helper functions 将任何 IQueryable<T>“导出”为 JSON。辅助函数ToJqGridData 发送的 JSON 格式与 jqGrid 要求的格式完全相同，因此您的代码既美观又整洁：

MyObjectRepository rep = new MyObjectRepository();
var myObjects = from o in rep.SelectAll()
                select new 
                {
                    Prop1 = o.Prop1,
                    Prop2 = o.Prop2
                    ...
                }
return Json(apps.ToJqGridData(page, rows, sidx, null, null), JsonRequestBehavior.AllowGet);

请注意，您还需要更新 jqGrids 的全局设置，以使其与 ToJqGridData 使用的命名约定兼容（我只是将此脚本包含在我的母版页中）：

$(document).ready(function() {
    GridDemo.SiteMaster.setDefaults();
});

var GridDemo = {
    Home: {
        GridDemo: {}
    },
    SiteMaster: {
        setDefaults: function() {
            $.jgrid.defaults = $.extend($.jgrid.defaults, {
                datatype: 'json',
                height: 'auto',
                imgpath: '/Scripts/jqGrid/themes/lightness/images',
                jsonReader: {
                    root: "Rows",
                    page: "Page",
                    total: "Total",
                    records: "Records",
                    repeatitems: false,
                    userdata: "UserData",
                    id: "Id"
                },
                loadui: "block",
                mtype: 'GET',
                multiboxonly: true,
                rowNum: 20,
                rowList: [10, 20, 50],
                viewrecords: true
            });
        }
    }
};

【讨论】：

@Dave，谢谢，但是 jqGrid 已经不再是商业版了……这对我来说是一种排除。
好吧，废话，完全错过了。这是否意味着绝对没有像样的开源网格？
是的，也是最近才出现的。不过，我不知道任何其他开源网格。希望自从 jqGrid 成立以来，一个新的公司将会开始。