基于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
基于jquery的json转table插件jsontotable的更多相关文章
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jQuery图片元素网格布局插件
基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览 源码下载 实现的代码. html代码: <c ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
- 基于jquery的提示框JavaScript 插件,类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- 基于Jquery+Ajax+Json+高效分页
摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
随机推荐
- 腾讯云-搭建 .NET Core 开发环境
搭建 .NET Core 开发环境 安装 .Net Core 执行代码 任务时间:时间未知 .NET Core 的官方文档很详细,本实验带你建立一个.NET Core 1.1的Web运行环境,更多内容 ...
- jsp引入js文件
转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...
- jsp中获取当前项目名称
在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...
- NYOJ----次方求模
次方求模 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 求a的b次方对c取余的值 输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一 ...
- LINUX创建本地yum源
.创建一个文件夹,把光盘中所有的RPM安装包都拷贝进来 # mkdir /rpms_yum .把光盘上的RPM包全部复制到rpms_yum中 # cd /mnt/cdrom/Packages/ # c ...
- FA_固定资产六大业务增加、修改、报废、在建、折旧、盘点概述(概念)
2014-06-04 Created By BaoXinjian
- Spring +quartz获取ApplicationContext上下文
job存在数据库中,能够进行动态的增增删改查,近期遇到了怎样获取ApplicationContext上下文的问题.解决的方法例如以下 applicationContext-quartz.xml < ...
- DNS与NS、NS记录
DNS:人们习惯记忆域名,但机器间互相只认IP地址,域名与IP地址之间是一一对应的,它们之间的转换工作称为域名解析,域名解析需要由专门的域名解析服务器来完成,整个过程是自动进行的. 当你的网站制作完成 ...
- Python文件遍历二种方法
分享下有关Python文件遍历的两种方法,使用的OS模块的os.walk和os.listdir实现. 关于Python的文件遍历,大概有两种方法,一种是较为便利的os.walk(),还有一种是利用os ...
- FPGA Prototyping By Verilog Examples第五章 状态机FSM设计
上升沿检测电路之Moore型FSM // Listing 5.3module edge_detect_moore ( input wire clk, reset, input wire level, ...