Jquery 动态生成查询条件

前台代码：

 

    <div id="actionwindow" style="width: 500px" runat="server" class="window">
        <div class="title">
            数据查询
        </div>
        <div id="queryAll" class="content05">
            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="left:18px; position:relative" >
                <tr>
                    <td style="width:158px;border:1px solid #FFFFFF;" align="center">
                        字段
                    </td>
                    <td style="width:52px;border:1px solid #FFFFFF;" align="center">
                        操作符
                    </td>
                    <td style="width:154px;border:1px solid #FFFFFF;" align="center">
                        字段值
                    </td>   
                    <td style="width:78px;border:1px solid #FFFFFF;" align="center">
                        关系
                    </td>
                    <td ></td>
                </tr>
            </table>
            <input type="hidden" id="hidValidateField" runat="server" />
            <input type="hidden" id="hidValidateOpration" runat="server" />
            <input type="hidden" id="hidValidateContent" runat="server" />
            <input type="hidden" id="hidValidateRelation" runat="server" />
            <div id="search0" style="position:relative;left:18px" >
               <asp:DropDownList ID="ddlQuery" name="ddlQuery" runat="server"></asp:DropDownList></div>
        </div>
        <div style="padding-left: 20px" id="div_Error">
                <label id="labError" runat="server">
                </label>
            </div>
        <br />
        <table width="100%" height="36" border="0" align="center" cellpadding="0" cellspacing="0" >
            <tr>
                <td align="center">
                    <input id="queryFields" type="hidden" runat="server" />
                    <asp:Button runat="server" class="btn04" ID="lbtnQuery" Text="查询" OnClick="lbtnQuery_Click" />
                    &nbsp;
                    <asp:Button ID="lbtnClose" runat="server" OnClientClick="jWindow.close($('#actionwindow')); return false;"
                        class="btn04" Text="关闭" />
                </td>
            </tr>
        </table>
    </div>

 

JS文件代码：

 

$(function () {

    //下拉列表选择事件  
     $("#ddlQuery").live("change", function () {
        if ($(this).val() != 0) {
            var str = "";
            str = '<select id="' + $(this).val() + '" name="ddlQuery">'
            str += '<option value="1">等于</option>';
            str += '<option value="2">大于</option>';
            str += '<option value="3">小于</option>';
            str += '<option value="4">包含</option></select>';
            //            if ($(this).find("option:selected").text().indexOf("时间") > 0) {
            //                str += '<input id=\"' + $(this).val() + '\" type=\"text\"' + " click='javascript:alert('dd')' />";
            //            }
            //            else {
             str += '<input name="txtContent" id="' + $(this).val() + '" type="text" />';
            // str += '<input name="txtContent" id="' + 'txtContent' + '" type="text" />';
            //            }
 
            str += '<select name="ddlSelect" id="' + $(this).val() + '">';
            str += '<option value="0">--请选择--</option>';
            str += '<option value="1">并且</option>';
            str += '<option value="2">或者</option>';
            $(this).nextAll().remove().end().parent().append(str);
        }
        else {
            $(this).nextAll().remove();
        }
        $(this).next().next().click(function () {
            if ($(this).prev().prev().find("option:selected").text().indexOf("时间") > 0) {
                $(this).attr("readonly", true);
                WdatePicker({ readonly: true, highLineWeekDay: true });
            }
        });
    });

    ///添加事件
     $("select[name='ddlSelect']").live("change", function () {
        if ($(this).val() != 0) {
            if ($(this).parent().next().find("select").get(0) == undefined) {
                var Did = "search" + i;
                var str = '<div id="' + Did + '"><img alt="删除" src="http://images.cnblogs.com/delete.png" id="img_delete" /></div>';
                $("#queryAll").append(str);
                $("#ddlQuery:first").clone().appendTo("#" + Did);
                $("#" + Did + " > select").val("0");
                i++;
            }
        }
        else {
            $(this).parent().nextAll().remove();
        }
    });

    ///删除查询条件事件
    $("#img_delete").live("click", function () {
        $(this).parent().remove();
    });

    ///确认按钮
    $("#lbtnQuery").click(function () {
        var intFalg = 0;
        var floatFalg = 0;
        if (CheckInput()) {
            $("div[id*=search]").each(function () {
                if ($(this).find("input[type='text']").get(0) != undefined) {
                    if ($(this).find("input[type='text']").attr("id").indexOf("i") == 0) {
                        if (!IsInt($(this).find("input[type='text']").val()) || $.trim($(this).find("input[type='text']").val()).length > 10) {
                            intFalg = 1;
                        }
                    }
                    else if ($(this).find("input[type='text']").attr("id").indexOf("f") == 0) {
                        if (isNaN($(this).find("input[type='text']").val()) || $.trim($(this).find("input[type='text']").val()).length > 10) {
                            floatFalg = 1;
                        }
                    }
                }
            });
            if (intFalg == 1) {
                alert("人员数请输入小于10位的整数");
                return false;
            }
            else if (floatFalg == 1) {
                alert("资产数请输入小于10位的数字");
                return false;
            }
            else {
                var strQuery = "[";
                //        alert($("#search0").children().eq(0).val());
                $("div[id*=search]").each(function () {
                    if ($(this).attr("id") == "search0") {
                        strQuery += '{"field":"' + $(this).children().eq(0).val() + '","opration":"' + $(this).children().eq(1).val() + '","content":"' + $(this).children().eq(2).val() + '","relation":"' + $(this).children().eq(3).val() + '"},'
                    }
                    else {
                        strQuery += '{"field":"' + $(this).children().eq(1).val() + '","opration":"' + $(this).children().eq(2).val() + '","content":"' + $(this).children().eq(3).val() + '","relation":"' + $(this).children().eq(4).val() + '"},'
                    }
                });
                strQuery = strQuery.substring(0, strQuery.length - 1) + "]";
                $("#queryFields").val(strQuery);
                jWindow.close($('#actionwindow'));
            }

        }
        else {
            return false;
        }
    });
});

 

查询条件输入验证：

 

function CheckInput() {
    var result = $("#form1").validate({
        rules: {
            hidValidateField: {//字段
                 FieldRequired: true
            },
            hidValidateContent: {//字段值
                 ContentRequired: true
            },
            hidValidateRelation: {//关系
                RelationRequired: true
            }
        },
        errorClass: "errorClass",
        //方式一
        errorLabelContainer: $("#div_Error"),
        wrapper: 'li'

    });
    return result.form();
}

///字段必选
jQuery.validator.addMethod("FieldRequired", function (value, element) {
    var falg = 0;
    $("select[name='ddlQuery']").not(":first").each(function () {
        if ($(this).val() == "0") {
            falg = 1;
        }
    });
    return falg == 0;

}, "*字段必选");

///字段值必填
jQuery.validator.addMethod("ContentRequired", function (value, element) {
    var falg = 0; //txtContent
    $("input[name='txtContent']").each(function () {
        if ($.trim($(this).val()) == "") {
            falg = 1;
        }
    });
    return falg == 0;

}, "*字段值必填");

///关系必选
jQuery.validator.addMethod("RelationRequired", function (value, element) {
    var falg = 0; //ddlSelect
    $("select[name='ddlSelect']").not(":last").each(function () {
        if ($(this).val() == "0") {
            falg = 1;
        }
    });
    return falg == 0;

}, "*关系必选");

//判断是否为整数
function IsInt(v) {
    var vArr = v.match(/^[0-9]+$/);
    if (vArr == null) {
        return false;
    }
    else {
        return true;
    }
}