Jqgrid ColumnChooser列顺序更改不起作用_Jqgrid

Jqgrid ColumnChooser列顺序更改不起作用

jqgrid

Jqgrid ColumnChooser列顺序更改不起作用,jqgrid,Jqgrid,我是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" /> <lin

我是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>

以下是我到目前为止所做的尝试

当我添加

{“msel_opts”：$.ui.multiselect.defaults}

作为选项时，我得到的是ui未定义的JS错误

当我尝试包含grid.jqueryui.js时，得到的对象或方法不受支持

我被困在这里了。有人能帮忙吗？

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

无论如何，一个小的工作例子可以帮助你发现你的错误。

< P>对于同样要求的其他人，你可以考虑我的CulnDe选择器实现。我的对话表单声明。（单击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

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

函数createDialogDiv（）{
var colModelDiv=jq（#grid”）.jqGrid（'getGridParam'，'colModel'）；
var colNamesDiv=jq（“#grid”）.jqGrid（'getGridParam'，'colNames'）；
//警报（JSON.stringify（colModelDiv））；
//警报（JSON.stringify（colNameDiv））；
var container=document.getElementById（'dialog-form'）；
//警报（colNamesDiv.length）；
var chckBox=“”；
对于（i=0；我注意到“新版本3.6”下的columnchooser在我的客户端（IE 8）中也不起作用）但在Chrome中工作得很好。谢谢Oleg。我必须创建自定义列选择器，因为我的其他要求不允许隐藏某些必需的列。@luckyMohan:不客气！在我看来，如果您使用的done事件，您可以更轻松地实现此行为。另一种方法是设置自定义。{done}事件似乎更像是一个事后事件，而不是限制用户选择这样的列。我仍然认为使用columnChooser将是更好的方法。为了模拟它的功能，我必须使用下面的所有代码和网格上的{sortable:true}来重新排列列。关于{apply_perm}，它看起来像是为了完全隐藏这样的必需列以供选择…我认为这可能无法说服用户。
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() {
        }
    }); 
});

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

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