讲讲开这章博客的理由吧:我在开发过程中遇到了一个需求,就是当我点击某个功能时,打开的界面如图2 所示,当我再次新增一个新的标签,需要的结果就是再原有的表格table格式下追加我添加的<td>,但是实际开发过程中,用到的是html 的append()追加方法,但是这个方法存在一个问题,就是追加的内容有个要求,是在指定的id后面进行追加,你无法确定你要在哪个id后面追加,因为你可能在开发的时候,用的是<for:each>来遍历集合的,集合的大小不定,存在着变数,所以无法达到需求。
通过各个途径查询资料,更多的就是追加行,列,少数是追加单元格,但达不到需要的成果。因此,在我多番尝试之下,终于完成了。
相信看到这章的人都是有一些开发经验的人,如何实现下面两张图内容的前后台代码我在此就不啰嗦了。
图1
图3
图2
那么如何实现点击添加之后带有格式的“追加”呢!请耐心看下文。
dialog打开,初始化加载页面,页面table的代码如下:
<div class="content" id="ck" style="margin: 0px 0px 0px 65px;width:500px;height:100px;overflow-y:scroll; ">
<table id="radios" style="display: none;">
<c:forEach var="label" items="${labels}" varStatus="status"> <!--遍历url请求后台传递过来集合-->
<c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}">
<tr >
</c:if>
<td width="125px" >
<input name="radioItem" type="radio" value="${label.id}">${label.name}</td>
<c:if test="${status.count % 4 eq 0 || status.count eq 4}">
</tr>
</c:if>
</c:forEach>
</table>
<div>
<input id="labelname" name="labelname" value="" class="easyui-textbox" style="width:200px" validType="archLabelNameVali">
<a class="easyui-linkbutton" id="add" onClick="addLabel()">添加</a>
点击添加按钮,调用方法addLabel()
function addLabel(){
//首先先清空初始化时加载的表格,因为你不可能再在上面做追加操作。
$('#ck').html("");
// 通过ajax请求
$.ajax({
type : "POST",//此部分可忽略,就是通过请求取获取我们想要的集合,
url : 'odoc/queryLabelInfoList.action',
dataType : "json",
async : false,
data : {
oldlabelids : oldlabelids
},
success : function(result) { //重点在这,重新画一个表格,然后放到$("#ck").html()上去
var html=""; //定义变量
html+="<table id='radios'>"; //画表头
$.each(result,function(index,data){ //遍历集合
if((index)%4==0||(index+1)==1){ //在这里判断需要在第几个换行,由于index是下标从0开始,所以初始时就画一个tr
html+="<tr>";
}
html+="<td width='125px'>";//给定各个td的宽度
html+="<input name='radioItem' type='radio' value="+data.id+">"+data.name+"</td>"; // 这里放入你要后续传递的值与显示的值(需要注意单双引号的使用)所有拼html最麻烦的可能就是这个了,表示深受毒害啊
if((index+1)%4==0||(index+1)==4){ //前面的tr 此处的/tr
html+="</tr>";
}
});
html+="</table>";
console.info(html);
$('#ck').html(html);
}
});
$('#labelname').textbox('clear'); //最后清空输入框。
}