自己写了一个解析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页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...
随机推荐
- css无定宽水平居中
转载:http://www.cnblogs.com/jogen/p/5213566.html 这个博客的菜单ui还是棒棒的. 方法一 思路:显示设置父元素为:table,子元素为:cell-table ...
- (8)进程---Queue队列
# IPC Inter-Process Communication # 实现进程之间通信的两种机制: # 管道 Pipe 用的很少 # 队列 Queue 队列的特征:现进先出,栈属于后进后出 基本语法 ...
- [转] @JoinColumn 详解 （javax.persistence.JoinColumn）
原文链接:@JoinColumn详解 原文标的也是转载,但是没有注明原文链接,看起来乱乱的,所以整理一下转载过来,顺便细看一下 1. 一对一 现假设有Person表和Address表,是一对一的关系 ...
- centos 下卸载mysql
查看当前已安装服务 [root@localhost]# rpm -qa|grep -i mysqlMySQL-server-5.6.36-1.rhel5.x86_64qt-mysql-4.8.5-13 ...
- 20165303 预备作业3 Linux安装及学习
=20165303 预备作业3 Linux安装及学习 安装虚拟机 按照http://www.cnblogs.com/rocedu/p/6012545.html步骤进行逐步操作,安装虚拟机. 遇到的问题 ...
- English trip V1 - B 18. Workplaces 工作地方 Teacher:Russell Key: do / does
In this lesson you will learn to talk about workplaces. 课上内容(Lesson) My English Teacher name is Russ ...
- p2693 Combination Lock
深搜,注意模n.用set去重. #include <iostream> #include <cstdio> #include <cmath> #include &l ...
- css对于文字过长加省略号
overflow: hiddentext-overflow: ellipsiswhite-space: nowrap
- 苹果手机marquee显示文字不全，如何解决？
不能给marquee设定宽度,如果想只显示屏幕宽度的一部分,就给marquee外面包一个div,给外面的div设定宽度,这样就解决了文字显示不全的问题
- 虚拟机linux 如何挂在U盘，NTFS格式如何挂载
今天突发奇想,想挂载U盘到虚拟机的Centos 7 上,但是出了些问题,下边我就来说下linux挂在U盘的步骤 电脑插上U盘 win + R运行 services.msc 找到虚拟机的USB服务并运行 ...