做一个标签,可以添加,删除
<%@tag import="java.text.DecimalFormat"%>
<%@tag import="com.alibaba.fastjson.JSONArray"%>
<%@tag import="com.yinhai.sysframework.util.json.JSonFactory"%>
<%@tag import="com.alibaba.fastjson.JSONObject"%>
<%@tag import="com.yinhai.sysframework.util.ValidateUtil"%>
<%@tag pageEncoding="UTF-8" body-content="scriptless"%>
<%@attribute name="json" required="false" type="java.lang.String" description='如[{"id":"button1","name":"提交","click":"fnClick()"}]'%>
<html>
<head>
</head>
<body>
<%if(!ValidateUtil.isEmpty(json)){ %>
<%
String span="";
JSONArray array = JSonFactory.json2bean(json, JSONArray.class);
//out.print("<br>"+key+" "+value+" "+desc+"");
for(int i =0;i<array.size();i++){
JSONObject obj = (JSONObject) array.get(i);
span=span+"<span id=span_"+obj.get("id")+" class='tag' style='border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;'><span > "+obj.get("desc")+":"+obj.get("value")+" </span><a title='Removing tag' style='font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;' href='javascript:void(0)' onclick='del(this.parentNode)'>x</a></span>";
}
out.print("<div id='tag' style='background: white;width: auto; min-height: 35px; height: 35px;' value="+json+">"+span+"</div><hr color='black' width='100%' />");
%>
<%} %>
</body>
<script>
function del(obj){//onclick='del(this.parentNode)'
obj.parentNode.removeChild(obj);
var tag = $("#tag").attr("value");
var jsObject = JSON.parse(tag);
var newArr = new Array();
for(var i=0;i< jsObject.length;i++){
var j=jsObject[i];
if(j.id!=obj.id){
newArr.push(j);
}
}
var str=JSON.stringify(newArr);
$("#tag").attr('value',str);
};
function addTagByJson(json){
//varjson=[{'id':'3','desc':'测试3','value':'3'},{'id':'4','desc':'测试4','value':'4'}];
//判断是字符串还是json
var jsonObject =json; //JSON.parse(json);
var tag = $("#tag").attr("value");
var jsObject = JSON.parse(tag);
var idObject= new Array();
var newArr = new Array();
var spanStr ="";
for(var i=0;i< jsObject.length;i++){
var j=jsObject[i];
newArr.push(j);
idObject.push(j.id);
}
for(var m=0;m< jsonObject.length;m++){
if(!array_contain(idObject,jsonObject[m].id)){
newArr.push(jsonObject[m]);
spanStr=spanStr+"<span id=span_"+jsonObject[m].id+" class='tag' style='border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;'><span > "+jsonObject[m].desc +":"+jsonObject[m].value+" </span><a title='Removing tag' style='font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;' href='javascript:void(0)' onclick='del(this.parentNode)'>x</a></span>"
}
}
var str=JSON.stringify(newArr);
$("#tag").attr('value',str);
console.info(spanStr);
$("#tag").append(spanStr);
}
function removeTagById(id){
//根据id查找该标签并删除
$("#span_"+id).remove();
var tag = $("#tag").attr("value");
var jsObject = JSON.parse(tag);
var newArr = new Array();
for(var i=0;i< jsObject.length;i++){
var j=jsObject[i];
if(j.id!=id){
newArr.push(j);
}
}
var str=JSON.stringify(newArr);
$("#tag").attr('value',str);
}
function array_contain(array, obj){
for (var i = 0; i < array.length; i++){
if (array[i] == obj)//如果要求数据类型也一致，这里可使用恒等号===
return true;
}
return false;
}
</script>
</html>
效果:
页面调用
<%@ taglib prefix="ta" tagdir="/WEB-INF/tags/tatags" %>
<ta:tag json='[{"id":"1","desc":"测试1","value":"1"},{"id":"2","desc":"测试2","value":"2"}]'></ta:tag>
