根据JSON数据,自动生成Table

不好意思,献丑了,好久没有发文章了.

jquery扩展
根据JSON数据,自动生成简单的Html Table.

 

因为项目要求,所以写了这个示例.顺便放到博客上来!

复制代码
jQuery.fn.MakeTable = function (objColumn, objData, objClassName, RowClick) {

//样式
$(this).attr("class", objClassName);

var sHtml = "";
sHtml += "<thead>";

var sTrHtml = "<tr>";
$.each(objColumn, function (i) {

sTrHtml += "<th ";
sTrHtml += "style=\"width:" + objColumn[i].Width.toString() + "px\"";
sTrHtml += ">";
sTrHtml += objColumn[i].ColumnName;
sTrHtml += "</th>";

});
sTrHtml += "</tr>";
sHtml += sTrHtml + "</thead>";

sHtml += "<tbody>";

$.each(objData, function (i) {
sTrHtml = "<tr";

if (RowClick != null && RowClick != undefined) {
//alert(RowClick);
sTrHtml += " onclick=\"CheckRow(this," + RowClick + ")\"";
}

sTrHtml += ">";
var objTr = objData[i];
for (x in objTr) {
sTrHtml += "<td style=\"";

var objLinqData = jLinq.from(objColumn).equals("DataId", x).take()[0];
sTrHtml += "text-align:" + objLinqData.DataAlign + ";";
sTrHtml += "\" ";
if (objLinqData.OnClick != null) {
sTrHtml += " onclick=\"" + objLinqData.OnClick + "\"";
}

sTrHtml += ">";
if (objLinqData.Format != null) {
sTrHtml += objLinqData.Format(objTr[x]);
}
else {
sTrHtml += objTr[x];
}

sTrHtml += "</td>";
//alert(x);
}
// sTrHtml += objData[i].
sTrHtml += "</tr>";
sHtml += sTrHtml;
});

sHtml += "</tbody>";
//alert(sHtml);
// $("#" + sId + " > tbody:last").append(sTrHtml);
var sId = this[0].id;
$("#" + sId).append(sHtml);
};
复制代码


下载

posted @   riancy  阅读(13129)  评论(3编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示