如何更改在jqgrid中弹出的列选择器中的列名? [英] How to change column name in column chooser pop up in jqgrid?
问题描述
我有两列标题Phase1&第2阶段(图片1).现在在列选择器窗口中显示列名称(图像2)
I have a two column header Phase1 & Phase 2(image 1). Now showing the column names(Image 2) in column chooser window
- 名称
- 类别
- 子类别
- 类别
- 子类别
我想像
- 名称
- Ph1类别
- Ph1子类别
- Ph2类别
-
Ph2子类别
- Name
- Ph1 Category
- Ph1 Subcategory
- Ph2 Category
Ph2 Subcategory
注意:根据我的要求，请勿更改列名
$grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Name','Category','Subcategory','Category','Subcategory'],
colModel: [
{name: "Name"},
{name: "Category"},
{name: "Subcategory"},
{name: "PRCategory"},
{name: "PRSubcategory"}
],
cmTemplate: {width: 200},
gridview: true,
autoencode: true,
sortname: "Name",
viewrecords: true,
rownumbers: true,
sortorder: "desc",
ignoreCase: true,
pager: "#pager",
height: "auto",
caption: "How to use filterToolbar better locally"
}).jqGrid("navGrid", "#pager",
{edit: false, add: false, del: false, search: false, refresh: false});
setSearchSelect.call($grid, "Category");
setSearchSelect.call($grid, "Subcategory");
$grid.jqGrid("setColProp", "Name", {
searchoptions: {
sopt: ["cn"],
dataInit: function (elem) {
$(elem).autocomplete({
source: getUniqueNames.call($(this), "Name"),
delay: 0,
minLength: 0,
select: function (event, ui) {
var $myGrid, grid;
$(elem).val(ui.item.value);
if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
$myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
if ($myGrid.length > 0) {
grid = $myGrid[0];
if ($.isFunction(grid.triggerToolbar)) {
grid.triggerToolbar();
}
}
} else {
// to refresh the filter
$(elem).trigger("change");
}
}
});
}
}
});
$grid.jqGrid("filterToolbar",
{stringResult: true, searchOnEnter: true, defaultSearch: "cn"});
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'Category', numberOfColumns: 2, titleText: '<center>Phase 1</center>'},
{startColumnName: 'PRCategory', numberOfColumns: 2, titleText: '<center>Phase 2</center>'}
]
});
//Choose Column code start
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true
});
$.extend(true, $.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hide All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 250,
height: 330,
modal: true,
msel_opts: {dividerLocation: 0.5},
dialog_opts: {
minWidth: 140,
show: 'blind',
hide: 'explode'
}
});
jQuery("#list").jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
}
});
//Column chooser code stop
});
//]]>
图片1
图片2
推荐答案
我发现您的问题非常有趣.所以我+1.因此，我花了一些时间并修改了免费jqGrid 中使用的columnChooser代码.我还修改了showHideColumnMenu插件，该插件最初是作为问题的答案创建的.我在免费jqGrid的代码中做了一些小的修改，将插件添加到免费的jqGrid存储库.下面我将描述如何使用columnChooser，showHideColumnMenu和另一种新方法createContexMenuFromNavigatorButtons.
I find your question very interesting. So +1 from me. Therefore I invested some my time and modified the code of columnChooser used in free jqGrid. I modified additionally showHideColumnMenu plugin, which I created initially as the answer on the issue. I made small modifications in the code of free jqGrid and added the plugin to the free jqGrid repository. Below I describe how one can use columnChooser, showHideColumnMenu and one more new method createContexMenuFromNavigatorButtons.
您遇到的问题不仅在columnChooser中.即使您确实愿意填写列名，您仍然会遇到以下问题:用户可以更改列的顺序，以便将列移入/移出组，并且它将中断当前对列分组的实现.我在columnChooser中看到的唯一方法:不要在done回调内部调用this.jqGrid("remapColumns", perm, true); .我在免费jqGrid中修改了columnChooser的代码，使其遵循规则.
The problem which you have is not only in the columnChooser. Even if you would do fill the names of columns like you want, you will still have the problem that the user can change the order of columns so that the columns will be moved in/out of the group and it will break the current implementation of column grouping. The only way which I see in columnChooser: don't call this.jqGrid("remapColumns", perm, true); inside of the done callback. I modified the code of columnChooser in free jqGrid so that it follows the rule.
现在最简单地使用列标题(请参见演示)将显示如下图所示的结果:
Now the simplest usage of column header (see the demo) will displays the results like on the picture below:
此外，我介绍了回调buildItemText，该回调允许自定义columnChooser中显示的文本.回调具有一个对象作为唯一参数. options参数具有以下属性iCol(colModel中的索引)，cm(colModel的项目)，cmName(cm.name)，colName(colName[iCol])和groupTitleText是分组头(来自setGroupHeaders的groupHeaders选项的titleText属性).结果，您可以完全自定义显示的文本. 下一个演示显示
Additionally I introduced the callback buildItemText, which allows to customize the texts displayed in columnChooser. The callback have an object as the only parameter. The options parameter have the following properties iCol (the index in colModel), cm (the item of colModel), cmName (cm.name), colName (colName[iCol]) and groupTitleText which is the grouping header (from titleText property of groupHeaders option of the setGroupHeaders). As the result you can full customize the displayed texts. The next demo displays
它使用以下columnChooser
$(this).jqGrid("columnChooser", {
buildItemText: function (options) {
if (options.groupTitleText === null) {
return $.jgrid.stripHtml(options.colName || options.cmName);
}
return $.jgrid.stripHtml(options.groupTitleText) + " -> " +
$.jgrid.stripHtml(options.colName || options.cmName);
}
});
正如我在回答开始时所写的那样，现在有showHideColumnMenu方法作为免费的jqGrid插件存在(我想稍后将其移至jqGrid的主要代码中).只需添加以下简单调用即可使用它
As I wrote at the beginning of my answer, there are exist now showHideColumnMenu method as free jqGrid plugin (I think to move it later in the main code of jqGrid). It can be used just by adding the following simple call
$grid.jqGrid("showHideColumnMenu");
它使用jQuery UI菜单并将contextmenu绑定到列标题.单击鼠标右键将创建上下文菜单，如下图所示(请参见
It uses jQuery UI Menu and makes the binding of contextmenu to the column headers. The click on the right button of the mouse creates context menu like on the picture below (see the demo).
通过选中/取消选中菜单项，可以在不更改列顺序的情况下启用/禁用列 .该插件也支持自定义.以下代码
By checking/unchecking of menu items one enables/disables the columns without changing the column order. The plugin supports customization too. The following code
$grid.jqGrid("showHideColumnMenu", {
buildItemText: function (options) {
if (options.groupTitleText === null) {
return $.jgrid.stripHtml(options.colName || options.cmName);
}
return "<em>" + $.jgrid.stripHtml(options.groupTitleText) + "</em>: " +
$.jgrid.stripHtml(options.colName || options.cmName);
}
});
产生以下自定义菜单
我向免费jqGrid添加了插件createContexMenuFromNavigatorButtons，该插件可以如下使用
I added to free jqGrid the plugin createContexMenuFromNavigatorButtons which can be used like below
$grid.jqGrid(
"createContexMenuFromNavigatorButtons",
$grid.jqGrid("getGridParam", "pager")
);
相应的演示使用上述所有功能并使用createContexMenuFromNavigatorButtons在网格主体内部另外显示上下文菜单.菜单包含与导航栏相同的项目.如果网格有很多行，这是非常实用的.无需滚动到底部或顶部工具栏即可仅单击导航器按钮.结果如下图所示
The corresponding demo uses all the described above features and displays additionally the context menu inside of the grid body using createContexMenuFromNavigatorButtons. The menu contains the same items like the navigator bar. It is very practical if the grid have many rows. One don't need to scroll to bottom or top toolbar to get click on the navigator button only. The results are like on the picture below
P.S.如果您的代码结果有误，请检查以上演示中插入的插件的CSS/JavaScript路径.
P.S. Please examine the CSS/JavaScript paths of plugins inserted in the above demos if you have wrong results in your code.
这篇关于如何更改在jqgrid中弹出的列选择器中的列名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
