自己写了一个解析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页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...
随机推荐
- Cocos Creator 脚本模板
1.由于新建Cocos Creator脚本带有很多注释,并且有时候需要增加定制的默认注释,所以需要修改脚本生成模板. 2.在CocosCreator\resources\static\template ...
- 大数据 - spark-sql 常用命令
--spark启动 spark-sql --退出 spark-sql> quit; --退出spark-sql or spark-sql> exit; 1.查看已有的database sh ...
- C# : 泛型的继承关系实现的一个可以存放不同数据类型的链表
以下定义的是一个链表结点类型: internal sealed class Node<T> { public T m_data; public Node<T> m_next; ...
- Python学习笔记之参数解析
python提供了两种方法进行命令行的参数解析,分别是getopt和optparse类中的模块OptionParser,下面分别详细了解这两个模块: 1.getopt模块 首先复习C语言的命令行解析: ...
- C# 定时调用方法
private void button1_Click(object sender, EventArgs e) { System.Timers.Timer timer = new System.Time ...
- HTML 第十三章总结
前言 这一章的内容主要是处理 HTML 中的 tabular data,可以分为三个部分: 如何在 HTML 中创建表格 如何在 CSS 中 style 表格 如何在 CSS 中 style HTML ...
- python基础之lambda,sort,filter,map,递归函数的运用
内容梗概:1. lamda 匿名函数2. sorted()3. filter()4. map()5. 递归函数 1.lambda 形式: lambda 参数:返回值 f = lambda x,y: x ...
- Known Notation ZOJ - 3829 (后缀表达式,贪心)
大意:给定后缀表达式, 每次操作可以添加一个字符, 可以交换两个字符的位置, 相邻数字可以看做一个整体也可以分开看, 求合法所需最少操作数. 数字个数一定为星号个数+1, 添加星号一定不会更优. 先判 ...
- 【PowerDesigner】【2】将工具栏显示出来
问题:我的软件一打开,没有工具栏 解决方案:Tools→Customize Menus and Tools→Palette→Close 参考文档: PowerDesigner如何将消失的工具栏显示出来 ...
- 回收站(recyclebin)及回滚
1. alter table table_name enable row movement; flashback table table_name to timestamp to_timestam ...