var RuleFilter = {
    RuleContainer: null,
    fields: [],
    editorCounter:0,
    strings: {
        "and": "并且",
        "or": "或者",
        "equal": "相等",
        "notequal": "不相等",
        "startwith": "以..开始",
        "endwith": "以..结束",
        "like": "相似",
        "greater": "大于",
        "greaterorequal": "大于或等于",
        "less": "小于",
        "lessorequal": "小于或等于",
        "in": "包括在...",
        "notin": "不包括...",
        "addgroup": "增加分组",
        "addrule": "增加条件",
        "deletegroup": "删除分组"
    },
    operators: {
        string: ["equal", "notequal", "startwith", "endwith", "like", "greater", "greaterorequal", "less", "lessorequal", "in", "notin"],
        number:["equal", "notequal", "greater", "greaterorequal", "less", "lessorequal", "in", "notin"]
    },
    editors: {
        string: {
            create: function (container, field) {
                var input = $("<input type='text' name='" + field.name + "_query'/>");
                container.append(input);
                if (field.value) {
                    input.val(field.value);
                }
                return input;
            },
            setValue: function (input, value) {
                input.val(value);
            },
            getValue: function (input) {
                return input.val();
            },
            destroy: function (input) {
                input.liger('destroy');
            }
        },
        date: {
            create: function (container, field) {
                var input = $("<input type='text'/>");
                container.append(input);
               // input.ligerDateEditor(field.editor.options || {});
                return input;
            },
            setValue: function (input, value) {
                input.liger('option', 'value', value);
            },
            getValue: function (input, field) {
                return input.liger('option', 'value');
            },
            destroy: function (input) {
                input.liger('destroy');
            }
        },
        number: {
            create: function (container, field) {
                var input = $("<input type='text'/>");
                container.append(input);
                //var options = {
                //    minValue: field.minValue,
                //    maxValue: field.maxValue
                //};
               // input.ligerSpinner($.extend(options, field.editor.options || {}));
                return input;
            },
            setValue: function (input, value) {
                input.val(value);
            },
            getValue: function (input, field) {
                var isInt = field.type == "int";
                if (isInt)
                    return parseInt(input.val(), 10);
                else
                    return parseFloat(input.val());
            },
            destroy: function (input) {
                input.liger('destroy');
            }
        },
        combobox: {
            create: function (container, field) {
                var input = $("<select class='select2'></select>");
                //container.append(input);
                //var options = {
                //    data: field.data,
                //    slide: false,
                //    valueField: field.editor.valueField || field.editor.valueColumnName,
                //    textField: field.editor.textField || field.editor.displayColumnName
                //};
                //$.extend(options, field.editor.options || {});
                //input.ligerComboBox(options);
                return input;
            },
            setValue: function (input, value) {
                input.liger('option', 'value', value);
            },
            getValue: function (input) {
                return input.liger('option', 'value');
            },
            destroy: function (input) {
                input.liger('destroy');
            }
        }
    },
    Init: function (container, fields) {
        this.fields = fields;
        var g = this;
        this.RuleContainer = container;
        g.addGroup(container.children(":eq(0)"));
        container.append( this._bulidGroupTableHtml(false, false));
       // g.addRule(container.children(":eq(0)"));
        $(container).find(".addgroup,.deletegroup,.addrule,.deleterole").on("click", function (e) {
            var e = this;
            var cn = $(this).attr("class");
          
            if (cn.indexOf("addgroup") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.addGroup(jtable);
            }
            else if (cn.indexOf("deletegroup") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.deleteGroup(jtable);
            }
            else if (cn.indexOf("addrule") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.addRule(jtable);
            }
            else if (cn.indexOf("deleterole") >= 0) {
                var rulerow = $(this).parent().parent();
                g.deleteRule(rulerow);
            }
        });
    },
    addGroup: function (jgroup) {
      
        var g =this;
        jgroup = $(jgroup || g.group);
        var lastrow = $(">tbody:first > tr:last", jgroup);
        var groupHtmlArr = [];
        groupHtmlArr.push('<tr class="l-filter-rowgroup"><td class="l-filter-cellgroup" colSpan="4">');
        var altering = !jgroup.hasClass("l-filter-group-alt");
        groupHtmlArr.push(g._bulidGroupTableHtml(altering, true));
        groupHtmlArr.push('</td></tr>');
        var row = $(groupHtmlArr.join(''));
        lastrow.after(row);
        row.find(".addgroup,.deletegroup,.addrule,.deleterole").on("click", function (e) {
            var e = this;
            var cn = $(this).attr("class");
          
            if (cn.indexOf("addgroup") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.addGroup(jtable);
            }
            else if (cn.indexOf("deletegroup") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.deleteGroup(jtable);
            }
            else if (cn.indexOf("addrule") >= 0) {
                var jtable = $(this).parent().parent().parent().parent().parent();
                g.addRule(jtable);
            }
            else if (cn.indexOf("deleterole") >= 0) {
                var rulerow = $(this).parent().parent();
                g.deleteRule(rulerow);
            }
        });
        return row.find("table:first");
    },
    //删除分组 
    deleteGroup: function (group) {
        var g = this; 
        $("td.l-filter-value", group).each(function () {
            var rulerow = $(this).parent();
            $("select.fieldsel", rulerow).unbind();
            g.removeEditor(rulerow);
        });
        $(group).parent().parent().remove();
    },
    //增加一个条件
    //parm [jgroup] 分组的jQuery对象
    addRule: function (jgroup) {
        var g = this;
        jgroup = jgroup || g.group;
        var lastrow = $(">tbody:first > tr:last", jgroup);
        var rulerow = $(g._bulidRuleRowHtml());
        lastrow.after(rulerow);
        if (g.fields.length) {
            //如果第一个字段启用了自定义输入框
            g.appendEditor(rulerow, g.fields[0]);
        }

        //事件:字段列表改变时
        $("select.fieldsel", rulerow).bind('change', function () {
            var jopsel = $(this).parent().next().find("select:first");
            var fieldName = $(this).val();
            if (!fieldName) return;
            var field = g.getField(fieldName);
            //字段类型处理
            var fieldType = field.type || "string";
            var oldFieldtype = rulerow.attr("fieldtype");
            if (fieldType != oldFieldtype) {
                jopsel.html(g._bulidOpSelectOptionsHtml(fieldType));
                rulerow.attr("fieldtype", fieldType);
            }
            //当前的编辑器
            var editorType = null;
            //上一次的编辑器
            var oldEditorType = rulerow.attr("editortype");
         //   if (g.enabledEditor(field)) editorType = field.editor.type;
            if (oldEditorType) {
                //如果存在旧的输入框 
                g.removeEditor(rulerow);
            }
            if (editorType) {
                //如果当前选择的字段定义了输入框
                g.appendEditor(rulerow, field);
            } else {
                rulerow.removeAttr("editortype").removeAttr("editorid");
                $("td.l-filter-value:first", rulerow).html('<input type="text" class="valtxt" />');
            }
        });
        rulerow.find(".deleterole").on("click", function (e) {
            var e = this;
            var cn = e.className;
             if (cn.indexOf("deleterole") >= 0) {
                var rulerow = $(e).parent().parent();
                g.deleteRule(rulerow);
            }
        });
        return rulerow;
    },

    //删除一个条件
    deleteRule: function (rulerow) {
        $("select.fieldsel", rulerow).unbind();
        this.removeEditor(rulerow);
        $(rulerow).remove();
    },
    //生成分组的html
    _bulidGroupTableHtml: function (altering, allowDelete) {
        var g = this;
        var tableHtmlArr = [];
        tableHtmlArr.push('<table cellpadding="0" cellspacing="0" border="0" class="l-filter-group');
        if (altering)
            tableHtmlArr.push(' l-filter-group-alt');
        tableHtmlArr.push('"><tbody>');
        tableHtmlArr.push('<tr class="l-filter-rowlast"><td class="l-filter-rowlastcell" align="right" colSpan="4">');
        //and or
       
        tableHtmlArr.push('<div data-toggle="buttons-checkbox" class="btn-group">');
        tableHtmlArr.push('<button  class="btn btn-primary btn-sm addgroup">' + g.strings['addgroup'] + '</button>');
        tableHtmlArr.push('<button  class="btn btn-primary btn-sm addrule">' + g.strings['addrule'] + '</button>');
        //tableHtmlArr.push('<ul class="dropdown-menu">');
        //tableHtmlArr.push('<li class="addgroup"><a href="javascript://" >' + g.strings['addgroup'] + '</a></li>');
        //tableHtmlArr.push('<li class="addrule"><a href="javascript://">' + g.strings['addrule'] + '</a></li>');
       
        if (allowDelete)
            tableHtmlArr.push('<button  class="btn btn-primary btn-sm deletegroup">' + g.strings['deletegroup'] + '</button>');
         
                
        ////add group
        //tableHtmlArr.push('<button type="button" class="btn btn-primary btn-rounded addgroup">' + g.strings['addgroup'] + '</button>');
        ////add rule
        //tableHtmlArr.push('<button type="button" class="addrule">' + g.strings['addrule'] + '</button>');
        //if (allowDelete)
        //    tableHtmlArr.push('<button type="button"  class="deletegroup">' + g.strings['deletegroup'] + '</button>');

        tableHtmlArr.push('</div>');
        tableHtmlArr.push('<select class="groupopsel">');
        tableHtmlArr.push('<option value="and">' + g.strings['and'] + '</option>');
        tableHtmlArr.push('<option value="or">' + g.strings['or'] + '</option>');
        tableHtmlArr.push('</select>');
        tableHtmlArr.push('</td></tr>');

        tableHtmlArr.push('</tbody></table>');
        return tableHtmlArr.join('');
    },

    //生成字段值规则的html
    _bulidRuleRowHtml: function (fields) {
        var g = this;
        fields = g.fields;
        var rowHtmlArr = [];
        var fieldType = fields[0].type || "string";
        rowHtmlArr.push('<tr fieldtype="' + fieldType + '"><td class="l-filter-column">');
        rowHtmlArr.push('<select class="fieldsel">');
        for (var i = 0, l = fields.length; i < l; i++) {
            var field = fields[i];
            rowHtmlArr.push('<option value="' + field.name + '"');
            if (i == 0) rowHtmlArr.push(" selected ");
            rowHtmlArr.push('>');
            rowHtmlArr.push(field.display);
            rowHtmlArr.push('</option>');
        }
        rowHtmlArr.push("</select>");
        rowHtmlArr.push('</td>');

        rowHtmlArr.push('<td class="l-filter-op">');
        rowHtmlArr.push('<select class="opsel">');
        rowHtmlArr.push(g._bulidOpSelectOptionsHtml(fieldType));
        rowHtmlArr.push('</select>');
        rowHtmlArr.push('</td>');
        rowHtmlArr.push('<td class="l-filter-value">');
        rowHtmlArr.push('<input type="text" class="valtxt" />');
        rowHtmlArr.push('</td>');
        rowHtmlArr.push('<td>');
        rowHtmlArr.push('<div class="deleterole"><i class="fa fa-close" ></i></div>');
        rowHtmlArr.push('</td>');
        rowHtmlArr.push('</tr>');
        return rowHtmlArr.join('');
    },
    //删除编辑器
    removeEditor: function (rulerow) {
        var g = this;
        var type = $(rulerow).attr("editortype");
        var id = $(rulerow).attr("editorid");
       // var editor = g.editors[id];
       // if (editor) g.editors[type].destroy(editor);
        $("td.l-filter-value:first", rulerow).html("");
    },

    //获取一个运算符选择框的html
    _bulidOpSelectOptionsHtml: function (fieldType) {
        var ops = this.operators[fieldType];
       
        var opHtmlArr = [];
        for (var i = 0, l = ops.length; i < l; i++) {
            var op = ops[i];
            opHtmlArr[opHtmlArr.length] = '<option value="' + op + '">';
            opHtmlArr[opHtmlArr.length] = this.strings[op];
            opHtmlArr[opHtmlArr.length] = '</option>';
        }
        return opHtmlArr.join('');
    },
    //附加一个输入框
    appendEditor: function (rulerow, field) {
        var g = this;
       
            var cell = $("td.l-filter-value:first", rulerow).html("");
            var editor = g.editors[field.type];
           
            g.editors[++g.editorCounter] = editor.create(cell, field);
            rulerow.attr("editortype", field.type).attr("editorid", g.editorCounter);
      
    },
    //获取分组数据
    getData: function (group) {
        var g = this;
        group = group || this.RuleContainer.children("table:eq(0)");

        var groupData = {};
     
        $("> tbody > tr", group).each(function (i, row) {
            var rowlast = $(row).hasClass("l-filter-rowlast");
            var rowgroup = $(row).hasClass("l-filter-rowgroup");
            if (rowgroup) {
                var groupTable = $("> td:last > table:last", row);
                if (groupTable.length) {
                    if (!groupData.groups) groupData.groups = [];
                    groupData.groups.push(g.getData(groupTable));
                }
            }
            else if (rowlast) {
                groupData.op = $(".groupopsel:first", row).val();
            }
            else {
                var fieldName = $("select.fieldsel:first", row).val();
                var field = g.getField(fieldName);
                var op = $(".opsel:first", row).val();
                var value = g._getRuleValue(row, field);
                var type = $(row).attr("fieldtype") || "string";
                if (!groupData.rules) groupData.rules = [];
                groupData.rules.push({
                    field: fieldName, op: op, value: value, type: type
                });
            }
        });

        return groupData;
    },
    //设置规则
    //parm [group] 分组数据
    //parm [jgruop] 分组table dom jQuery对象
    setData: function (group, jgroup) {
        var g = this;
        jgroup = jgroup || this.RuleContainer.children("table:eq(0)");
        var lastrow = $(">tbody:first > tr:last", jgroup);
        jgroup.find(">tbody:first > tr").not(lastrow).remove();
        $("select:first", lastrow).val(group.op);
        if (group.rules) {
            $(group.rules).each(function () {
                var rulerow = g.addRule(jgroup);
                rulerow.attr("fieldtype", this.type || "string");
                $("select.opsel", rulerow).val(this.op);
                $("select.fieldsel", rulerow).val(this.field).trigger('change');
                var editorid = rulerow.attr("editorid");
                if (editorid && g.editors[editorid]) {
                    var field = g.getField(this.field);
                    if (field && field.editor) {
                        g.editors[field.editor.type].setValue(g.editors[editorid], this.value, field);
                    }
                }
                else {
                    $(":text", rulerow).val(this.value);
                }
            });
        }
        if (group.groups) {
            $(group.groups).each(function () {
                var subjgroup = g.addGroup(jgroup);
                g.setData(this, subjgroup);
            });
        }
    },
    //根据fieldName 获取 字段
    getField: function (fieldname) {
        var g = this;
        for (var i = 0, l = g.fields.length; i < l; i++) {
            var field = g.fields[i];
            if (field.name == fieldname) return field;
        }
        return null;
    },
    _getRuleValue: function (rulerow, field) {
        var g = this;
        var editorid = $(rulerow).attr("editorid");
        var editortype = $(rulerow).attr("editortype");
        var editor = g.editors[editorid];
        if (editor)
            return g.editors[editortype].getValue(editor, field);
        return $(".valtxt:first", rulerow).val();
    },
}

初始化方法:RuleFilter.Init($(".w-rule-filter"), fields);

该查询条件主要参照ligerui中的查询条件过滤 支持bootstrap 以及jquery 2.0+

Jquery 查询条件动态过滤器-LMLPHP

12-09 23:03