jquery模板构建网格

【问题标题】：jquery template building gridjquery模板构建网格
【发布时间】：2012-02-16 14:58:39
【问题描述】：

我有下面这样的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          ...
.....

【问题讨论】：

  • 你使用的是哪个 jquery 模板插件？

标签： jquery jquery-templates


【解决方案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));
});

解决方案

在我给你代码之前，这里是你的结果应该是什么样子的屏幕截图。

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

正如所承诺的，这里是生成上述屏幕截图的所有代码。 我将从 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 模板实现了它。
猜你喜欢
  • 2013-02-27
  • 1970-01-01
  • 1970-01-01
  • 2011-06-30
  • 2013-08-31
  • 1970-01-01
  • 1970-01-01
  • 2011-05-10
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode