jqGrid的列选择格式

插件使用 - jquery.jqGrid-4.4.4和自定义主题使用的 - jQuery的UI-1.9.2.custom.cssjqGrid的列选择格式

我需要格式化jqGrid的列选择器的显示看起来像THIS EXAMPLE

，但我似乎没有得到，甚至那种类似的选项中进行选择列，而是呈现一个列表框从在下面选择图像 Select 行，按用户“Ctrl”键。还取决于“OK”或“取消”的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

来源

2013-02-21 Agent007

这似乎是问题与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>

来源

2013-02-21 09:32:43 Kris

我试图改变的建议，但都无济于事 – Agent007 2013-02-21 11:31:35

这种类型问题出现在未添加multiselect.js文件或路径不正确或在jquery.js之前添加时 – Kris 2013-02-21 11:39:33

jqGrid的列选择格式

回答

相关问题