基于jquery的json转table插件jsontotable

分享一款基于jquery的json转table插件jsontotable。效果图如下:

基于jquery的json转table插件jsontotable

在线预览   源码下载

实现的代码。

html代码:

 <div class="container">
<div id="jsontotable-arr" class="jsontotable">
</div>
<div id="jsontotable-obj" class="jsontotable">
</div>
<div id="jsontotable-objwithdata" class="jsontotable">
</div>
<div id="jsontotable-str" class="jsontotable">
</div>
</div>
<script type="text/javascript" src="http://www.w2bc.com/Scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jsontotable.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var arr = [
[1, 2, 3],
['one', 'two', 'three']
]; var input = JSON.stringify(arr);
$("#jsontotable-arr")
.append($("<h1></h1>").html("Array To Table"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(arr, { id: "#jsontotable-arr", header: true }); $("#jsontotable-arr")
.append($("<h1></h1>").html("Array To Table (Without Header)"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(arr, { id: "#jsontotable-arr", header: false }); var obj = [
{ "Title1": "Hello", "Title2": "Fine", "Title3": "Thank you" },
{ "Title1": "안녕하세요", "Title2": "좋아요", "Title3": "감사합니다" },
{ "Title1": "こんにちは", "Title2": "ファイン", "Title3": "ありがとう" },
{ "Title1": "你好", "Title2": "精", "Title3": "谢谢" },
{ "Title1": "Bonjour", "Title2": "Beaux", "Title3": "Merci" },
{ "Title1": "Ciao", "Title2": "Bene", "Title3": "Grazie" }
]; input = JSON.stringify(obj);
$("#jsontotable-obj")
.append($("<h1></h1>").html("JSON To Table (Has Header)"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(obj, { id: "#jsontotable-obj" }); $("#jsontotable-obj")
.append($("<h1></h1>").html("JSON To Table (Without Header)"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(obj, { id: "#jsontotable-obj", header: false }); var objwithdata = [
{ id: 'header', class: 'header-class', _data: ['Hello', 'Fine', 'Thank you'] },
{ "Title1": "안녕하세요", "Title2": "좋아요", "Title3": "감사합니다" },
{ "Title1": "こんにちは", "Title2": "ファイン", "Title3": "ありがとう" },
{ "Title1": "你好", "Title2": "精", "Title3": "谢谢" },
{ "Title1": "Bonjour", "Title2": "Beaux", "Title3": "Merci" },
{ "Title1": "Ciao", "Title2": "Bene", "Title3": "Grazie" }
]; input = JSON.stringify(objwithdata);
$("#jsontotable-objwithdata")
.append($("<h1></h1>").html("JSON To Table with _data attribute (Has Header)"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(objwithdata, { id: "#jsontotable-objwithdata" }); $("#jsontotable-objwithdata")
.append($("<h1></h1>").html("JSON To Table with _data attribute (Without Header)"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(objwithdata, { id: "#jsontotable-objwithdata", header: false }); var str = '[\
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "안녕하세요", "Title2": "좋아요", "Title3": "감사합니다"}, \
{"Title1": "こんにちは", "Title2": "ファイン", "Title3": "ありがとう"}, \
{"Title1": "你好", "Title2": "精", "Title3": "谢谢"}, \
{"Title1": "Bonjour", "Title2": "Beaux", "Title3": "Merci"}, \
{"Title1": "Ciao", "Title2": "Bene", "Title3": "Grazie"} \
]'; $("#jsontotable-str")
.append($("<h1></h1>").html("JSON (String Format) To Table"))
.append($("<h2></h2>").html("Input"))
.append($("<code></code>").html(input))
.append($("<h2></h2>").html("Output")); $.jsontotable(str, {
id: "#jsontotable-str",
className: "table table-hover"
});
});
</script>

via:http://www.w2bc.com/Article/34326

上一篇:ubuntu mysql 远程连接问题解决方法


下一篇:基尼系数(Gini coefficient),洛伦茨系数