自己写了一个解析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页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...
随机推荐
- CC2 条理分明-----AACTP教你谈恋爱
AACTP是一个神奇的地方,这里可以培养你的自信,培养你的沟通表达能力,培养你的领导管理能力:但是你不知道的是AACTP还可以培养你恋爱的本领.想知道是怎么回事吗?听我给你慢慢说来.我把恋爱分为三 ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- Linux上配置bond
http://blog.csdn.net/wuweilong/article/details/39720571 一,配置设定文件[root@woo ~]# vi /etc/sysconfig/netw ...
- linux文件管理之查找
1 文件查找 1.1 which 查找可执行文件的路径which是通过 PATH环境变量到该路径内查找可执行文件,所以基本的功能是寻找可执行文件[root@www ~]# which [-a] com ...
- 用ActionController::Renderer的render方法渲染模版
使用Cable进行pub: ActionCable.server.broadcast "call", {address: AddressesController.render(@a ...
- 关于JAVA项目中的常用的异常处理情况总结
1． JAVA异常处理 在面向过程式的编程语言中,我们可以通过返回值来确定方法是否正常执行.比如在一个c语言编写的程序中,如果方法正确的执行则返回1.错误则返回0.在vb或delphi开发的应用程序中 ...
- BAT 大规模Hadoop集群实践
百度高级架构师马如悦:我的Hadoop 2.0 http://www.csdn.net/article/2011-04-28/296869 腾讯大规模Hadoop集群实践 腾讯 hadoop 基线版本 ...
- 微信小程序分享
点击链接查看详情:(转发的路径的必须写正确) https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html
- jenkins 构建selenium python （浏览器驱动是chromedriver）的解决方法
1.在chrome浏览去中输入chrome://version 查看chrome 的安装位置 2.将chromedriver 驱动添加到可执行文件路径中 3.在Jenkins中 的系统设置中-环境变 ...
- LINQ 初步了解
.NET Framework 3.5的新特性 Language Integrated Query,即语言集成查询 查询 和语言结合关系数据库里的信息使用的XML文档保存在本地的DataSet内存中的L ...