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

说明

在我们开始之前，有一些事情需要明确。

<强>首先
我假设通过“模板”你的意思是一个插件，因为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，而不是数组。 JSON代表JavaScript Object Notation，所以即使查看名称，也应该告诉你它与对象有关。
换句话说，您需要使用大括号{}发回一个对象。

所以，你的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));
});

解决方案

在我给你代码之前，这里是你的结果应该是什么样子的截图。 How the result should look like

当然，我并不是说你应该像我一样做，事实上，我鼓励你以不同的方式做。实践是完美的。此外，这可能不是你想要的那种布局。

正如所承诺的，这里是生成上述截图的所有代码。我将从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;}

jquery模板构建网格

1 个答案:

说明

解决方案