2

jqgridフォームでブートストラップselect2を実装しようとしていますが、うまくいくようです。

私が持っているjqgrid宣言のcolmodelで：

 {name: 'staff', index: 'staff', width: 31, formoptions: {elmprefix: '(*) '}, editable: true, editrules: {required: true}, edittype: 'select',
                    editoptions: {value: staff,
                        dataInit: function(element) {
                            $(element).width(260).select2();
                        }
                    }
                },

オプションがあり、ブートストラップ クラスが要素に挿入されます。

 <select id="staff" class="select2-offscreen FormElement" role="select"

しかし、私が得ているのは選択のための空白だけです。

下の画像を参照してください。 ここに画像の説明を入力

なぜこれが起こっているのか、または私が間違っていることを誰かに教えてもらえますか?

ありがとう。

4

2 に答える 2

6

私は前にselect2プラグインを知りませんでした。試してみましたが、問題は見つかりませんでした。で使用するwidth関数のパラメータが大きすぎるため、幅に問題があると思います$(element).width(260).select2();。

デモ: Bootstrap なしのものとBootstrap 3.0.0 を含むものは問題なく動作します。選択は下の図のようになります

ここに画像の説明を入力

デモで使った

formatter: "select", edittype: "select",
editoptions: {
    value: "FE:FedEx;TN:TNT;IN:Intim",
    defaultValue: "Intime",
    dataInit: function(element) {
        $(element).width(122).select2({
            // add "ui-widget" class to have the same font-family like in
            //     jQuery UI Theme
            // add "ui-jqdialog" class to have font-size:11px like in other
            //     items of jqGrid form
            dropdownCssClass: "ui-widget ui-jqdialog"
        });
    }
},
stype: "select",
searchoptions: {
    value: "FE:FedEx;TN:TNT;IN:Intim",
    defaultValue: "Intime",
    dataInit: function(element) {
        $(element).width(122).select2({
            // add "ui-widget" class to have the same font-family like in
            //     jQuery UI Theme
            // add "ui-jqdialog" class to have font-size:11px like in other
            //     items of jqGrid form
            dropdownCssClass: "ui-widget ui-jqdialog"
        });
    }
}

視認性を向上させるために次のCSSを追加しました（私の個人的な好みで）

.ui-jqdialog .select2-container .select2-choice {
    height: auto;
    padding-top: 1px;
    padding-left: 0.2em;
    padding-bottom: 2px;
    line-height: 15px;
}
.ui-jqdialog .select2-container .select2-choice .select2-arrow b {
    background-position: 0 -4px;
}
.ui-jqdialog.select2-drop { padding: 0px; }
.ui-jqdialog .select2-results .select2-result-label {
    padding: 2px;
}

さらに、Bootstrap CSS を使用するデモに CSS を追加しました。

.ui-jqgrid table {border-collapse: separate}
.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-pg-selbox {height: 17px}
.ui-jqgrid .ui-pg-table {padding-bottom: 0}
于 2013-10-16T12:55:45.957 に答える
2

私はあなたがするようにselect2をdataInit関数で直接使用しようとします（違いは私がajaxデータソースを使用することです）、見た目は良いですが正しく動作しません：

  1. 値をサーバーに送信できません。
  2. 1行を選択 - >編集しますが、select2は古い値で初期化されません。

最後に、私はこの方法をあきらめて使用しようとしましたedittype:'custom'

colModel:[
    {name:'model_id',label:'mID',
        hidden: true,
        hidedlg: true, // the hidden model_id column 
        search: false, // used for offer id info to select2
    },
    {name:'model',label:'model',width:150,
        editable:true,
        edittype:'custom',
        editoptions:{
          custom_element: myselect2elem,
          custom_value: myselect2value,
          dataInit: myselect2init('180','chose model','search/servermodel','model_id','model'),
        },
        editrules:{
          edithidden: true,
          required: true,
        },
},

3 つの関数を定義しました。

  • myselect2elem(value, options) // 共通要素を初期化
  • myselect2value(elem, operation, value) // 要素の値を取得|設定
  • myselect2init(width,holder,url,opt,cel_name_id,cel_name) // 初期化要素で select2 を使用

詳細

function myselect2elem(value, options) {
    var el = document.createElement("select");
    el.value = value;
    return el;
}

function myselect2value(elem, operation, value) {
      if(operation === 'get') {
        return $(elem).val();
      } else if(operation === 'set') { // this doesn't work，
        $(elem).value=value;  // I don't know whether have side effect
      }
}

function myselect2init(width,holder,url,cel_name_id,cel_name){
    var option = {
        width: width,
        placeholder: holder,
        ajax: {
            url: url,
            /*
            the other ajax configuration option that only selet2 used
            */
        },
    }
    return function(element) {
      $(element).children(".customelement").select2(option)
      // do the init 'set' operation that previous function should do
      selRowId = $(this).jqGrid ('getGridParam', 'selrow'),
      celId = $(this).jqGrid ('getCell', selRowId, cel_name_id);
      celValue = $(this).jqGrid ('getCell', selRowId, cel_name);
      if (celValue){
        var newOption = new Option(celValue, celId, true, true);
        $(element).children(".customelement").append(newOption).trigger('change');
      }
    }
  }

これについてご質問いただきありがとうございます。@Oleg の回答に感謝します。私の答えが他の人を助けることができるようにしたい

于 2018-01-19T10:19:14.853 に答える