关于jquery实现动态的增加删除条件拼串组合
当进行复杂查询，或者限定条件时，常用到动态的增加、删除条件 来拼串(样式见附件)。下面我们来代码实现附件的功能
1.大（或）条件的增加
var rowNum= 0;
var subRowNum=1;
function addTotalCondition(tableName){
++rowNum;
var option = "";
var rowHtml="";
var url = "";
var key = "";
rowHtml +="<tr id='"+ "tr_subCondition"+ "_" +rowNum+"' name="tr_subCondition">";
rowHtml +="<td ><input type="checkbox" id="checkbox" name="checkboxSubCondition" /></td>";
rowHtml +="<td>";
rowHtml +="<table id="table_subCondition_"+ rowNum +"" name="table_subCondition" >";
rowHtml +="<tr>";
rowHtml +="<td><input style="width: 25px" class="btn-common" type="button" value="+" id="btn_add_condition_"+ rowNum +"" name="btn_add_condition_"+ rowNum +"" onclick="addCondition("+rowNum+","+subRowNum+")" /> </td>";
rowHtml +="<td><input style="width: 25px" class="btn-common" type="button" value="-" id="btn_add_condition_"+ rowNum +"" name="btn_del_condition_"+ rowNum +"" onclick="delCondition("+rowNum+")" /></td>";
rowHtml +="<td>";
rowHtml +="<table id="table_condition_"+ rowNum +"" name="table_condition" >";
rowHtml +="<tr>";
rowHtml +="<td><input type="checkbox" id="checkbox_"+ rowNum +"" name="checkboxCondition" /></td>";
rowHtml +="<td><span>查询项目<span></td>";
rowHtml +="<td>";
url = $.WEB_ROOT +'/platform/codelist/queryByKey.do';
key = 'WIKICT';
var selectkey = "01";
option = getComboboxOptions(url , key ,selectkey);
rowHtml +="<select id="limitProjectId_" + rowNum +"_" + subRowNum +"" name="limitProjectIds"> "+ option+ " </select><input type="text" id="textvalue"";
rowHtml +="</td>";
rowHtml +="</tr>";
//rowHtml +="</table >";
rowHtml +="</td>";
rowHtml +="</tr>";
rowHtml +="</table >";
rowHtml +="</td>";
rowHtml +="</tr>";
//alert(rowHtml)
$("#"+tableName).append(rowHtml);
}
2.大(或)条件的删除
var delTotalCondition = function(tableName) {
var flag = true;
$("#"+tableName+" tr[id^='tr_subCondition']").each(function() {
//debugger;
if ($(this).find("#checkbox").get(0).checked == true) {
flag = false;
}
});
if(flag){
$.alert('请选择要删除子条件');
}else{
$("#"+tableName+" tr[id^='tr_subCondition']").each(function() {
//debugger;
if ($(this).find("#checkbox").get(0).checked == true) {
$(this).remove();
}
});
}
};
3.下拉列表框的初始化实现
function getComboboxOptions(url, codeListKey,selectkey) {
var str = "";
$.ajax( {
type : "POST",
async : false,
dataType : "json",
url : url,
data : jQuery.param( {
key : codeListKey //传递Key值
}, true),
success : function(data) {//创建<option></option>
$.each(data.codeList, function(i, n) {
if(selectkey!=null&&data.codeList[i].key==selectkey){//检测到需要默认设置的value，并设置为selected
str += "<option value='"+
data.codeList[i].key
+ "' selected='selected' >" +//默认设置
data.codeList[i].value
+"</option>";
}else{
str += "<option value='"+
data.codeList[i].key
+ "'>" + //一般设置
data.codeList[i].value
+"</option>";
}
});
}
});
return str;
}
4.小(且)条件的新增
var subRowCount = 0
var addCondition = function(rowNum,index) {
if(subRowCount == 0){
subRowCount = index;
++subRowCount;
}else{
++subRowCount;
}
var rowHtml="";
var url="";
var key="";
var selectkey="";
var option="";
rowHtml +="<tr>";
rowHtml +="<td>";
rowHtml +="<input type="checkbox" id="checkbox_"+ rowNum +"" name="checkboxCondition" />";
rowHtml +="</td>";
rowHtml +="<td>";
rowHtml +="<span>限定项目<span>";
rowHtml +="</td>";
rowHtml +="<td>";
url = $.WEB_ROOT +'/platform/codelist/queryByKey.do';
key = 'WIKICT';
selectkey = "01";
option = getComboboxOptions(url , key ,selectkey);
rowHtml +="<select id="limitProjectId_" + rowNum +"_" + subRowCount +"" name="limitProjectIds"> "+option+" <select><input type="text" id="textValue">";
rowHtml +="</td>";
rowHtml +="</tr>";
$("#table_condition_" +rowNum).append(rowHtml);
}
5.小(且)条件的删除
var delCondition = function(obj) {
var flag = true;
$("#table_condition_"+ obj +" tr").each(function() {
if ($(this).find("input[id^='checkbox_']").get(0).checked == true) {
flag = false;
}
});
if(flag){
$.alert('请选择要删除的限定项目1111');
}else{
$("#table_condition_"+ obj +" tr").each(function() {
if ($(this).find("input[id^='checkbox_']").get(0).checked == true) {
$(this).remove();
}
});
}
}
