Jquery 查詢條件動態過濾器
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);javascript
該查詢條件主要參照ligerui中的查詢條件過濾 支持bootstrap 以及jquery 2.0+html
相關文章
- 1. ABAP 動態查詢條件
- 2. solr的查詢條件過濾
- 3. hbase的過濾器查詢
- 4. Hbase(四) 過濾器查詢
- 5. SpringBoot中Example的動態條件查詢
- 6. java動態條件查詢sql語句
- 7. Ireport配置動態sql查詢條件
- 8. JDBC的多條件動態查詢
- 9. MyBatis動態sql_where查詢條件
- 10. mybatis的動態條件查詢
- 更多相關文章...
- • MySQL WHERE：條件查詢 - MySQL教程
- • jQuery Mobile 過濾 - jQuery Mobile 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ABAP 動態查詢條件
- 2. solr的查詢條件過濾
- 3. hbase的過濾器查詢
- 4. Hbase(四) 過濾器查詢
- 5. SpringBoot中Example的動態條件查詢
- 6. java動態條件查詢sql語句
- 7. Ireport配置動態sql查詢條件
- 8. JDBC的多條件動態查詢
- 9. MyBatis動態sql_where查詢條件
- 10. mybatis的動態條件查詢