假设我们在谈论订单,订单有以下属性
public class Order {
public int OrderID
public DateTime OrderDate
public DateTime ShipmentDate
public int OrderTotal
public int OrderStatus
}
在jqgrid对象中,我显示除OrderStatus之外的所有属性
要求是创建一个视图
>左侧的jqGrid
>右侧的面板
在右侧面板中,用户将看到一个表示每个可能的OrderStatus值的复选框列表,并且他想使用两种方法进行搜索(例如选中“已发货的订单”复选框,然后使用Amount大于值的过滤网格)
我已经在jqGrid对象内部配置了高级过滤(multiplesearch：true),我可以创建复合过滤器来组合字段和逻辑运算符.
任何有关如何在用户按搜索按钮时甚至可以从右侧面板提交数据的想法？
更新1：
序言：Oleg样品太棒了,但不幸的是不符合我的客户要求:(
@Oleg：我不明白你为什么这么认为：
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,如下图所示：
客户想要使用两种方法或两者一起过滤网格中的数据：
>使用网格本身提供的多重搜索功能(感谢解决方案提及)
>使用自定义搜索面板(右侧的复选框)
从功能的角度来看,要求很容易表达：当用户单击复选框或使用本机多重搜索进行搜索时,我应该将值发布到服务器,包括复选框状态.
总结一下我应该：
>添加通过本机multiplesearch进行帖子时的复选框状态
>当用户点击复选框时,添加当前的multiplesearch状态(如果有的话)
有没有办法做到这一点？
解决方法
为了能够在表中放置许多复选框,而不需要永久的水平滚动,我旋转了具有“Vertical text inside table headers using a JavaScript-based SVG library”中描述的技术的复选框的列的标题.这种旋转在IE中看起来并不完美,但在其他浏览器中它的工作完美.
您可以将隐藏列中的OrderStatus字段中的数据保存起来,并将位掩码解码为布尔值,该值可在客户端或服务器端生成复选框.
因为使用想要使用multiplesearch：true我不得不提到jQuery.clone中的一个错误,跟随jqGrid在所有版本的IE浏览器中的多搜索的错误.如果您定义更多的一个搜索过滤器,则只使用第一个搜索过滤器,因为所有其他过滤器的操作字段将被读取为未定义.可惜的是,jQuery 1.4.3中的bug也没有修复刚才发布.为了能够使用multiplesearch：true,您可以使用Jiho Han on trirand.com forum的解决方法建议.
所有在一起,您可以看到在the demo example生产电网
在哪里可以搜索多个字段
相应的代码：
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',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',{ name: 'airPost',width: 21,index: 'airPost',formatter: 'checkBox',align: 'center',editoptions: { value: "1:0" },stype: 'select',searchoptions: { value: "1:Yes;0:No" } },{ name: 'heavy',index: 'heavy',stype: "select",{ 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',{ caption: "",buttonicon: "ui-icon-calculator",title: "choose columns",onClickButton: function() {
grid.jqGrid('columnChooser');
}
});
其中rotateCheckBoxColumnHeaders和高级搜索中的修补程序定义如此
// 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);
}
}
}
};
如果您更喜欢将复选框保留在网格外,则可以对onSelectRow事件处理程序内的位掩码OrderStatus进行解码.
更新：我一开始就误以为你的要求.看看modified example.现在看起来像
它更接近你所需要的.
