jquery - jEditable 選択ドロップダウンに見出しを追加することは可能ですか?

Question

選択ドロップダウンに追加することは可能headingsですか?jEditable

1 回の選択で見出しをデータ セットに追加したいと考えています。

OPTGROUPこれは、HTMLselectと同等です。

これが可能なら？

もしそうなら、どのように？

そうでない場合、これを許可するために拡張し始めるアイデアはありますか?

Answer 1

ラファエルの答えに基づいて、私は今夜これを作成し、私の目的のためにそれを機能させることに挑戦しました。これを柔軟にしたのではなく、目的のためにハッキングしただけであることに注意してください（2 OPTGROUP、常に同じ見出し）。また、私は実際にJSでプログラミングする方法を知らないので（後でわかるように）、これは実用的なソリューションとして投稿されているだけで、確かにベストプラクティスではありません。

人々が私のコードの間違いを指摘してくれてとてもうれしいです-誰かが同じ問題に遭遇した場合に備えて、ここに投稿してください。

以下のjeditableへの更新-これへの呼び出しは、Rafaelの投稿で説明されているとおりです（タイプが「selectactioner」であることを除く）。

        selectactioner: {
           element : function(settings, original) {
                var select = $('<select />');
                $(this).append(select);
                return(select);


            },
            content : function(data, settings, original) {

               var obj = jQuery.parseJSON(data);
               var json = obj.attendees;
               var json2 = obj.nonattendees;

                var optgroup = $('<optgroup />');
                optgroup.attr('label', 'Meeting Attendees');
                $('select', this).append(optgroup);

                for (var key in json) {
                    if (!json.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    } 
                    var option = $('<option />').val(key).append(json[key]);
                    $('select', this).append(option);    
                }                    
                /* Loop option again to set selected. IE needed this... */ 
                $('select', this).children().each(function() {
                    if ($(this).val() == json['selected'] || 
                        $(this).text() == $.trim(original.revert)) {
                            $(this).attr('selected', 'selected');
                    }
                });




                var optgroup = $('<optgroup />');
                optgroup.attr('label', 'Other Users');
                $('select', this).append(optgroup);

                for (var key in json2) {
                    if (!json2.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    } 
                    var option = $('<option />').val(key).append(json2[key]);
                    $('select', this).append(option);    
                }                    
                /* Loop option again to set selected. IE needed this... */ 
                $('select', this).children().each(function() {
                    if ($(this).val() == json2['selected'] || 
                        $(this).text() == $.trim(original.revert)) {
                            $(this).attr('selected', 'selected');
                    }
                });


            }
        }

Answer 2

jEditable を純粋なダウンロード形式で使用する場合、select 内でオプションのグループ化を実装することはできません。一方、jEditable はそれほど複雑な Java ファイルではないため、OPTGROUP タグを挿入するオプションを追加してみてください。

たぶん次のようになります:

            $("#ddlGrouped").editable("url", {
            type: 'select',
            submit: 'OK',
            data: {
                   'Swedish Cars' : { 'volvo': 'Volvo', 'saab': 'Saab'},
                   'German Cars' : { 'mercedes': 'Mercedes', 'audi': 'Audi'}
                  }
        })

選択を構築する jEditable の部分は次のとおりです。

select: {
            element: function (settings, original) {
                var select = $('<select />');
                $(this).append(select);
                return (select);
            },
            content: function (data, settings, original) {
                /* If it is string assume it is json. */
                if (String == data.constructor) {
                    eval('var json = ' + data);
                } else {
                    /* Otherwise assume it is a hash already. */
                    var json = data;
                }
                for (var key in json) {
                    if (!json.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    }
                    var option = $('<option />').val(key).append(json[key]);
                    $('select', this).append(option);
                }
                /* Loop option again to set selected. IE needed this... */
                $('select', this).children().each(function () {
                    if ($(this).val() == json['selected'] ||
                        $(this).text() == $.trim(original.revert)) {
                        $(this).attr('selected', 'selected');
                    }
                });
            }
        }

ただし、jEditable が選択されたアイテムを取得する方法も確認し、そのコードも調整する必要があります。楽しそうに聞こえますが、現時点では、それを試して動作するコードを投稿する時間がありません。

幸運を。