Html -- json 格式化顯示

1、html 文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                height: 600px;
                width: 800px;
                border: 1px solid #ccc;
                padding: 10px 0px 0px 25px;
            }
        </style>
        <script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="plugins/json-viewer/css/jquery.json-viewer.css"/>
        <script src="plugins/json-viewer/js/jquery.json-viewer.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="box"></div>
    </body>
    <script type="text/javascript">
        var json = {
          "customTotal": "10",
          "customPage": "1",
          "customRecords": "20",
          "customUserdata": {
            "username": "admin",
            "password": "admin"
          },
          "customRows" : [
            {"customId" :"111", "name": "Bob", "phone": "232-532-6268", "addres":"address 1", "sort": 10},
            {"customId" :"222", "name": "Jeff", "phone": "365-267-8325", "addres":"address 2", "sort": 20}  
          ]
        }
        $("#box").jsonViewer(json, {});
    </script>
</html>

 

發佈了100 篇原創文章 · 獲贊 20 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章