Question

使用了

插件--jquery.jqGrid-4.4.4和使用自定义主题 - jquery-ui-1.9.2.custom.css

我需要将JQGrid列选择器的显示格式设置为THIS EXAMPLE

但我似乎没有选择类似的选项来选择列，而是通过按下用户的“Ctrl”键，显示一个列表框以从下面的图像 Select 中选择行。此外，单击“确定”或“取消”时，jquery.1.9.0.js会抛出异常，如图像

我的文件和链接的引用顺序如下： -

JS参考序列

<link href="../../Content/jquery-ui/jquery.multiselect.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-grid/jquery.multiselect.js" type="text/javascript"></script>

<script src="../../Scripts/jqueryui/1.10.1/jquery-ui.min.js" language="javascript" type="text/javascript"></script>

<script src="../../Scripts/20110223/json2.js" language="javascript" type="text/javascript"></script>


<link rel="stylesheet" href="../../Content/jquery-grid/ui.jqgrid.css" type="text/css" />
<script src="../../Scripts/jquery-grid/grid.locale-en.js" type="text/javascript"></script>

<script src="../../Scripts/jquery-grid/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../../Scripts/Custom_Scripts/list.js" type="text/javascript"></script>

JQGrid函数的JS存储在“list.js”文件中，最后引用。

其中的JS如下： -

$("#jqTable").GridUnload();
var mydata = { id: 1, name: 'abc' };
var mygrid = jQuery("#jqTable").jqGrid({
    url: perfectmspURL,
    mtype: 'POST',
    postdata: { 'mydata1': function () { return JSON.stringify(mydata); } },
    datatype: "json",
    colNames: data.colNames,
    colModel: data.colModel,
    multiselect: false,
    pgbuttons: true,
    rowNum: 25,
    //scroll:true,
    //rowList: [5, 10, 20, 50, 100],
           autowidth:true,
        //    width: 1100,
    height: "98%",
    //scrollOffset: 0,
    //forcefit: true,
    shrinktofit: false,     
    altRows: true,
    altclass: 'myAltRowClass',
    //pginput:false, 
    sortname : 'CompanyName',
    sortorder : 'desc',
    pager: jQuery('#jqTablePager'),
    sortorder: "asc",
    viewrecords: true
});

// appending the pager
jQuery("#jqTable").jqGrid('navGrid', '#jqTablePager', { del: false, add: false, edit:     false, search: false }, {}, {}, {}, { multipleSearch: true });


// for showing show/hide column
var width = parseInt($('#gridcontainer').width()-5);
var grid = $('#jqTable');
grid.jqGrid('navButtonAdd', '#jqTablePager',{ caption: "", buttonicon: "ui-icon-calculator",
             title: "Choose Columns",
             onClickButton: function () {
                 grid.jqGrid('columnChooser', {
                                        done : function (perm) {
                                               // alert("width " + width + "perm : " + perm);
                                                    if (perm) {
                                                        // "OK" button are clicked
                                                        //this.jqGrid("remapColumns", perm, true);
                                                        // the grid width is probably changed co we can get new width
                                                        // and adjust the width of other elements on the page
                                                        //var gwdth = this.jqGrid("getGridParam","width");
                                                        grid.jqGrid("setGridWidth",width);
                                                    } 
                                                    else {
                                                        // we can do some action in case of "Cancel" button clicked
                                                        this.jqGrid("setGridWidth",width);
                                                    }       
                                            }   // done function ends here 
                                        }); 
                                   }   // onClickButton function ends here.
         });      // navButtonAdd ends here

Answer 1

似乎是js文件顺序的问题。尝试更改脚本文件导入顺序

首先添加jquery然后再多选

更改

<script src="../../Scripts/jquery-grid/jquery.multiselect.js" type="text/javascript"></script>
<script src="../../Scripts/jqueryui/1.10.1/jquery-ui.min.js" language="javascript" type="text/javascript"></script>

到

<script src="../../Scripts/jqueryui/1.10.1/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
<script src="../../Scripts/jquery-grid/jquery.multiselect.js" type="text/javascript"></script>

JQGrid列选择器格式

1 个答案: