我正在使用jqgrid 4.6.0。无法在columnchooser上获取可用列/添加列

Question

我希望列选择器如下：我试过小提琴，无法完成。不知所措。

http://www.ok-soft-gmbh.com/jqGrid/WorkingColumnChooser.htm

Please help.

http://jsfiddle.net/nagarajputhiyavan/yNw3C/13180/

Answer 1

查看ok-soft上的示例，您需要初始化网格寻呼机，然后才能将按钮添加到其中。

在添加列选择器按钮之前添加以下代码。

$("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

请注意，您还要以错误的顺序加载javascript文件。应该在jqGrid之前加载mutli选择文件。

Answer 2

• 包括jquery-ui.min.js
• 包括ui.multiselect.js
• 包括ui.multiselect.css
• 包括jquery-ui.css

添加调用列选择器的新按钮

var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
             {   caption: "", buttonicon: "ui-icon-calculator",
                 title: "Choose Columns",
                 onClickButton: function() {
                      grid.jqGrid('columnChooser');
                 }
            });

Answer 3

你的样本中没有一点变通方法，现在它正常工作 - Sample。我直接加载本地数据，因为您还没有解释您的约束。

  

  
• 确保您的json数据与本地数据相似。
  
• 同样multiselect插件首先在jqgrid之前加载。
  

以下是修改后的网格代码，

var data = [{ id: "111",  thingy: "Test", blank: "N/A", number: "100",  status: "active"},
            { id: "112",  thingy: "Testing 123", blank: "N/A", number: "20",  status: "Inactive"},
            { id: "200",  thingy: "My data", blank: "N/A", number: "80",  status: "Inactive"}];

$("#grid").jqGrid({
    datatype: "local",
    data: data,
    height: 250,
    pager: '#pager',
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60 },
    {
        name: 'thingy',
        index: 'thingy',
        width: 90 },
    {
        name: 'blank',
        index: 'blank',
        width: 50},
    {
        name: 'number',
        index: 'number',
        width: 80 },
    {
        name: 'status',
        index: 'status',
        width: 80 }
    ],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

$("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
$("#grid").jqGrid("navButtonAdd", "#pager", {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose Columns",
      onClickButton: function () {
        $(this).jqGrid("columnChooser");
      }
});

您的网格和列选择器如下所示，