jquery - 使用 jQuery 对复杂对象使用 JSON 动态更新 html 表

Question

我对 JSON/jQuery 还很陌生。

我需要一些关于如何在客户端动态填充 Html 表的快速指导。我的表有固定的列，但行根据检索的数据动态增长。

假设我在服务器上有一个正在返回的 Web 方法 (GetActiveUsers)，假设有 n 个用户。 我正在使用这个sql:

select userId, Title,Surname,FirstName from Users where status=1

请给我示例代码

编辑

我在这篇文章 here 上有解决方案 谢谢大家

Answer 1

这是jQote jQuery javascript 模板引擎的完美应用。 您可以从这里获取它:http://aefxx.com/jquery-plugin/jqote .

作为示例，请考虑以下内容:

// Example of your json data ... an array of user objects
[{
    "Title": "Dr.",
    "Surname": "House",
    "Firstname": "Geronimo"
  },
  {
    "Title": "Mr.",
    "Surname": "Franklin",
    "Firstname": "Benjamin"
  }
]

现在这是您在 HTML(或您拥有的任何输出文件)中定义的模板:

<script type="text/html" id="template">
    <![CDATA[
        <tr>
            <td class="no"><%= j+1 %></td>
            <td class="title"><%= this.Title %></td>
            <td class="user"><%= this.Firstname + " " + this.Surname %></td>
        </tr>
    ]]>
</script>

所以，我们快完成了。让我们定义包含表并在 json 数据上调用 jQote 神奇地填满表格。

... your markup ...

<table id="users"></table>

... more markup ...

<script type="text/javascript">
    var jsondata = xxx // get your data somehow

    // Now call jQote on the template providing your json data
    $('#template').jqote(jsondata).appendTo($('#users'));
</script>

就这些了(这只是开始，jQote 比我在这里告诉你的要强大得多)。

希望您喜欢，尝试一下。

顺便说一句:使用作为模板的容器是完全合法的标记。并且浏览器在任何情况下都不会显示它。