自己写了一个解析json为table的工具类
还需要完善的包括，css的封装，触发事件，数据的获得处理：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style> </style>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script>
var getColumns = [{
title: '商品代码',
field: 'PARTCODE',
hide: true
}, {
title: '品名',
field: 'PARTNAME',
hide: true
}, {
title: '名牌',
field: 'BRAND',
hide: true
}, {
title: '出库设备',
field: 'EQUIPNAME'
}, {
title: '规格',
field: 'FORMAT'
}, {
title: '工厂',
field: 'FACTORY',
hide: true
}]; //json字符串数组
var dataArr = [{
"FACTORY": "BTSL1",
"PARTCODE": "p1",
"PARTNAME": "f1",
"FORMAT": "b1",
"BRAND": "pa",
"PLACE": "fangzhi",
"OUTNUMBERS": "12",
"OUTTIME": "20171212",
"WARENAME": "c1",
"EQUIPNAME": "as",
"CLASSNAME": "1",
"OUTUSE": "定期更换"
},
{
"FACTORY": "BTSL2",
"PARTCODE": "p1",
"PARTNAME": "f12",
"FORMAT": "的",
"BRAND": "名称",
"PLACE": "防止",
"OUTNUMBERS": "12",
"OUTTIME": "20161216",
"WARENAME": "c1",
"EQUIPNAME": "as",
"CLASSNAME": "1",
"OUTUSE": "损坏更换"
},
{
"FACTORY": "BTSL12",
"PARTCODE": "p2",
"PARTNAME": "f12",
"FORMAT": "b12",
"BRAND": "怕",
"PLACE": "102",
"OUTNUMBERS": "12",
"OUTTIME": "20151216",
"WARENAME": "c1",
"EQUIPNAME": "as",
"CLASSNAME": "1",
"OUTUSE": "出库玩一玩"
}
];
//根据key值获取对应的value
function getValue(jsonObj, key) {
return jsonObj[key];
} function getData() {
//定义标题数组
var tilteArr = new Array();
//定义数据数组
var fieldArr = new Array();
//是否隐藏数组
var hideArr = new Array();
//遍历给定的数组抽出标题和字段
for(var j = 0; j < getColumns.length; j++) {
tilteArr[j] = getColumns[j].title;
fieldArr[j] = getColumns[j].field;
hideArr[j] = getColumns[j].hide;
} //动态设置table的位位置
//先获得参照物的位子
var X = $('#id').offset().top;
var Y = $('#id').offset().left;
$("#tab").css({
position: "absolute",
'top': X + 20,
'left': Y,
'z-index': 2,
'display': 'block'
}); //将json字符串数组解析为
//<tr><td></td></tr>的格式
var html = "";
//初始化标题行
html += "<tr>";
for(var j = 0; j < tilteArr.length; j++) {
if(hideArr[j]) {
html += "<td style='display:none;'>" + tilteArr[j] + "</td>";
} else {
html += "<td>" + tilteArr[j] + "</td>";
} }
html += "</tr>";
//初始化数据行
for(var i = 0; i < dataArr.length; i++) { html += "<tr>";
//遍历列
for(var j = 0; j < fieldArr.length; j++) {
if(hideArr[j]) {
html += "<td style='display:none;'>" + getValue(dataArr[i], fieldArr[j]) + "</td>";
} else {
html += "<td>" + getValue(dataArr[i], fieldArr[j]) + "</td>";
} }
html += "</tr>";
}
//先找到文本的元素
//删除table的所有行
$("#tab tr").remove();
//将htmlStr添加到标题行后面
$("#tab").append(html);
//为table添加样式
//给class为stripe的表格的偶数行添加class值为odd
//$("#tab tr:even").addClass("myred");
//给class为stripe的表格的奇数行添加class值为alt
//$("#tab tr:odd").addClass("mygreen"); text-align:center $("#tab tr:even").css("backgroundColor", "lightskyblue");
$("#tab tr:odd").css("backgroundColor", "gainsboro");
$("#tab tr td").css("text-align", "center");
$("#tab tr td").css("margin;", "9");
$("table tr:eq(0) td").each(function() {
$(this).css("font-weight", "bold");
});
//动态为table的td添加双击事件
$("#tab tr td").dblclick(function() {
//$("#id").val($(this).html()); //$("#table1 tr:eq(1) td:nth-child(1)").html();
//$("#id").val($("this:nth-child(1)").html()); var wid = $(this).parents("tr").children(0).html();
//alert(wid);
$("#id").val(wid);
$("#tab").hide();
}); }
</script>
</head> <body> <input id="id" class="a" type="text" onkeyup="getData()" />
<table id="tab" style="position: absolute;display: none;" cellspacing="0"></table>
<p>zheshi yige </p>
<br />
<br />
<br />
<br />
<br />
<input type="button" /> www.baidu.com
</body> </html>
自己写了一个解析json为table的工具类的更多相关文章
- TypeToken 是google提供的一个解析Json数据的类库中一个类
Type listType = new TypeToken<LinkedList<User>>(){}.getType(); Type是java里的reflect包的Type ...
- 用angularjs写的一个简单的grid table
效果图 用到的工具 1.需要先安装nodejs打开直接安装就好了 2.安装完成后使用 淘宝的源 国内速度快 安装方法 npm install -g cnpm --registry=https://re ...
- WP8解析JSON格式（使用DataContractJsonSerializer类）（推荐）
DataContractJsonSerializer是.NET自带的类,在解析JSON格式的时候使用起来方便快捷,至于生成方面由于暂时没用到就没去看了.使用需要引用System.Runtime.Ser ...
- JSON转换的原创工具类
进来在项目中总是遇到ArrayList线性表需要转化成JSONArray的场景,或者Java对象和JSON字符串之间的转化问题,于是乎自己写了一个粗糙的工具类,经过初步的测试,暂时还未发现什么bug, ...
- json数据与Gson工具类的使用
JS中使用JSON JSON对象 --> JSON字符串:JSON.stringify(对象) JSON字符串 --> JSON对象:JSON.parse(JSON字符串) <scr ...
- C# Json 序列化和反序列化 工具类 Newtonsoft.Json.dll
引用: Newtonsoft.Json.dll // 引用: using Newtonsoft.Json; using Newtonsoft.Json.Converters; // 定义 实体测试类 ...
- Jackson 对象与json数据互转工具类JacksonUtil
1,User对象 package com.st.json; import java.util.Date; /** * @Description: JSON序列化和反序列化使用的User类 * @aut ...
- json转字符串，json转list，json转pojo的工具类
package com.loveshop.util; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingEx ...
- 一个解析json串并组装echarts的option的函数解析
缘起: 在组装echart页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...
随机推荐
- 日常英语---十三、MapleStory/Monsters/Level 11-20（邪恶之眼）
日常英语---十三.MapleStory/Monsters/Level 11-20(邪恶之眼) 一.总结 一句话总结: evil ['ivl] A stronger version of Evil E ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- 用basicTrendline画一元线性回归直线的置信区间
感慨统计学都还给老师了..恶补! R安装包的时候貌似需要用管理员权限启动,否则安装不了,国内镜像卡得渣渣,还是国外镜像真香~选择hongkong就好了. install.packages(" ...
- Linux 各种软件的安装-Jenkins和svn结合
通常情况下,修改代码,打包,上传,发布,这么个顺序发布程序. 有了Jenkins这些重复性的操作可以统统交给程序自动处理.甚至可以指定发布的时机,例如提交一次svn就自动发布,每天定时发布等. 1:安 ...
- js提取对象的key值和value值
在代码中,遇到需要单独提取对象的key值时 可使用 Object.keys(object) object是你需要操作的对象 Object.keys()会返回一个存储对象中所有key值的数组 获取当前 ...
- LeetCode--401--二进制手表
问题描述: 二进制手表顶部有 4 个 LED 代表小时(0-11),底部的 6 个 LED 代表分钟(0-59). 每个 LED 代表一个 0 或 1,最低位在右侧. 例如,上面的二进制手表读取 “3 ...
- liunx进程管理之进程介绍
关于进程 process ====================================================================================Wha ...
- CF-721C DAG图拓扑排序+费用DP
比赛的时候写了个记忆化搜索,超时了. 后来学习了一下,这种题目应该用拓扑排序+DP来做. dp[][]保存走到[第i个节点][走过j个点]时所用的最短时间. pre[][]用前驱节点求路径 然后遍历一 ...
- 日期在Linux与Windows下的区别
最近遇到了这个问题,就是相同的代码在Windows与Linux下的日期转换不一致. 原因:时区问题,主要是操作系统与JVM中的时区不同导致的 在网上查了很多处理的方法:最后总结出一条简单粗暴的方法:原 ...
- windows下如何通过git bash获取gitlab ssh公钥
Gitlab1. 安装git,从程序目录打开 "Git Bash" 2. 键入命令:ssh-keygen -t rsa -C "email@email.com" ...