5

JQGridからテキスト入力フィールドに行をドラッグし、ドロップされた行から入力のテキストの最後に列のテキストを追加したいと思います。

明らかにこれは答えから遠く離れていますが、これが設定されているグリッドから行をドラッグすると（#inputTextField「ドロップ可能な」テキストフィールドがあります）、JavaScriptエラーが発生しますthis.p is undefined：

$("#searchResultsGrid").jqGrid('gridDnD',
    {
         connectWith:   '#inputTextField"
    }
);

これは、宛先が明らかにJQGridではなく、this.p定義されていないためです。私はいくつかの異なることを試しました...たぶん、ドロップイベントを「だまして」機能させる方法はありますか？助けてくれてありがとう:)

4

1 に答える 1

5

私はそれを考え出した！！まず、グリッド行をドラッグ可能にします（この関数はgridCompleteグリッドイベントハンドラーで呼び出す必要があります）。

function makeGridRowsDraggable() {

        var $searchResultsGrid  =   $("#searchResultsGrid"),
            $searchResultsRows =    $("#searchResultsContainer .ui-row-ltr");

        $searchResultsRows.css("cursor","move").draggable("destroy").draggable({
            revert:     "false",
            appendTo:   'body',
            cursor:     "move",
            cursorAt:   {
                            top: 10,
                            left: -5
                        },
            helper:     function(event) {

                            //get a hold of the row id
                            var rowId = $(this).attr('id');

                            //use the row id you found to get the column text; by using the getCell method as below, 
                            //the 'unformatter' on that column is called; so, if value was formatted using a
                            //formatter, this method will return the unformatted value 
                            //(as long as you defined an unformatter/using a built-in formatter)
                            var theValue = $searchResultsGrid.jqGrid('getCell', rowId, 'desiredValue');

                            //set the data on this to the value to grab when you drop into input box
                            $(this).data('colValue', theValue);

                            return $("<div class='draggedValue ui-widget-header ui-corner-all'>" + theValue+ "</div>");
                        },
            start:      function(event, ui) {
                            //fade the grid
                            $(this).parent().fadeTo('fast', 0.5);
                        },
            stop:       function(event, ui) {
                            $(this).parent().fadeTo(0, 1);
                        }
        });
    }

次に、ドロップ可能な要素を作成します。

function createDroppableElements() {

    $("#inputFieldOne, #inputFieldTwo").droppable({
        tolerance:  'pointer',
        hoverClass: 'active',
        activate:   function(event, ui) {
                        $(this).addClass("over");
                    },
        deactivate: function(event, ui) {
                        $(this).removeClass("over");
                    },

        drop:       function(event, ui) {
                        var theValue = ui.draggable.data('colValue');
                        theValue = theValue .replace(/<br>/gi,'; ');
                        console.log("dropped value: " + theValue );  

                        updateText($(this), theValue);
                    }
    });
}

テキストフィールドにテキストを追加する（末尾に「;」を追加する）ヘルパーメソッドを作成します。

function updateText(txtTarget, theValue) {

    var currentValue = txtTarget.val().trim();

    if (currentValue.length > 0 
        && currentValue.substr(currentValue.length-1) !== ";") 
        currentValue = currentValue + '; ';

    currentValue += theValue;


    txtTarget.val(currentValue);
}
于 2012-02-02T16:13:15.453 に答える