JS代码：
//条件字段列表var fields = [ { display: "显示的名称", name: "绑定的值", editor: { type: 'string' } }, { display: "显示的名称", name: "绑定的值", editor: { type: 'string' } }];if (window.winfilter) { //想更改fields时不能用初始化时的那种方法去赋值，否则会绑定多个fields window.filter.setFields(fields); window.winfilter.dialog("open");} else { //初始化ligerFilter并赋值 var filtercontainer = $(' ').width(380).height(120); window.filter = filtercontainer.ligerFilter({ fields: fields }); //ligerui的dialog close()后就不能再打开了，用hide()后再用show()可以打开，但只有监听关闭的事件没有监听隐藏的事件 //所以这个dialog窗口是用Easyui写的 window.winfilter = $("#dlgJinQue").dialog({ title: "条件筛选窗口", border: false, width: 500, height: 400, closable: true, closed: false, cache: false, resizable: false, content: window.filter.element, modal: true, buttons: [ { text: '确定', width: 70, handler: function () { $("#dlgJinQue").dialog("close"); } }, { text: '取消', width: 70, handler: function () { $("#dlgJinQue").dialog("close"); } } ], //关闭该窗口前触发的事件 onBeforeClose: function () { //filter添加的所有行 var trs = $("#filtercontainer tr"); //因为最后一行是“增加条件”按钮，不删除，所以用（trs.length - 1） for (var i = 0; i < trs.length - 1; i++) { //删除行 window.filter.deleteRule(trs[i]); } } });} 修改过的ligerFilter.js：
(function ($) { $.fn.ligerFilter = function () { return $.ligerui.run.call(this, "ligerFilter", arguments); }; $.fn.ligerGetFilterManager = function () { return $.ligerui.run.call(this, "ligerGetFilterManager", arguments); }; $.ligerDefaults.Filter = { //字段列表 fields: [], //字段类型 - 运算符 的对应关系 operators: {}, //自定义输入框(如下拉框、日期) editors: {} }; $.ligerDefaults.FilterString = { strings: { "and": "并且", "or": "或者", "equal": "相等", "notequal": "不相等", "startwith": "以..开始", "endwith": "以..结束", "like": "相似", "greater": "大于", "greaterorequal": "大于或等于", "less": "小于", "lessorequal": "小于或等于", "in": "包括在...", "notin": "不包括...", "addgroup": "增加分组", "addrule": "增加条件", "deletegroup": "删除分组" } }; $.ligerDefaults.Filter.operators['string'] = $.ligerDefaults.Filter.operators['text'] = ["equal", "notequal", "startwith", "endwith", "like", "greater", "greaterorequal", "less", "lessorequal", "in", "notin"]; $.ligerDefaults.Filter.operators['number'] = $.ligerDefaults.Filter.operators['int'] = $.ligerDefaults.Filter.operators['float'] = $.ligerDefaults.Filter.operators['date'] = ["equal", "notequal", "greater", "greaterorequal", "less", "lessorequal", "in", "notin"]; $.ligerDefaults.Filter.editors['string'] = { create: function (container, field) { var input = $(""); container.append(input); input.ligerTextBox(field.editor.options || {}); return input; }, setValue: function (input, value) { input.val(value); }, getValue: function (input) { return input.liger('option', 'value'); }, destroy: function (input) { input.liger('destroy'); } }; $.ligerDefaults.Filter.editors['date'] = { create: function (container, field) { var input = $(""); 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'); } }; $.ligerDefaults.Filter.editors['number'] = { create: function (container, field) { var input = $(""); container.append(input); var options = { minValue: field.editor.minValue, maxValue: field.editor.maxValue }; input.ligerSpinner($.extend(options, field.editor.options || {})); return input; }, setValue: function (input, value) { input.val(value); }, getValue: function (input, field) { var isInt = field.editor.type == "int"; if (isInt) return parseInt(input.val(), 10); else return parseFloat(input.val()); }, destroy: function (input) { input.liger('destroy'); } }; $.ligerDefaults.Filter.editors['combobox'] = { create: function (container, field) { var input = $(""); 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'); } }; //过滤器组件 $.ligerui.controls.Filter = function (element, options) { $.ligerui.controls.Filter.base.constructor.call(this, element, options); }; $.ligerui.controls.Filter.ligerExtend($.ligerui.core.UIComponent, { __getType: function () { return 'Filter' }, __idPrev: function () { return 'Filter'; }, _init: function () { $.ligerui.controls.Filter.base._init.call(this); }, _render: function () { var g = this, p = this.options; g.set(p); //事件：增加分组 $("#" + g.id + " .addgroup").live('click', function () { var jtable = $(this).parent().parent().parent().parent(); g.addGroup(jtable); }); //事件：删除分组 $("#" + g.id + " .deletegroup").live('click', function () { var jtable = $(this).parent().parent().parent().parent(); g.deleteGroup(jtable); }); //事件：增加条件 $("#" + g.id + " .addrule").live('click', function () { var jtable = $(this).parent().parent().parent().parent(); g.addRule(jtable); }); //事件：删除条件 $("#" + g.id + " .deleterole").live('click', function () { var rulerow = $(this).parent().parent(); g.deleteRule(rulerow); }); }, //设置字段列表 _setFields: function (fields) { var g = this, p = this.options; if (g.group) g.group.remove(); g.group = $(g._bulidGroupTableHtml()).appendTo(g.element); }, //输入框列表 editors: {}, //输入框计算器 editorCounter: 0, //增加分组 //parm [jgroup] jQuery对象(主分组的table dom元素) addGroup: function (jgroup) { var g = this, p = this.options; jgroup = $(jgroup || g.group); var lastrow = $(">tbody:first > tr:last", jgroup); var groupHtmlArr = []; groupHtmlArr.push(''); var altering = !jgroup.hasClass("l-filter-group-alt"); groupHtmlArr.push(g._bulidGroupTableHtml(altering, true)); groupHtmlArr.push(''); var row = $(groupHtmlArr.join('')); lastrow.before(row); return row.find("table:first"); }, //删除分组 //parm [group] 分组table dom jQuery对象 deleteGroup: function (group) { var g = this, p = this.options; $("td.l-filter-value", group).each(function () { var rulerow = $(this).parent(); $("select.fieldsel", rulerow).unbind(); g.removeEditor(rulerow); }); $(group).parent().parent().remove(); }, //删除编辑器 //parm [rulerow] 分组table中行tr dom jQuery对象 removeEditor: function (rulerow) { var g = this, p = this.options; var type = $(rulerow).attr("editortype"); var id = $(rulerow).attr("editorid"); var editor = g.editors[id]; if (editor) p.editors[type].destroy(editor); $("td.l-filter-value:first", rulerow).html(""); }, //设置规则 //parm [group] 分组数据 //parm [jgruop] 分组table dom jQuery对象 setData: function (group, jgroup) { var g = this, p = this.options; jgroup = jgroup || g.group; 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) { p.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); }); } }, //设置字段 //fields：字段列表数组 setFields: function (fields) { var p = this.options; p.fields = fields; }, //增加一个条件 //parm [jgruop] 分组table dom jQuery对象 addRule: function (jgroup) { var g = this, p = this.options; jgroup = jgroup || g.group; var lastrow = $(">tbody:first > tr:last", jgroup); var rulerow = $(g._bulidRuleRowHtml()); lastrow.before(rulerow); if (p.fields.length) { //如果第一个字段启用了自定义输入框 g.appendEditor(rulerow, p.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(''); } }); return rulerow; }, //删除一个条件 //parm [rulerow] 分组table中行tr dom jQuery对象 deleteRule: function (rulerow) { $("select.fieldsel", rulerow).unbind(); this.removeEditor(rulerow); $(rulerow).remove(); }, //附加一个输入框 appendEditor: function (rulerow, field) { var g = this, p = this.options; if (g.enabledEditor(field)) { var cell = $("td.l-filter-value:first", rulerow).html(""); var editor = p.editors[field.editor.type]; g.editors[++g.editorCounter] = editor.create(cell, field); rulerow.attr("editortype", field.editor.type).attr("editorid", g.editorCounter); } }, //获取分组数据 getData: function (group) { var g = this, p = this.options; group = group || g.group; 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:first > table:first", 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; }, _getRuleValue: function (rulerow, field) { var g = this, p = this.options; var editorid = $(rulerow).attr("editorid"); var editortype = $(rulerow).attr("editortype"); var editor = g.editors[editorid]; if (editor) return p.editors[editortype].getValue(editor, field); return $(".valtxt:first", rulerow).val(); }, //判断某字段是否启用自定义的输入框 enabledEditor: function (field) { var g = this, p = this.options; if (!field.editor || !field.editor.type) return false; return (field.editor.type in p.editors); }, //根据fieldName 获取 字段 getField: function (fieldname) { var g = this, p = this.options; for (var i = 0, l = p.fields.length; i < l; i++) { var field = p.fields[i]; if (field.name == fieldname) return field; } return null; }, //获取一个分组的html _bulidGroupTableHtml: function (altering, allowDelete) { var g = this, p = this.options; var tableHtmlArr = []; tableHtmlArr.push(' | '); //and or tableHtmlArr.push(''); //add group tableHtmlArr.push(''); //add rule tableHtmlArr.push(''); if (allowDelete) tableHtmlArr.push(''); tableHtmlArr.push(' |
ligerFilter修改过后的方法：
新增的方法：
setFields(fields) //设置字段（fields：字段列表数组）
原有的方法：
addGroup(jgroup) //添加分组（jgroup：jQuery对象（主分组的table dom元素））
deleteGroup(jgroup) //删除分组（group：分组table dom jQuery对象）
appendEditor(rulerow, field) //添加编辑器（条件输入框）（rulerow：分组table中行tr dom jQuery对象，field：条件字段）
removeEditor(rulerow) //删除编辑器（条件输入框）（rulerow：分组table中行tr dom jQuery对象）
addRule(jgroup) //增加条件（jgroup：分组table dom jQuery对象）
deleteRule(rulerow) //删除条件（rulerow：分组table中行tr dom jQuery对象）
getData（jgroup） //获取分组数据（jgroup：分组table dom jQuery对象）
setData(group, jgroup) //设置规则（group：分组数据，jgroup：分组table dom jQuery对象）
getField(fieldname) //根据fieldName获取字段
enabledEditor(field) //判断某字段是否启用自定义的输入框 （field：条件字段）