分享一款基于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

基于jquery的json转table插件jsontotable的更多相关文章

  1. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  2. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. 基于jQuery图片元素网格布局插件

    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...

  5. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  6. 基于jquery的提示框JavaScript 插件,类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  7. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  8. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  9. 基于jquery二维码生成插件qrcode

    1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...

随机推荐

  1. (39)JS运动之缓冲运动

    基本思路:使用定时器让物体向右运动,在运动的过程中再不是匀速运动,而是先快后慢,即距离越大,速度越快,距离越小,速度越小,可是到达终点的时候,必须注意要使用向上取整函数Math.ceil()和向下取整 ...

  2. HDUOJ---2642Stars(二维树状数组)

    Stars Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/65536 K (Java/Others)Total Submi ...

  3. HDUOJ------Lovekey

    Lovekey Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  4. C#中的Invoke和BeginInvoke

    一.Control#Invoke() 和Control#BeginInvoke() 在非UI线程中调用MessageBox.Show()结果是非模态对话框: 在UI线程中调用MessageBox.Sh ...

  5. Web前端开发笔试&面试_02(others)

    AL>> 1.CSS 3 如何实现旋转图片? 答:transform : rotate 2.写CSS 的工具? 答:LESS.SASS 3.JavaScript 倒计时? 答:setTim ...

  6. C 应用

    前言 1)操作符两端必须加空格,(每行第一个赋值语句对齐). 2)变量名必须是英文(不能是拼音):英文.数字.下划线和美元符号. 3)等于号 == 反过来写(0 == i%4)防止少些赋值号的错误. ...

  7. Android 方向传感器

    一般情况下,在Android系统中获取手机的方位信息在api中有TYPE_ORIENTATION常量,可以像得到加速度传感器那样得到方向传感器sm.getDefaultSensor(Sensor.TY ...

  8. 当前上下文中不存在名称"Session"

    http://blog.csdn.net/muzai/article/details/8862902

  9. fcntl函数用法详解

    功能描述:根据文件描述词来操作文件的特性. #include <unistd.h> #include <fcntl.h>  int fcntl(int fd, int cmd) ...

  10. socket 请求接收完整的一个http响应(设置recv 接收超时选项SO_RCVTIMEO)

    在前面的系列网络编程文章中,我们都是使用socket 自己实现客户端和服务器端来互相发数据测试,现在尝试使用socket 客户端发 送http 请求给某个网站,然后接收网站的响应数据.http 协议参 ...