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

下载