있는 jqGrid 열 선택기 형식

Question

플러그인 사용 - 사용 jquery.jqGrid-4.4.4 및 사용자 정의 테마 - JQuery와-UI-1.9.2.custom.css 내가있는 jqGrid 열 츄의 표시를 포맷해야

THIS EXAMPLE

같이하지만 사용자에 대한 '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 

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>