如何更改 jqgrid 中弹出的列选择器中的列名? [英] How to change column name in column chooser pop up in jqgrid?
问题描述
我有一个两列标题 Phase1 &第 2 阶段(图 1).现在在列选择器窗口中显示列名(图 2)
- 姓名
- 类别
- 子类
- 类别
- 子类别
我想以不同的方式显示
- 姓名
- Ph1类别
- Ph1 子类别
- 二级学科
Ph2 子类别
注意:根据我的要求不要更改列名
$grid.jqGrid({数据:我的数据，数据类型:本地"，colNames:['名称','类别','子类别','类别','子类别'],col型号:[{名称:名称"}，{名称:类别"}，{名称:子类别"}，{名称:PRCategory"}，{名称:PRSubcategory"}],cmTemplate:{宽度:200}，网格视图:是的，自动编码:真，排序名称:名称"，观看记录:真实，行号:真，排序顺序:desc"，忽略大小写:真，寻呼机:#pager"，高度:自动"，标题:如何在本地更好地使用 filterToolbar"}).jqGrid("navGrid", "#pager",{假，添加:假，删除:假，搜索:假，刷新:假})；setSearchSelect.call($grid, "Category");setSearchSelect.call($grid, "子类别");$grid.jqGrid("setColProp", "名称", {搜索选项:{选择:[cn"]，数据初始化:函数(元素){$(elem).autocomplete({来源:getUniqueNames.call($(this), "Name"),延迟:0，最小长度:0，选择:函数(事件，用户界面){var $myGrid，网格；$(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) {网格 = $myGrid[0];if ($.isFunction(grid.triggerToolbar)) {grid.triggerToolbar();}}} 别的 {//刷新过滤器$(elem).trigger("改变");}}});}}});$grid.jqGrid("filterToolbar",{stringResult: true, searchOnEnter: true, defaultSearch: "cn"});jQuery("#list").jqGrid('setGroupHeaders', {使用ColSpanStyle:真，组头:[{startColumnName: 'Category', numberOfColumns: 2, titleText: '<center>Phase 1</center>'},{startColumnName: 'PRCategory', numberOfColumns: 2, titleText: '<center>Phase 2</center>'}]});//选择列代码开始jQuery("#list").jqGrid('setGroupHeaders', {使用ColSpanStyle:真});$.extend(true, $.ui.multiselect, {语言环境:{addAll: '使所有可见',removeAll: '全部隐藏',itemsCount: 'Avlialble 列'}});$.extend(true, $.jgrid.col, {宽度:250，身高:330，模态:真，msel_opts:{dividerLocation:0.5}，对话选择:{最小宽度:140，显示:'盲'，隐藏:'爆炸'}});jQuery("#list").jqGrid('navButtonAdd', '#pager', {标题: ""，buttonicon: "ui-icon-calculator",title: "选择列",onClickButton: 函数 () {$(this).jqGrid('columnChooser');}});//列选择器代码停止});//]]>图片 1
图片 2
我觉得你的问题很有趣.所以我+1.因此我花了一些时间修改了 显示
它使用columnChooser
$(this).jqGrid("columnChooser", {buildItemText:函数(选项){如果(options.groupTitleText === null){返回 $.jgrid.stripHtml(options.colName || options.cmName);}返回 $.jgrid.stripHtml(options.groupTitleText) + " -> " +$.jgrid.stripHtml(options.colName || options.cmName);}});正如我在回答开头所写的那样，现在存在 showHideColumnMenu 方法作为免费的 jqGrid 插件(我想稍后在 jqGrid 的主代码中移动它).只需添加以下简单调用即可使用它
$grid.jqGrid("showHideColumnMenu");它使用 jQuery UI Menu 并将 contextmenu 绑定到列标题.单击鼠标右键创建上下文菜单，如下图所示(参见 使用了上述所有功能并使用 createContexMenuFromNavigatorButtons 在网格主体内另外显示上下文菜单.菜单包含与导航栏相同的项目.如果网格有很多行，这是非常实用的.无需滚动到底部或顶部工具栏即可仅单击导航器按钮.结果如下图所示
附:如果您的代码中有错误的结果，请检查上述演示中插入的插件的 CSS/JavaScript 路径.
I have a two column header Phase1 & Phase 2(image 1). Now showing the column names(Image 2) in column chooser window
- Name
- Category
- Subcategory
- Category
- Subcategory
I want to show differently like
- Name
- Ph1 Category
- Ph1 Subcategory
- Ph2 Category
Ph2 Subcategory
Note: According to my requirement do not change the column name
$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 }); //]]>Image 1
Image 2
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.
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:
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
It uses the following options of 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);
}
});
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");
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);
}
});
produces the following custom menu
I added to free jqGrid the plugin createContexMenuFromNavigatorButtons which can be used like below
$grid.jqGrid(
"createContexMenuFromNavigatorButtons",
$grid.jqGrid("getGridParam", "pager")
);
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. Please examine the CSS/JavaScript paths of plugins inserted in the above demos if you have wrong results in your code.
这篇关于如何更改 jqgrid 中弹出的列选择器中的列名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
