使用 JQX Grid 进行过滤和排序
4.89/5 (19投票s)
使用 JQX Grid 进行过滤和排序
引言
我们都用过 JQ Grid。今天我需要在我的 Web 应用程序中实现 JQX Grid。 如果您不熟悉 JQ Grid，您可以在这里阅读： https://codeproject.org.cn/Articles/609442/Using-JqGrid-in-ASP-NET。在这里，我将解释在我们的应用程序中实现 JQX Grid 的步骤。
您必须知道什么？
- Jquery : https://jqueryjs.cn/
- Javascript : https://w3schools.org.cn/js/
- CSS 3 : https://w3schools.org.cn/css/css3_intro.asp
- HTML : https://w3schools.org.cn/html/
- JQuery 中的 DOM 操作：https://tutorialspoint.org.cn/jquery/jquery-dom.htm
背景
我们可以在 MVC 和我们的 Web 应用程序中实现 JQX Grid。您可以在这里找到演示： http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filterconditions.htm 。
您可以从 http://www.jqwidgets.com/download/ 下载所需的文件。
是什么让我选择 JQX Grid？
答案很简单。 我们有很多客户端网格提供程序（JQGrid、Telerik、JQX 等......）。如果您不了解这些，请查看这里 http://www.sitepoint.com/10-jquery-grids/。但在我的要求中，客户端需要一个切换面板，其中发生过滤条件。 当我搜索时，JQX Grid 是性能更好的一个。（其他一些也支持相同的功能，但速度有点慢。）。
使用代码
我们必须遵循一些步骤才能在我们的应用程序中实现 JQX 。
步骤 1：下载所有需要的文件
步骤 2：创建一个新的 Web 应用程序。
步骤 3：将选定的文件夹添加到您的应用程序
步骤 4：添加一个新页面
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body >
</body>
</html>
步骤 5：添加样式表和所需的 js 文件。
<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/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.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.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
(确保您按顺序添加 js 文件)
步骤 6：创建要在其中显示 JQX Grid 的 DOM 元素
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
步骤 7：生成一些动态 json 数据，这样您就可以轻松生成 JQX Grid。您可以从数据库中获取数据并将其转换为 JSON。如果您不熟悉 json 转换方法，您可以在这里获取： https://nuget.net.cn/packages/newtonsoft.json/
如果您不知道如何添加 newtonsoft 和使用它，请观看此视频。 请不要忘记评价他的视频。 他做得很好:) 。
https://www.youtube.com/watch?v=76blDatESaA
在这里，我在 JS 文件中动态生成数据。 请在 JQX Grid 的捆绑包中找到 generatedata.js 文件。 请将其添加到您的脚本部分。
<script src="generatedata.js" type="text/javascript"></script>
如果您进入 generatedata.js，您可以看到一个 generatedata 函数，该函数用于创建数据
（Json）动态生成。
function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["id"] = i;
row["available"] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row["available"] = i % random == 0 ? null : false;
}
}
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
var date = new Date();
date.setFullYear(2014, Math.floor(Math.random() * 12), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row["date"] = date;
data[i] = row;
}
return data;
}
步骤 8：现在是主要部分。 将主代码添加到页面中的 script 标签中。 在这里，我们将 Grid 附加到 id 为 jqxgrid 的元素。
<script type="text/javascript">
$(document).ready(function () {
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'date', type: 'date' },
{ name: 'quantity', type: 'number' }
],
datatype: "array"
};
var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'contains';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
filterable: true,
sortable: true,
autoshowfiltericon: true,
ready: function () {
addfilter();
var localizationObject = {
filterstringcomparisonoperators: ['contains', 'does not contain'],
// filter numeric comparison operators.
filternumericcomparisonoperators: ['less than', 'greater than'],
// filter date comparison operators.
filterdatecomparisonoperators: ['less than', 'greater than'],
// filter bool comparison operators.
filterbooleancomparisonoperators: ['equal', 'not equal']
}
$("#jqxgrid").jqxGrid('localizestrings', localizationObject);
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
var numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
switch (type) {
case 'stringfilter':
return stringcomparisonoperators;
case 'numericfilter':
return numericcomparisonoperators;
case 'datefilter':
return datecomparisonoperators;
case 'booleanfilter':
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
if (columnfilter != null) {
var filter1 = columnfilter.getfilterat(0);
var filter2 = columnfilter.getfilterat(1);
if (filter1) {
index1 = filterconditions.indexOf(filter1.comparisonoperator);
var value1 = filter1.filtervalue;
filterinputfield1.val(value1);
}
if (filter2) {
index2 = filterconditions.indexOf(filter2.comparisonoperator);
var value2 = filter2.filtervalue;
filterinputfield2.val(value2);
}
}
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
},
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
{ text: 'Quantity', datafield: 'quantity', cellsalign: 'right' }
]
});
$('#events').jqxPanel({ width: 300, height: 80});
$("#jqxgrid").on("filter", function (event) {
$("#events").jqxPanel('clearcontent');
var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
var eventData = "Triggered 'filter' event";
for (i = 0; i < filterinfo.length; i++) {
var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
});
$('#clearfilteringbutton').jqxButton({ theme: theme });
$('#filterbackground').jqxCheckBox({ checked: true, height: 25});
$('#filtericons').jqxCheckBox({ checked: false, height: 25});
// clear the filtering.
$('#clearfilteringbutton').click(function () {
$("#jqxgrid").jqxGrid('clearfilters');
});
// show/hide filter background
$('#filterbackground').on('change', function (event) {
$("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$('#filtericons').on('change', function (event) {
$("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
});
});
</script>
步骤 9：现在构建并运行您的代码，您将获得如下所示的输出。
祝你编程愉快 :)
历史
第一个版本： 2014 年 10 月 13 日晚上 10:30。