2014-09-11 79 views
0

我正在使用jqGrid 4.6.0。 使用下面的代碼實現列選擇器功能。 我使用jqgrid 4.6.0列選擇器問題

  • 的jQuery-UI-1.11.1.js
  • jquery.multi-select.js
  • jQuery的ui.css
  • 多select.css

$.extend($.ui.multiselect, { 
       locale: { 
        addAll: 'Make all visible', 
        removeAll: 'Hidde All', 
        itemsCount: 'Avlialble Columns' 
       } 
      }); 

$.extend(true, $.jgrid.col, { 
       width: 500, 
       msel_opts: { dividerLocation: 0.5 } 
      }); 

  $grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), { 
       caption: "", 
       buttonicon: "ui-icon-calculator", 
       title: "Choose columns", 
       onClickButton: function() { 
        $(this).jqGrid('columnChooser', 
         { 
          width: 260, 
          height: 280, 
          classname: "column-chooser", 
          msel_opts: { //multiselect options 
           autoOpen: true, 
           header: true, 
           height: "auto", 
           classes: "column-chooser", 
           beforeclose: function() { return false; } //keep multiselect drop down open 
          } 
         }); 
       } 
      }); 

列選擇彈出窗口顯示出來,而不可用列,使所有列可見選項.. 它只是有一個選項可用,即,選擇列..

有人可以幫助..

在此先感謝...

回答

0

這是非常懷疑你在哪裏得到jquery.multi-select.jsmulti-select.css。我想你會得到錯誤的文件。您從trirand下載的jqGrid包含plugins子目錄,其中ui.multiselect.jsui.multiselect.css。因此,典型的包含在您使用的jqGrid與columnChooser可能是由以下

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<link rel="stylesheet" type="text/css" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/> 
<link rel="stylesheet" type="text/css" 
     href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/> 
<link rel="stylesheet" type="text/css" 
     href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" /> 
<style type="text/css"> 
    html, body { font-size: 75%; } 
</style> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
<script type="text/javascript" 
     src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script> 
<script type="text/javascript" 
     src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
</script> 
<script type="text/javascript" 
     src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script> 

我張貼the bug report最近,我所描述的一些小的步驟,以使「刪除所有」和「全部添加」的情況下,工作頁面<head>使用jQuery和jQuery UI的最新版本。您可以從herehere下載ui.multiselect.jsjquery.jqGrid.src.js的修改版本。

The demo可用作columnChooser的使用原型。

0

我使用不同的複選js和css文件中..

我下載的jqGrid 4.6.0包..它給我的ui.multiselect.css和ui.multiselect.js文件..我加入他們在我的項目中。

現在列選擇器彈出窗口顯示與可用列和使所有列可見選項..謝謝奧列格。

+0

我很高興我能幫助你。小評論:你發佈的這樣的答案對你的問題*不是真正的答案*。如果您將信息作爲評論發佈到您的問題上,或者您可以將問題的文本附加到文本中,則會更好。 – Oleg 2014-09-11 15:35:56