jquery easyUI 实现动态生成多条件查询功能-转

原文地址http://www.dewen.org/q/4325/jquery+easyUI+%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E5%A4%9A%E6%9D%A1%E4%BB%B6%E6%9F%A5%E8%AF%A2%E5%8A%9F%E8%83%BD

谁在jquery easyUI 下做过动态生成多条件查询功能，动态添加一行（一个条件）：参数名（多个字段名）、关系符（>、<、>=、<=、=）、比较值（input）。大体就这样，点击“添加条件”，生成上面描述的一行，这个在jquery easyUI 框架下如何实现，再者，假如post表单提交，服务器脚本如何获取和组装前台提交过来的多个条件。
给个你们测试成功的或正在用的例子，非常谢谢！

 用jquery克隆方法clone()来实现添加行，给你个实现的例子：

 演示地址：http://jsbin.com/elerin/1/edit

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"> </script>
<SCRIPT LANGUAGE="JavaScript">
<!--
//动态添加行
function addRow(){
var idNum;
var row1; 
row1=$('.conditionDiv div:last');//获得最后一行 -- 设置jquery对象(待克隆的div)
//如果row1为空
if(row1.length==0){ 
idNum=1; 
row1=$("#warnConditions"+(idNum-1)); 
}
else
{
idNum= Number(row1.attr('id').substring(row1.attr('id').length-1)) + 1; 
}
var newRow=row1.clone(true);//创建最后一行的一个副本
// newRow.insertBefore(row1);//在最后一行前插入
newRow.insertAfter(row1);//在最后一行后插入 
var rndID="warnConditions"+idNum; 
newRow.attr("id",rndID);//设置行ID 每次都不一样

//给各个 select input 加上不同的id
newRow.find("a").attr("id",rndID);
newRow.find("select.colNamesSelect").attr("id","colNamesSelect"+rndID);
newRow.find("select.relationsSelect").attr("id","relationsSelect"+rndID);
newRow.find("input.colLimit").attr("id","colLimit"+rndID);
//初始值为空
$("#colLimit"+rndID).val("");

//给新增的每一行内的删除加上删除事件
newRow.find("a").click(function(){
delRow(this); 
});
// 新加行显示删除按键
newRow.find("a").html(" <span style='color: blue;'>删除</span>");
//显示克隆出的新行数据
newRow.show();
} 
//动态删除行
function delRow(who) {
$("#" + who.id).remove();
}
//-->
</SCRIPT>
</head>
<body>
<div class="conditionDiv">
<div id="warnConditions0" name="divName" > 
<select id="colNames" name="colNames[]" class="colNamesSelect" style="width: 100px;"> </select>&nbsp;&nbsp;&nbsp;&nbsp;
<select id="relations" name="relations[]" class="relationsSelect" style="width: 40px;margin:0px 0px 0px 10px;">
<option value=">="> >= </option>
<option value="<="> <= </option>
<option value=">"> > </option>
<option value="<"> < </option>
<option value="="> = </option>
</select>
<input id="colLimit" name="colLimit[]" class="colLimit" maxlength="5" style="width:80px;margin:0px 0px 0px 20px;"/>
<a href="#" id="delA" onclick="return false;" title="删除" class="delRow_Link" ></a> 
</div>
</div>
<div><input type="button" value="添加新行" onclick="return addRow();"></div>
</body>
</html>
posted @ 2012-10-08 09:11  奇微  阅读(1424)  评论(0)    收藏  举报