用JavaScript实现类似于ListBox功能示例代码

2014-03-09 27

JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据:

<span style="font-size:14px;">{ "Table": 
[ 
{ "Id": 3, "Type": "X", 
"Content": "党的十八大报告指出,我国人民民主的重要形式是什么?", 
"Akey": "基层民主政治制度", "Bkey": "人民代表大会制度", 
"Ckey": "多党合作制度", "Dkey": null, "NUM": 3 }, 
{ "Id": 2, "Type": "X", "Content": "藏羚羊是国家一级保护动物是()特有动物", 
"Akey": "青藏高原", "Bkey": "新疆", 
"Ckey": "青海", "Dkey": null, "NUM": 2 }, 
{ "Id": 1, "Type": "X", "Content": "保护野生动物有很多意义,不属于其意义的是", 
"Akey": "环境效应", "Bkey": "文化价值", 
"Ckey": "观赏价值", "Dkey": null, "NUM": 1 } 
] 
}</span>

如何对在HTML中他们进行显示,并实现编辑和删除工作,这里面涉及的json解析和数据分层显示:

HTML显示标签:

<ul id="msg" name="msg"> </ul>

JavaScript解析数据并显示:

<span style="font-size:14px;"> var response = xmlHttp.responseText; 
eval("var result =" + response); 
var len = result.Table.length; 
if (len > 0) { 
var msg = ""; 
for (var i = 0; i < len; i++) { 
msg += "<li><span>" + result.Table[i].Content + "</span>"; 
msg += "<span>" + result.Table[i].Akey + "</span>"; 
msg += "<span>" + result.Table[i].Bkey + "</span>"; 
msg += "<span>" + result.Table[i].Ckey + "</span>"; 
msg += "<span>" + result.Table[i].Dkey + "</span>"; 
msg += "<a href='###' onclick=\"editSub('" + result.Table[i].Id + "')\">编辑</a>"; 
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>删除</a>"; 
msg += "</li>"; 
} 
document.getElementById("msg").innerHTML = msg; 
}</span>

通过editSub(id)和Delete(id) 函数可以多每条数据进行处理,实现类似于ListBox的功能。
展开阅读全文

更多Javascript文章

document.all还是document.getElementsByName?
Jul 21 30
用Javascript评估用户输入密码的强度实现代码
Nov 30 21
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 20
vue移动端实现下拉刷新
Apr 22 24
彻底弄懂 JavaScript 执行机制
Oct 23 26
vue-socket.io跨域问题有效解决方法
Feb 11 68
openlayers4.6.5实现距离量测和面积量测
Sep 25 34
手机访问当前页面