我正在使用jqGrid columnChooser,如下所示:
jQuery(grid).jqGrid(
'navButtonAdd',
pagerDiv,
{
caption: "Columns",
buttonicon: "ui-icon-newwin",
title: "Hide/Show Columns",
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
$(this).jqGrid('remapColumns', perm, true);
}
},
modal: true,
width: 400,
height: 300,
classname: 'column-chooser-select'
});
}
}
);
并且想知道是否有一种方法可以在columnChooser上指定一个事件处理程序(使用w / jqGrid附带的jQuery UI Multiselect插件),无论何时添加或删除列,都会触发该事件处理程序。所以我想这是一个由两部分组成的问题:
关于我正在努力实现的目标的一些背景知识:
我的默认网格配置隐藏了许多列。其中一些列不是从db填充的 - 它们是模糊的,很少使用的数据元素,如果填充将大大降低查询执行性能(多个连接涉及具有1亿多个记录的表)。
如果用户选择其中一列进行显示,我想警告他们需要另一次到服务器的往返,这可能需要一段时间 - 并为他们提供取消列添加的选项。
由于
答案 0 :(得分:5)
我想我理解你的问题并发现你的问题很有趣,所以我为你编写了演示程序,展示了如何解决这个问题。
columnChooser在内部使用jQuery UI Multiselect插件,该插件使用jQuery UI Sortable。所以我建议使用jQuery UI Sortable的sortreceive事件来捕获所需的信息。
代码可以是以下
$("#grid").jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
.bind("sortreceive", function (event, ui) {
alert('column "' + ui.item.text() + '" is choosed');
});
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
.click(function () {
alert('column "' + $(this).parent().text() + '" is choosed');
});
}
});
请参阅演示here。
代码绑定对话框初始化时列选择器中列的初始列的“+”上的“click”事件。我认为这对你来说已经足够了。如果需要,您可以轻松修改代码,以支持“+”上的“点击”列,这些列将在使用columnChooser
的工作期间从左侧列表中删除。
我几乎忘记提及我在columnChooser
的演示改进版本中使用过(请参阅the answer),但我的上述建议也适用于columnChooser
的原始版本。< / p>
答案 1 :(得分:1)
我在JqGrid中使用以下代码用于列选择器插件。当我勾选网格中的选择全部复选框时。我想排除特定列(默认情况下它不应该显示在我的网格中) 我在col模型中使用了hidden = True属性。买我想在列选择器中处理这些。
function Properties_Columnchooser() {
$('#btn_setColumns').click(function () {
jQuery('#grid-tableProperties').jqGrid('columnChooser',{
"shrinkToFit" : true,
"autowidth" : true,
done : function(perm) {
w = $(window).width();
// alert('done ' + w);
if (perm)
{
this.jqGrid("remapColumns", perm, true);
this.setGridWidth(w - 30, true);
$('.ui-search-input').show();
}
else
{
}
}
}
);
});
}