jQWidgets jqxGrid getfilterinformation()方法
jQWidgets是一个JavaScript框架,用于为PC和移动设备制作基于Web的应用程序。它是一个非常强大的,优化的,与平台无关的,并且被广泛支持的框架。jqxGrid用来说明一个jQuery widget,以表格形式显示数据。此外,它完全支持与数据的连接,以及分页、分组、排序、过滤和编辑。
getfilterinformation()方法是用来返回关于显示的jqxGrid的过滤器的细节。换句话说,它返回一个所述过滤器的数组。然而,从这个方法返回的细节涉及过滤器对象以及过滤器列。它没有参数并返回None。
在这里,数组中的每个过滤器都拥有以下给定的字段。
- filters。它是过滤器的一个对象,可能容纳一个或多个过滤器。
过滤器对象的属性和方法:
- getfilters。这是一个方法,当它被调用时,过滤器对象中的每一个过滤器的数组被返回。
- value。它是过滤器对象的一个属性。它指定了过滤器的值。
- id:此属性指定了过滤器的id。
- condition。这个属性指定了过滤器的条件。其中,字符串过滤器的值是’EMPTY’, ‘NOT_EMPTY’, ‘CONTAINS’, ‘CONTAINS_CASE_SENSITIVE’, ‘DOES_NOT_CONTAIN’, ‘DOES_NOT_CONTAIN_CASE_SENSITIVE’ 。’start_with’, ‘start_with_case_sensitive’, ‘ends_with’, ‘ends_with_case_sensitive’, ‘equal’, ‘equal_case_sensitive’, ‘null’, ‘not_null.日期和数字过滤器的值是’EQUAL’, ‘NOT_EQUAL’, ‘LESS_THAN’, ‘LESS_THAN_OR_EQUAL’, ‘GREATER_THAN’, ‘ GREATER_THAN_OR_EQUAL’, ‘NULL’, ‘NOT_NULL’。而布尔型过滤器的值是。’等于’,’不等于’。
- type。它是过滤器的类型。可能的值是 “字符串过滤器”、”数字过滤器”、”布尔过滤器 “或 “数据过滤器”。
- operator。它是指定所述组中的过滤器之间的联系的运算符。可能的值是 “和 “或 “或”。
- datafield。它是指定列的数据字段。
- displayfield。它是指定列的显示字段。
语法:
var info = $('Selector').jqxGrid('getfilterinformation');
链接的文件:从给出的链接中下载jQWidgets。在HTML文件中,找到下载文件夹中的脚本文件。
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
例子1:下面的例子说明了jQWidgets中jqxGrid getfilterinformation()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdata.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxscrollbar.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxmenu.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.selection.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.columnsresize.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxGrid getfilterinformation()
method
</h3><br />
<div id="jqxg"></div>
<div>
<input type="button"
id="jqxBtn"
style="margin-top: 25px"
value="Click here" />
</div>
<div id="log"></div>
</center>
<script type="text/javascript">
(document).ready(function () {
var d = new Array();
var subjectNames =
["C++", "Scala", "Java", "C", "R", "JavaScript"];
var pageNumber =
["7", "8", "12", "11", "10", "19"];
for (var j = 0; j<50; j++) {
var r = {};
r["subjectnames"] =
subjectNames[Math.floor(
Math.random() * subjectNames.length)
];
r["pagenumber"] =
pageNumber[Math.floor(
Math.random() * pageNumber.length)
];
d[j] = r;
}
var src = {
localdata: d,
datatype: "array",
};
var data_Adapter = new.jqx.dataAdapter(src);
("#jqxg").jqxGrid({
source: data_Adapter,
theme: 'energyblue',
filterable: true,
height: "260px",
width: "240px",
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "120px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "120px",
},
],
});
("#jqxBtn").jqxButton({
width: "180px",
height: "30px",
});
var fg = new .jqx.filter();
("#jqxBtn").on("click", function () {
("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);
("#jqxg").jqxGrid('applyfilters');
var gfi = ("#jqxg").jqxGrid('getfilterinformation');
var detail = "";
for (var j = 0; j("#log").html("Filtered column's name: " + detail);
});
});
</script>
</body>
</html>
输出:
例子2:下面是另一个例子,说明了jqxGrid getfilterinformation()方法在jQWidgets中。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdata.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxscrollbar.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxmenu.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.selection.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxgrid.columnsresize.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxGrid getfilterinformation()
method
</h3><br />
<div id="jqxg"></div>
<div>
<input type="button"
id="jqxBtn"
style="margin-top: 25px"
value="Click here" />
</div>
<div id="log"></div>
</center>
<script type="text/javascript">
(document).ready(function () {
var d = new Array();
var subjectNames =
["C++", "Scala", "Java", "C", "R", "JavaScript"];
var pageNumber =
["7", "8", "12", "11", "10", "19"];
for (var j = 0; j<50; j++) {
var r = {};
r["subjectnames"] =
subjectNames[Math.floor(
Math.random() * subjectNames.length)
];
r["pagenumber"] =
pageNumber[Math.floor(
Math.random() * pageNumber.length)
];
d[j] = r;
}
var src = {
localdata: d,
datatype: "array",
};
var data_Adapter = new.jqx.dataAdapter(src);
("#jqxg").jqxGrid({
source: data_Adapter,
theme: 'energyblue',
filterable: true,
height: "230px",
width: "240px",
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "120px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "120px",
},
],
});
("#jqxBtn").jqxButton({
width: "180px",
height: "30px",
});
var add_filter = function () {
var fg = new .jqx.filter();
var val = 'ja';
var conditn = 'contains';
var opratr = 2;
var fltr =
fg.createfilter('stringfilter', val, conditn);
fg.addfilter(opratr, fltr);
("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);
("#jqxg").jqxGrid('applyfilters');
}
("#jqxBtn").on("click", function () {
add_filter();
var gfi = ("#jqxg").jqxGrid('getfilterinformation');
var details = "";
for (var j = 0; j("#log").html("Column to be filtered: " + details);
});
});
</script>
</body>
</html>
输出: