<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>监测业务管理系统</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" />
<link rel="stylesheet" href="themes/icon.css" type="text/css" />
<link rel="stylesheet" href="css/index.css" type="text/css">
<script type="text/javascript">
var jsonResult="";
var total=0;
$(document).ready(function(){
initLinkButton();
//添加列处理事件
$('#addcolumn').bind('click', function(){
addColumn();
});
//删除列处理事件
$('#deletecolumn').bind('click', function(){
deleteColumn();
});
//添加行处理事件
$('#addline').bind('click', function(){
addLine();
});
//删除行处理事件
$('#deleteline').bind('click', function(){
deleteLine();
});
//生成Json
$('#generateJson').bind('click', function(){
total=$('#total').val()==""?0:$('#total').val();
var titles=[];
$('.title').each( function(cindex, elementColumn){
titles.push(elementColumn.value);
});
var tdSize= titles.length;
var i=0;
$("tr:not(:first) td input").each( function(lindex, elementLine){
if(lindex==0){
jsonResult+="{\""+titles[0]+"\":\""+elementLine.value+"\",\"";
i++;
}else{
if((lindex+1)%tdSize==0){
jsonResult+= titles[i]+"\":\""+elementLine.value+"\"},<br>{\"";
i=0;
}else{
jsonResult+=titles[i]+"\":\""+elementLine.value+"\",\"";
i++;
}
}
});
jsonResult="\"total\":"+total+",\"rows\":<br>[<br>"+jsonResult.slice(0,jsonResult.length-7)+"<br>]}";
$('#JsonStr').html(jsonResult);
jsonResult="";
});
});
function initLinkButton(){
$('#addcolumn').linkbutton({
iconCls: 'icon-add'
});
$('#deletecolumn').linkbutton({
iconCls: 'icon-remove'
});
$('#addline').linkbutton({
iconCls: 'icon-add'
});
$('#deleteline').linkbutton({
iconCls: 'icon-remove'
});
$('#generateJson').linkbutton({
iconCls: 'icon-save'
});
}
function addLine()
{
$("tr:last").clone().appendTo("table:last");
$("tr:last td input").val("");
}
function addColumn()
{
var Num=$("tr:first td").size()+1;
$("tr:first").append("<td><input class=\"title\" name=\"Series"+Num+"\" type=\"text\" id=\"Series"+Num+"\" size=\"10\"/></td>");
$("tr:not(:first)").append("<td><input name=\"Series"+Num+"\" type=\"text\" id=\"Series"+Num+"\" size=\"10\"/></td>");
$("tr:first td:last input").val("column"+Num);
}
function deleteLine()
{
if($('tr').size()>2){
$("tr:last").remove();
}
}
function deleteColumn()
{
if($('tr td').length>2){
$("tr td:last-child").remove();
}
}
</script>
<style type="text/css">
html body table {
text-align:center;
}
.title{
background:#FCC;
text-align:center;
}
</style>
</head>
<body style="text-align:center;">
<div style=" height:50px; text-align:center"><h1>Json 编辑器</h1></div>
<div align="center">
<a id="addcolumn" href="#">添加列</a>
<a id="deletecolumn" href="#">删除列</a>
<a id="addline" href="#">添加行</a>
<a id="deleteline" href="#">删除行</a>
<a id="generateJson" href="#">生成Json</a>
<br><form method="get">
<b>rows:</b> <input type="text" id="total" class="easyui-numberbox" data-options="min:0,max:100"/>
</form>
<div style=" height:20px"></div>
<table align="center" border="1" style="border-collapse:collapse">
<tr>
<td><input name="Seriest1" type="text" id="Series1" value="column1"size="10" class="title" /></td>
<td><input name="Seriest2" type="text" id="Series2" value="column2" size="10" class="title"/></td>
<td><input name="Seriest3" type="text" id="Series3" value="column3" size="10" class="title"/></td>
<td><input name="Seriest4" type="text" id="Series4" value="column4" size="10" class="title"/></td>
</tr>
<tr>
<td><input name="Series1" type="text" id="Series1" size="10" value="1" /></td>
<td><input name="Series2" type="text" id="Series2" value="2" size="10"/></td>
<td><input name="Series3" type="text" id="Series3" size="10" value="1" /></td>
<td><input name="Series4" type="text" id="Series4" value="2" size="10"/></td>
</tr>
</table>
<div style="height:10px"></div>
<div style="width:100%; height:400px; text-align:center">
<textarea id="JsonStr" cols="100" rows="15" style="background:#CFC"></textarea>
</div>
</body>
</html>
Json grid 编辑器
2星 需积分: 50 82 浏览量
2013-03-17
19:12:48
上传
评论
收藏 2KB RAR 举报 
generateJson.rar （1个子文件） 
generateJson.html 5KB资源评论
tenme2022-03-18退货，垃圾
hanpingwork2013-11-26是够简单的，只能生成一种格式
daomi20852017-11-01这个就是个垃圾- alucardwh2013-12-24比较适合初学者接触
- a3816447542013-10-22虽然简单，还不错
