将JSON转换为Html表的对象列表?
问题描述:
如果我有对象的列表将JSON转换为Html表的对象列表?
IEnumerable<MyType> myTypes;
是否有可能对我来说,返回给客户作为JSON
return Json(myTypes);
如果有的话,是有可能对我来说,转换这种(现JSON格式)列表到<table>
当它到达客户端?
是否有任何jQuery插件来做到这一点?
事情是,我还需要将其他东西作为JSON发送,因此使用PartialView生成表并将其嵌入到JSON中是一个额外的复杂性,我希望避免。
答
我来到了我自己的一个类似的问题的解决方案,我希望能够显示任何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演示。总的来说,它适用于我所需要的。
答
这不是一张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
});
}
}
};
谢谢扎克瑞,这真是太棒了! – DaveDev 2010-04-02 09:39:12