jquery 模板构建网格

Question

我有像下面这样的 json

[
{
    "UserName": "John Robertson",
    "OperatorUserId": 1177,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 22,
    "CategoryWiseCount": 13,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [6, 1, 2, 0, 0, 0, 13, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "user1",
    "OperatorUserId": 39,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 13,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [1, 0, 3, 1, 1, 0, 0, 6, 1],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Margaret Graham",
    "OperatorUserId": 1169,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 2,
    "CategoryWiseCount": 2,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [2, 0, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Stuart White",
    "OperatorUserId": 961,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Bob van Schie",
    "OperatorUserId": 1007,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Caird Hay",
    "OperatorUserId": 1184,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "bsoni",
    "OperatorUserId": 2575,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 3,
    "CategoryWiseCount": 2,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 0, 0, 0, 1, 0, 2, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "tsname",
    "OperatorUserId": 2576,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 0, 0, 0, 0, 1, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}]

我想使用 jquery 模板查看网格中的数据。

John Robertson    User1    Margaret Graham ..... 
Base unit            6             1          ...
Hard Drive           1             0          ...
.....

Answer 1

说明

在开始之前，有几件事需要明确。

第一:
我假设"template"是指插件，因为 JQuery.template目前仍处于测试阶段，不建议使用。此外，它不会对你有太大帮助。

您可以通过 starting here 学习如何构建自己的插件，不过，我将向您提供一个完整的示例，说明如何完成此操作(下文)。

通常，当您想要与您的插件相关的元素时，它以

开头

(function($) {
    //Prototype
    $.fn.myPlugin = function(){
         //Logic
         $(this).append("Hello world!");
    }
})(JQuery);

$("#element").myPlugin();

否则，作为通过$访问的通用函数，它只是

(function($) {
    //Prototype
    $.myPlugin = function(){
         //Logic
         alert("Hello world!");
    }
})(JQuery);

$.myPlugin();

第二:
通过 AJAX 发送 JSON 时，您需要一个与 JSON 绑定(bind)的对象，而不是数组。 JSON 代表 JavaScript 对象表示法，因此即使只看名称，它也应该告诉您它与对象有关。
换句话说，您需要使用大括号 {} 发回一个对象。

所以，你的 JSON 应该是这样的

{
    data: ["Hello ", 
           "World", 
           "!", 
           {time: "HH:mm:ss", date: "yyyy-mm-dd"}
}

您可以在 wikipedia 上阅读有关内容的更多信息。 .

第三:
澄清一下，要在 AJAX 调用上请求 JSON 数据，您必须将 dataType 指定为 JSON。就这样完成了

$.ajax({
    url: "example_json_output.txt",
    dataType: "json",
    success: function(json){
        alert(JSON.stringify(json));
    }
});

请注意，我使用了函数 JSON.stringify ，它将变量序列化(将所有变量放入文本中)。非常适合调试目的! :)

或者，您可以使用简写版本 getJSON

$.getJSON("example_json_output.txt", function(json) {
    alert(JSON.stringify(json));
});

<小时/>

解决方案

在向您提供代码之前，请先看一下您的结果的屏幕截图。

当然，我并不是说你应该完全按照我的做法，事实上，我鼓励你采取不同的做法。熟能生巧。此外，这可能不是您想要的布局。

正如所 promise 的，这里是生成上述屏幕截图的所有代码。我将从 JavaScript 文件和 JSON 输出开始，因为它们是最相关的。请注意，所有文件都位于同一文件夹中。

文件:JavaScript“example.js”

$(document).ready(function(){
    $("body").myPlugin();
});

(function($) {
    $.fn.myPlugin = function(){
        //Internal reference
        var _this = this;

        //Begin request
        $.ajax({
            url: "example_json_output.txt",
            dataType: "json",
            success: Construct
        });

        function Construct(json){
            //Check if anything was returned
            if(json.data == null) return;

            //Main components
            var nMainContainer = $("<div>"),
                nListTable = $("<table>");

            nMainContainer.addClass("cMain");
            nListTable.addClass("cTable");
            nListTable.attr({"cellspacing":"0px", "cellpadding":"5px"})

            //Categories
            var aYHeaders = json.data[0].ListCategories;

            //Users row (top row)
            var nUserRow = $("<tr>");

            nUserRow.addClass("users");
            nUserRow.append($("<th>"));

            for(j = 0; j < json.data.length; j++){
                var nUser = $("<th>"),
                    sClass = "even";

                if(j % 2 == 0) sClass = "odd";

                nUser.addClass(sClass);
                nUser.append(json.data[j].UserName);

                nUserRow.append(nUser);
            }

            //Add users row to main table
            nListTable.append(nUserRow);

            //Begin iteration
            for(i = 0; i < aYHeaders.length; i++){
                //Category
                var nRow = $("<tr>"),
                    nHead = $("<th>"+aYHeaders[i]+"</th>"),
                    sRowClass = "even";

                //Check row number
                if( i % 2 == 0 ) sRowClass = "odd";

                nRow.addClass(sRowClass);

                //New category
                nRow.append(nHead);

                for(j = 0; j < json.data.length; j++){
                    //Data row from JSON
                    var oCurrentData = json.data[j];
                    var sUser = oCurrentData.UserName,
                        aListData = oCurrentData.ListCategorywiseCount,
                        sColumnClass = "even";
                    var nTableData = $("<td>");

                    //Check column number
                    if( j % 2 == 0 ) sColumnClass = "odd";
                    nTableData.addClass(sColumnClass);
                    nTableData.append(aListData[i]);

                    //Add data to current category row
                    nRow.append(nTableData);
                }
                //Add category row to main table
                nListTable.append(nRow);
            }

            //Add main table to container
            nMainContainer.append(nListTable);
            //Add container to this element
            $(_this).append(nMainContainer);
        }
    }
})(jQuery);

文件:文本文档“example_json_output.txt”

{"data": [
    {
        "UserName": "John Robertson",
        "OperatorUserId": 1177,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 22,
        "CategoryWiseCount": 13,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [6, 1, 2, 0, 0, 0, 13, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "user1",
        "OperatorUserId": 39,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 13,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [1, 0, 3, 1, 1, 0, 0, 6, 1],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Margaret Graham",
        "OperatorUserId": 1169,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 2,
        "CategoryWiseCount": 2,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [2, 0, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Stuart White",
        "OperatorUserId": 961,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Bob van Schie",
        "OperatorUserId": 1007,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Caird Hay",
        "OperatorUserId": 1184,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "bsoni",
        "OperatorUserId": 2575,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 3,
        "CategoryWiseCount": 2,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 0, 0, 0, 1, 0, 2, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "tsname",
        "OperatorUserId": 2576,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 0, 0, 0, 0, 1, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }
]}

文件:HTML“example.html”

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='example.css'>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
        <script type='text/javascript' src='example.js'></script>
    </head>
    <body>
    </body>
</html>

文件:CSS“example.css”

.cMain{padding: 5px;}
.cTable{border: 1px solid black;}

.cTable tr:first-child th{
    border-bottom: 1px solid black;
    text-align: center;
}

.cTable tr th:first-child{
    border-right: 1px solid black;
    text-align: right;
}

.cTable tr.odd td{background-color: #cbcbcb;}
.cTable tr.odd th{background-color: #b3b3b3;}
.cTable tr:first-child th.even{background-color: #accbe6;}
.cTable tr.even td.even{background-color: #cee1f2;}
.cTable tr.odd td.even{background-color: #a3c0d9;}
.cTable tr td{padding: 3px;}
.cTable tr:first-child th:first-child{background-color: #666;}
.cTable tr:first-child th:not(:first-child){width: 100px;}