Jqgrid ColumnChooser 列顺序更改不起作用答案

【问题标题】：Jqgrid ColumnChooser column order change is not workingJqgrid ColumnChooser 列顺序更改不起作用
【发布时间】：2011-04-18 16:06:53
【问题描述】：

我是 jQuery 和 jgrid 的新手。我正在尝试使用 columnchooser 来让用户删除列并更改列顺序。删除和添加列工作正常。但是更改列顺序不起作用。以下是我在代码中的内容。

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jqgrid/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/edi/standard.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-multiselect/ui.multiselect.css" />
    <script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
    <!-- <script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.11.custom.js"></script>-->
    <script type="text/javascript" src="/xxxx/resources/js/jqgrid/grid.locale-en.js"></script>
    <script type="text/javascript" src="/xxxx/resources/js/jquery/ui.multiselect.js"></script>
    <script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript">
        var jq = jQuery.noConflict();
        jq.jgrid.no_legacy_api = false;
    </script>
    <script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script> <!-- 3.8.2 version-->
    <!--<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.searchFilter.js"></script>-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XXXX</title>
</head>

ui.multiselect.js 文件已经包含建议的修复。

$.widget("ui.multiselect", {
    options: {
    sortable: true,
    searchable: true,
    doubleClickable: true,
    animated: 'fast',
    show: 'slideDown',
    hide: 'slideUp',
    dividerLocation: 0.6,
    nodeComparator: function(node1,node2) {
        var text1 = node1.text(),
            text2 = node2.text();
        return text1 == text2 ? 0 : (text1 < text2 ? -1 : 1);
    }
}},
destroy: function() {
    this.element.show();
    this.container.remove();
// Modified to work with jquery.ui.1.8
    if ($.Widget === undefined)
        $.widget.prototype.destroy.apply(this, arguments);
    else {
        $.Widget.prototype.destroy.apply(this, arguments);
        return this;
    }}

我正在使用如下的列选择器。

jq("#grid").jqGrid('navButtonAdd','#pager',
                   { caption: "Columns",
                     title: "Reorder Columns",
                     onClickButton : function (perm){
                         jq("#grid").jqGrid('columnChooser');
                     }
                   });

以下是我目前尝试过的。

当我添加 {"msel_opts": $.ui.multiselect.defaults} 作为选项时，我收到 ui undefined JS 错误。
当我尝试包含 grid.jqueryui.js 时，得到不支持的对象或方法。

我被困住了@这个。有人可以帮忙吗？

【问题讨论】：

我注意到“3.6 版本中的新功能”下的 columnchooser 也无法在我的客户端（IE 8）中运行，但在 Chrome 中运行良好。 trirand.com/blog/jqgrid/jqgrid.html

标签： jqgrid

【解决方案1】：

很难在您的代码中找到错误，因为您只发布了一个代码片段。可能您尝试在导航器工具栏中添加与“navButtonAdd”相关的按钮在您创建与“navGrid”相关的导航器工具栏之前。

无论如何，一个小的工作示例here 可以帮助您找到错误。

【讨论】：

感谢奥列格。由于我不应该允许隐藏某些必需的列的其他要求，我不得不创建我的自定义列选择器。
@luckyMohan：不客气！在我看来，如果您使用columnChooser 的done 事件，您可以更轻松地实现此行为。另一种方法是设置您的自定义apply_perm。
{done} 事件似乎更像是一个事后事件，而不是限制用户选择这样的列。我仍然认为使用 columnChooser 会是更好的方法。为了模拟它的功能，我必须使用下面的所有代码和网格上的 {sortable:true} 来重新排列列。关于 {apply_perm}，它看起来像是完全隐藏了这样的必需列以供选择......我认为这可能无法说服用户。

【解决方案2】：

对于其他有相同要求的人，您可以考虑我的 columnchooser 实现。我的对话框表单声明。（单击列选择器按钮时将显示的对话框。

不允许删除所有必填字段。

为我的网格创建 ColumnChooser 按钮。

jq("#grid").jqGrid('navButtonAdd','#pager',{
            caption: "Columns",
            title: "Customize Columns",
            onClickButton : function (){
            /*jq("#grid").jqGrid('columnChooser',{
                height:columnChooserHt
                });*/
                createDialogDiv();
                jq( "#dialog-form" ).dialog('open');
            }
        });

在我的 Div 中添加 Save(OK) 和 Cancel 按钮。

jq(function(){
    jq( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "OK": function() {
                changeColView();
                jq( "#dialog-form" ).dialog('close');
            },
            Cancel: function() {
                jq( "#dialog-form" ).dialog('close');
            }
        },
        close: function() {
        }
    }); 
});

将列名插入需要在 ColumnChooser 对话框中显示的选择框的功能。

function createDialogDiv(){
    var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
    var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
    //alert(JSON.stringify(colModelDiv));
    //alert(JSON.stringify(colNameDiv));
    var container = document.getElementById('dialog-form');
    //alert(colNamesDiv.length);
    var chckBox="";
    for(i=0;i<colNamesDiv.length;i++){
        if(colModelDiv[i].hidden && colModelDiv[i].hidden == true ){
            chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"'>"+colNamesDiv[i]+"</input><br/>";
        }else{
            if(colModelDiv[i].editrules && colModelDiv[i].editrules.required){
                chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' disabled>"+colNamesDiv[i]+"</input><br/>";
            }
            else
                chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' checked>"+colNamesDiv[i]+"</input><br/>";
        }

    }   
    container.innerHTML=chckBox;
}

最后是改变从 Columnchooser 中选择的列的实际方法。

function changeColView(){
    var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
    var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
    for(i=0;i<colNamesDiv.length;i++){
        var chckBox=document.getElementById(colNamesDiv[i]);
        if(chckBox && chckBox.value && (!(chckBox.checked || chckBox.disabled))){
            jq("#grid").jqGrid('hideCol',chckBox.value);
        }
        if(chckBox && chckBox.checked){
            jq("#grid").jqGrid('showCol',chckBox.value);
        }
    }
    jq("#grid").trigger('reloadGrid');
}

请让我知道您对此的看法。

【讨论】：