问题描述
我在这里看到了下面这个带有冻结列和过滤器工具栏的演示：
现在我想要实现同一个示例功能，在演示中是availbale：
我试过了，但它不工作..任何人都可以创建一个既冻结列和切换过滤器工具栏？
我尝试从github下载最新的jqgrid代码，并尝试复制演示如下（如你所说的问题是固定的，我认为没有必要的frozendiv，在演示中的fixGBoxHeight函数你已经显示我以前，即 作为基础，而不是。
你是对的。当前冻结列的实现有动态显示或隐藏搜索工具栏的问题。我将其解释为中的一个错误。 p>
直到错误不能修复我建议你手动显示或者隐藏网格的冻结部分。 显示了如何实现这个。演示代码中最重要的部分如下：
$ b
$ grid.jqGrid（ 'filterToolbar'，{stringResult：true，searchOnEnter：true，defaultSearch：'cn'}）;
$ grid.jqGrid（'navButtonAdd'，'#pager'，{
caption：Filter，
title：切换搜索工具栏，
buttonicon：'ui-
onClickButton：function（）{
this.toggleToolbar（）;
if（$ .isFunction（this.p._complete））{
if （$。'ui-search-toolbar'，this.grid.hDiv）.is（'：visible'））{
$（'。ui-search-toolbar'，this.grid.fhDiv）。 show（）;
} else {
$（'。ui-search-toolbar'，this.grid.fhDiv）.hide（）;
}
this.p. _complete.call（this）;
fixPositionsOfFrozenDivs.call（this）;
}
}
}）;
$ grid [0] .toggleToolbar（）;
I have seen the following demo with frozen column and filter toolbar here:http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns.htm
Now for the same example I want to implement toggle feature that was availbale in demo:http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSearchingToolbar1.htm
I tried it but it is not working.. can anybody create a demo that has both frozen column and toggle filter tool bar?
I tried to download the latest jqgrid code from github and tried to replicate the demo as follows( as u said the issue was fixed i thought no need of the frozendiv, fixGBoxHeight functions in the demo u have shown me previously i.e http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle.htm)
$grid.jqGrid({
datatype: 'local',
data: mydata,
colNames: [/*'Id', */'Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
//{name: 'id', index: 'id', width: 45, align: 'center', sorttype: 'int', frozen: true},
{name: 'name', index: 'name', width: 70, editable: true, frozen: true},
{name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: {newformat: 'm/d/Y'}, datefmt: 'm/d/Y'},
{name: 'amount', index: 'amount', width: 75, formatter: 'number', align: 'right', editable: true},
{name: 'tax', index: 'tax', width: 50, formatter: 'number',
formatoptions: {decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'},
align: 'right', editable: true, editoptions: {readonly: true}},
{name: 'total', index: 'total', width: 60, formatter: 'number', align: 'right', editable: true},
{name: 'closed', index: 'closed', width: 70, align: 'center', editable: true,
formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
{name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select', editable: true,
edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
{name: 'note', index: 'note', width: 70, sortable: false, editable: true}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
caption: 'Frozen columns with dynamic shown filter toolbar',
height: '100%',
shrinkToFit: false,
width: 550,
resizeStop: function () {
/*resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);*/
},
loadComplete: function () {
//fixPositionsOfFrozenDivs.call(this);
}
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
{multipleSearch: true, overlay: 0});
$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'});
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "Filter",
title: "Toggle Searching Toolbar",
buttonicon: 'ui-icon-pin-s',
onClickButton: function () {
this.toggleToolbar();
/*if ($.isFunction(this.p._complete)) {
if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) {
$('.ui-search-toolbar', this.grid.fhDiv).show();
} else {
$('.ui-search-toolbar', this.grid.fhDiv).hide();
}
this.p._complete.call(this);
fixPositionsOfFrozenDivs.call(this);
}*/
}
});
$grid[0].toggleToolbar();
/*$grid.jqGrid('gridResize', {
minWidth: 450,
stop: function () {
fixPositionsOfFrozenDivs.call($grid[0]);
fixGboxHeight.call($grid[0]);
}
});
resizeColumnHeader.call($grid);*/
$grid.jqGrid('setFrozenColumns');
/*$grid.p._complete.call($grid);
fixPositionsOfFrozenDivs.call($grid);*/
});
But still the code is not going to work and the filtertoolbar not working as it is in your previous demo(http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle.htm)
First of all I would recommend you to use the demo from the answer as the basis instead of the demo from the previous answer.
You are right. The current implementation of frozen columns has problem with dynamic showing or hiding of the searching toolbar. I interpret it as a bug in the toggleToolbar.
Till the bug is not fixed I suggest that you show or hide the toolbar in the frozen part of the grid manually. The demo shows how to implement this. The most important part of the code of the demo you find below:
$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'});
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "Filter",
title: "Toggle Searching Toolbar",
buttonicon: 'ui-icon-pin-s',
onClickButton: function () {
this.toggleToolbar();
if ($.isFunction(this.p._complete)) {
if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) {
$('.ui-search-toolbar', this.grid.fhDiv).show();
} else {
$('.ui-search-toolbar', this.grid.fhDiv).hide();
}
this.p._complete.call(this);
fixPositionsOfFrozenDivs.call(this);
}
}
});
$grid[0].toggleToolbar();
这篇关于jqgrid切换过滤器工具栏冻结列不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！