1

jqGrid でセルをフォーマットして、ユーザーがセルを編集すると、select html コンポーネントが醜いため、コンボボックス (activecombo と呼ばれる) のカスタム実装が表示されるようにしようとしています。

私はこれを読んでデモを見ましたが、私が望んでいることをまったくしていないようです。これが私が試したことです：

    var maritalStatusPickerFunction = function(cellvalue, options,
            rowObject) {
        var optionsArray = [ {
            "id" : 1,
            "status" : "Married"
        }, {
            "id" : 2,
            "status" : "Divorced"
        }, {
            "id" : 3,
            "status" : "Separated"
        }, {
            "id" : 4,
            "status" : "Widowed"
        }, {
            "id" : 5,
            "status" : "Unmarried"
        }

        ];
        var comboInput = $("<input type='text' value='" + cellvalue
                + "' />");
        comboInput.activecombo( {
            source : optionsArray
        });
        return comboInput;
    };

    $('#relationshipsGrid').jqGrid( {
        datatype : "local",
        colNames : [ 'Contact', 'Relationship' ],
        colModel : [ {
            name : 'contact',
            index : 'contact',
            width : 420
        }, {
            name : 'relationship',
            index : 'relationship',
            editable : true,
            formatter : maritalStatusPickerFunction,
            width : 120
        } ],
        width : 600,
        height : 100,
        cellEdit : true,
        editurl : "server.php"
    });

しかし、これはセルの入力に Object オブジェクトを表示するだけなので、明らかに私がすべきことではありません。

誰でも私に何か指針を与えることができますか？

ありがとう、

エイミー

4

1 に答える 1

5

セルの編集中にコンボボックスのカスタム実装を実装する必要がある場合は、カスタム フォーマッタの代わりにカスタム編集コントロールを使用する必要があります。

カスタム フォーマッタは、セルの HTML 表現をstring として構築するために使用されます。カスタム編集コントロールは、編集フィールドの要素内に配置されるカスタム DOM 要素を作成するために使用されます。例として、これ、これ、およびこの古い回答を<span>参照してください。

私はactivecomboプラグインを知りませんが、カスタム編集コントロールを書くことができなかったようです. その代わりに、次のようにeditoptionsdataInit内でイベント ハンドルを定義しようとすることができます。

editoptions: {
    dataInit : function (elem) { 
        $(elem).activecombo( {
            source : optionsArray
        }); 
    } 
}

または、次のような問題がある場合

editoptions: {
    dataInit : function (elem) { 
        setTimeout(function(){
            $(elem).activecombo( {
                source : optionsArray
            }); 
        },100);
    } 
}

ちなみに、検索でも同じことができます。その後、ユーザーは検索/フィルタリング ダイアログで同じ利点を利用できます。

于 2011-03-02T12:04:43.560 に答える