jquery easyUI 实现动态生成多条件查询功能
谁在jquery easyUI 下做过动态生成多条件查询功能，动态添加一行（一个条件）：参数名（多个字段名）、关系符（>、<、>=、<=、=）、比较值（input）。大体就这样，点击“添加条件”，生成上面描述的一行，这个在jquery easyUI 框架下如何实现，再者，假如post表单提交，服务器脚本如何获取和组装前台提交过来的多个条件。
给个你们测试成功的或正在用的例子，非常谢谢！
Hans小斯
12 years ago
Answers
用jquery克隆方法clone()来实现添加行，给你个实现的例子：
<!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>
<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>
万里谷佑理
answered 12 years ago