jqGrid的：使用多种方法来过滤数据 [英] jqGrid: using multiple methods to filter data
问题描述
我的要求是，以显示与多个过滤器的网页应用到网格中的数据。
My requirement is to show a page with multiple filters to apply to grid data.
假设我们正在谈论的订单和订单具有以下属性。
Suppose we are talking about Orders and an order has the following attributes
public class Order {
public int OrderID
public DateTime OrderDate
public DateTime ShipmentDate
public int OrderTotal
public int OrderStatus
}
在jqGrid的对象，我显示的所有属性除了OrderStatus
Inside the jqgrid object I am showing all the attributes except the OrderStatus
要求是要创建具有一个视图
The requirement is to create a view that has
- 在jqGrid的左侧部分
- 在右侧面板
在右侧面板内，用户将看到重新presents每一个可能的OrderStatus值复选框名单，他想用这两种方法（例如选择复选框发货的订单，然后过滤与金额网格搜索大于某个值）
Inside the right panel the user will see a list of checkboxes that represents every possible OrderStatus value and he want to search using both methods (for example selecting the checkbox "Shipped Orders" and then filtering the grid with Amount greater than a value)
我已经配置了先进的过滤（ multiplesearch：真正的）的jqGrid的对象中，我能够创造相结合的领域和逻辑运算复杂的过滤器
I have already configured the advanced filtering (multiplesearch:true) inside the jqGrid object and I am able to create complex filters combining fields and logical operators.
这是我如何从右侧面板甚至提交数据的任何想法，当用户preSS搜索按钮？
Any ideas on how I can submit even the data from the right panel when the user press the search button?
更新1
preamble：奥列格样品是太棒了，但遗憾的是不适合我的客户的要求：（
Preamble: Oleg sample is fantastic but unfortunately does not fits requirements of my customer :(
@Oleg：我不明白为什么你认为：
@Oleg: I do not understand why you think that:
如果数据是在网格的外
你会显示在订单详细信息
只为选择行右窗格中。
因此，用户将没有那么好
数据的概况。
If the data are outside of the grid you will be show the order details on the right pane only for selected row. So the user will have not so good overview of the data.
也许我的描述不是那么清楚，但我不会表现出任何顺序细节。为了更好地阐明我的要求我修改了样品，向您展示所需的最终UI是如下图所示：
maybe my description was not so clear but I am not going to show any order detail. To better clarify my requirement I have modified your sample to show you the desired final UI which is as in the following image:
客户想用两种方法或筛选网格中的数据两者一起：
The customer want to filter the data in the grid using two methods or both together:
- 使用由电网本身（感谢解决办法提）提供的
multiplesearch设施 - 使用提供的自定义搜索小组（一个与右侧的复选框）
从功能的角度来看的要求是很容易的前preSS：当一个复选框用户点击或使用本机 multiplesearch 我做一个搜索应该张贴值，服务器还包括复选框状态。
From a functional point of view the requirement is very easy to express: When the user click on a checkbox or make a search using the native multiplesearch I should post values to the server including also the checkboxes state.
要总结我应该：
- 添加复选框状态时，职位是通过本机发
multiplesearch - 添加当前
multiplesearch状态（如果有的话），当用户点击一个复选框
- Add the checkboxes state when a post is made through the native
multiplesearch - Add the current
multiplesearchstate (if any) when the user click on a checkbox
有没有办法做到这一点？
Is there a way to do this?
推荐答案
我明白这个要求很不错。在关闭情况下，我使用复选框 jqGrid的内部。最具优势具有的jqGrid内的信息不仅容易搜索的可能性。如果数据网格之外，你将显示订单的详细信息在右窗格中的仅针对选定的行即可。因此，用户将没有那么好概述的数据。
I understand this requirement very good. In the close case I used checkboxes inside of jqGrid. The most advantage to having the information inside of jqGrid is not only the possibility of easy searching. If the data are outside of the grid you will be show the order details on the right pane only for selected row. So the user will have not so good overview of the data.
要能够把表中许多复选框没有永久水平滚动我旋转列头具有在<一个记载的技术复选框href=\"http://stackoverflow.com/questions/2705174/vertical-textes-inside-of-table-headers-with-respect-of-a-javascript-based-on-svg\">http://stackoverflow.com/questions/2705174/vertical-textes-inside-of-table-headers-with-respect-of-a-javascript-based-on-svg.这个旋转看上去不是在IE完美，但在其他浏览器，它可以完美运行。
To be able to place many checkboxes in the table without permanent horizontal scrolling I rotated headers of the columns having "checkbox with the technique described in http://stackoverflow.com/questions/2705174/vertical-textes-inside-of-table-headers-with-respect-of-a-javascript-based-on-svg. This rotation looks not perfect in IE, but in other browser it works perfect.
您可以在一个隐藏的列，德code位掩码保存从 OrderStatus 字段中的数据到建在客户端或服务器上的复选框布尔一面。
You can hold the data from the OrderStatus field in a hidden column and decode the bitmask to boolean which build checkboxes either on the client or on the server side.
由于使用要使用 multiplesearch：真正的我不得不提一下有关的这遵循在IE的浏览器的所有版本的jqGrid多方查找错误jQuery.clone 。如果定义了作为一个搜索过滤器只有第一个将被使用，因为所有其他过滤器的操作字段将被解读为未定义。这是一个遗憾，但错误也没有固定在刚刚发布的jQuery的1.4.3。为了能够使用 multiplesearch：真正的您可以通过<一个使用建议的解决方法href=\"http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/\">Jiho韩对trirand.com论坛。
Because use want to use multiplesearch:true I have to mention about a bug in jQuery.clone which follow to the bug in jqGrid multi-search in all versions of IE browsers. If you define more as one search filters only the first one will be used because the operation field of all other filters will be read as undefined. It's a pity, but the bug is also not fixed in the jQuery 1.4.3 just published. To be able to use multiplesearch:true you can use workaround suggestion by Jiho Han on trirand.com forum.
总之你可以看到
All together you can see in the demo example which produce the grid
在这里你可以搜索多个字段
where you can search for multiple fields
相应的code：
var myData = [
{ orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" },
{ orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" },
{ orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" }
];
// decode 'orderStatus' column and add additional boolean data based on the bitmap mask
for (var i=0, l=myData.length; i<l; i++) {
var myRow = myData[i];
var orderStatus = parseInt(myRow.orderStatus, 10);
myRow.airPost = (orderStatus & 2) != 0? "1": "0";
myRow.heavy = (orderStatus & 1) != 0? "1": "0";
}
var grid = jQuery('#list');
grid.jqGrid({
data: myData,
datatype: 'local',
caption: 'Order Details',
height: 'auto',
gridview: true,
rownumbers: true,
viewrecords: true,
pager: '#pager',
rownumbers: true,
colNames: ['Order ID', 'Order', 'Shipment', 'Air-Post', 'Heavy', 'RowVersion'],
colModel: [
{ name: 'orderID', index: 'orderID', key:true, width: 120, sorttype: 'int' },
{ name: 'orderDate', index: 'orderDate', width: 180,
sorttype: 'date', formatter: 'date' },
{ name: 'shipmentDate', index: 'shipmentDate', width: 180,
sorttype: 'date', formatter: 'date' },
{ name: 'airPost', width: 21, index: 'airPost', formatter: 'checkbox', align: 'center',
editoptions: { value: "1:0" }, stype: 'select', searchoptions: { value: "1:Yes;0:No" } },
{ name: 'heavy', width: 21, index: 'heavy', formatter: 'checkbox', align: 'center',
editoptions: { value: "1:0" }, stype: "select", searchoptions: { value: "1:Yes;0:No" } },
{ name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true }
]
}).jqGrid ('navGrid', '#pager', { edit: false, add: false, del: false, refresh: true, view: false },
{},{},{},{multipleSearch:true})
.jqGrid ('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
grid.jqGrid('columnChooser');
}
});
其中， rotateCheckboxColumnHeaders 和定义，因此在高级搜索中修正错误
where rotateCheckboxColumnHeaders and the bugfix in the advanced search defined so
// we use workaround from http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/
// to fix the bug in the jQuery.clone (see http://bugs.jquery.com/ticket/6793 and
// dscussion on the http://api.jquery.com/clone/
jQuery.event.special.click = {
setup: function() {
if (jQuery(this).hasClass("ui-search")) {
jQuery(this).bind("click", jQuery.event.special.click.handler);
}
return false;
},
teardown: function() {
jQuery(this).unbind("click", jQuery.event.special.click.handler);
return false;
},
handler: function(event) {
jQuery(".ui-searchFilter td.ops select").attr("name", "op");
}
};
var rotateCheckboxColumnHeaders = function (grid, headerHeight) {
// we use grid as context (if one have more as one table on tnhe page)
var trHead = jQuery("thead:first tr", grid.hdiv);
var cm = grid.getGridParam("colModel");
jQuery("thead:first tr th").height(headerHeight);
headerHeight = jQuery("thead:first tr th").height();
for (var iCol = 0; iCol < cm.length; iCol++) {
var cmi = cm[iCol];
if (cmi.formatter === 'checkbox') {
// we must set width of column header div BEFOR adding class "rotate" to
// prevent text cutting based on the current column width
var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
headDiv.width(headerHeight).addClass("rotate");
if (!jQuery.browser.msie) {
if (jQuery.browser.mozilla) {
headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7);
}
else {
headDiv.css("left", (cmi.width - headerHeight) / 2);
}
}
else {
var ieVer = jQuery.browser.version.substr(0, 3);
// Internet Explorer
if (ieVer !== "6.0" && ieVer !== "7.0") {
jQuery("span", headDiv).css("left", 0);
headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2);
}
else {
headDiv.css("left", 3);
}
headDiv.parent().css("zoom",1);
}
}
}
};
如果你这样做preFER举行的复选框，你可以做位掩码的解码网格外 OrderStatus 里面的 onSelectRow 事件处理程序
If you do prefer to hold the checkboxes outside of the grid you can do the decoding of the bit-mask OrderStatus inside of onSelectRow event handler.
更新时间：：我真的是在一开始误解了你的要求。看看href=\"http://www.ok-soft-gmbh.com/jqGrid/CheckboxesWithVerticalHeaders1.htm\">变形例的
UPDATED: I really something misunderstood your requirements at the beginning. Look at the modified example. Now it looks like
和它更接近你所需要的。
and it is more close to what you need.
这篇关于jqGrid的：使用多种方法来过滤数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
