Question

我是jQuery＆amp;的新手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;
    }}

我正在使用如下所示的columnchooser。

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

以下是我到目前为止所尝试的内容。

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

我被困了@这个。有人会帮忙吗？

Answer 1

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

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

Answer 2

对于处于相同要求的其他人，您可以考虑我的columnchooser实现。我的对话形式宣言。（单击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');
            }
        });

将保存（OK）和取消按钮添加到我的Div。

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');
}

Plz让我知道你对这个问题的看法。

Jqgrid ColumnChooser列顺序更改不起作用

2 个答案: