zoukankan      html  css  js  c++  java
  • 根据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=\"" + 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);
    };


    下载

    Top
    收藏
    关注
    评论
  • 相关阅读:
    leetcode203
    leetcode88
    leetcode219
    leetcode225
    2018-12-25-C#-使用转换语义版本号
    2018-12-25-C#-使用转换语义版本号
    2018-10-15-Winforms-可能遇到的-1000-个问题
    2018-10-15-Winforms-可能遇到的-1000-个问题
    2018-8-10-UWP-WPF-解决-xaml-设计显示异常
    2018-8-10-UWP-WPF-解决-xaml-设计显示异常
  • 原文地址:https://www.cnblogs.com/wangsu/p/jquery_dynamicTable.html
Copyright © 2011-2022 走看看