您的位置:首页 > Web前端 > JavaScript

根据JSON数据,自动生成Table

2016-11-08 09:22 465 查看
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);
};


下载
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: