Question

如果我有一个对象列表

IEnumerable<MyType> myTypes;

我是否可以将其作为JSON

返回给客户端

return Json(myTypes);

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

是否有任何jQuery插件可以执行此操作？

问题是，我需要发送大量其他东西作为JSON，因此生成一个带有PartialView的表并将其嵌入到JSON中是一个额外的复杂性，我想避免。

Answer 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

Answer 2

这不是一个HTML表格，但我使用jqGrid和Craig Stuntz的helper functions来“导出”任何IQueryable<T>作为JSON。辅助函数ToJqGridData以完全jqGrid所需的格式发送JSON，因此您的代码很好而且整洁：

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
            });
        }
    }
};

JSON到Html表的对象列表？

2 个答案: