1.增加集群
$("#addCluster").click(function(){
var formData = new FormData();
formData.append('clusterDescribe', document.getElementById("clusterDescribe1").value);
formData.append('clusterName',document.getElementById("clusterName1").value)
$.ajax({
url : 'addCluster',
type : 'POST',
data : formData,
async: false,
success : function(data) {
console.info(data);
result = $.parseJSON(data);
}
});
window.parent.location.reload();
});
使用同步的ajaxa sync: false也可用普通的js,data也可写成{‘clusterId’:变量a,’clusterName’:变量b}。success中的data是从后台传回来的数据,增加集群需要操作数据库但是需要插入集群ID,h2数据库不能自动增加ID,需要找到最大ID号判断
Integer maxId = clusterInfoDao.getMaxId();
if(maxId ==null){
cluster.setClusterId(1);
}else{
cluster.setClusterId(maxId+1);
}
最后刷新父界面的列表树,展示新加的集群
增加集群时还要通过ajax判断是否重名
$("input[name='clusterNameAdd']").keyup(function() {
var name = this.value;
$.ajax({
url : 'checkClusterName',
type : 'POST',
data : {'newName':name},
success : function(data) {
//alert(data);
if(data.length > 5)
$("p[name='tip']").text("该集群名已经存在!");
$("button[name='button']").attr("disabled",true);
if(data.length < 5){
$("button[name='button']").attr("disabled",false);
$("p[name='tip']").text("");
}
}
});
});
添加keyUp事件,key指键盘的键当他弹起时即生效,给输入框旁添加一个p标签,使其展示错误信息,另外还要将button按钮设为不可用,使其不能进行下一步,attr()改变一个标签的属性值。attr(属性,value)
2.查询所有集群
<tbody>
<c:forEach var="list" items="${clusterList}">
<tr>
<td style="display:none">${list.clusterId}</td>
<td>${list.clusterName}</td>
<td name="df">${list.clusterDescribe}</td>
</tr>
</c:forEach>
</tbody>
标签循环list ,得到list的值有很多不需要界面展示但是需要用到的,style标签将其隐藏
3.按集群名检索集群
$("#queryCluster").keyup(function() {
var text = this.value;
$.ajax({
url : 'getClustersByName',
type : 'POST',
data : {'clusterName':text},
success : function(data) {
var jsonData = eval(data);
$("tbody").empty();
var str = "";
for (var i = 0; i < jsonData.length; i++) {
var data = jsonData[i];
str+="<tr>";
str+="<td style='display:none'>"+data.clusterId+"</td>";
str+="<td>"+data.clusterName+"</td>";
str+="<td>"+data.clusterDescribe+</td>";
str+="</tr>";
}
$("tbody").html(str);
}
});
});
接收到后台传来的值,先清空tbody的值,然后循环获取data中的值,用str字符串拼接之前标签中的值,最后用.html ()方法写入网页
写入时其上的事件应用live()修饰
关于JQERY html(),text(),val()的用法详见
(http://www.cnblogs.com/keyi/p/5809342.html)