根据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 += " οnclick=\"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 += " οnclick=\"" + 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);
        };

下载

转载于:https://www.cnblogs.com/wangsu/archive/2012/02/07/jquery_dynamicTable.html