有没有办法使用 gridDnD 插件将一行从 JQGrid 拖到可放置的文本字段?

Posted

技术标签:

【中文标题】有没有办法使用 gridDnD 插件将一行从 JQGrid 拖到可放置的文本字段?【英文标题】:Is there a way to drag a row from a JQGrid to a droppable textfield using the gridDnD plugin? 【发布时间】:2012-02-24 16:59:19 【问题描述】:

我想将 JQGrid 中的一行拖到文本输入字段中,并将删除行中的列文本添加到输入中文本的末尾。

显然这距离答案还有很长的路要走,但是从设置了此设置的网格中拖动一行(其中#inputTextField 是“可放置”文本字段)会导致 javascript 错误this.p is undefined

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

这是因为目标显然不是 JQGrid 并且没有定义 this.p。我尝试了一些不同的事情......也许有一种方法可以“欺骗”drop 事件使其正常工作?非常感谢您的帮助:)

【问题讨论】:

【参考方案1】:

我想通了!!首先,使网格行可拖动(此函数应在您的 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);

【讨论】:

以上是关于有没有办法使用 gridDnD 插件将一行从 JQGrid 拖到可放置的文本字段?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery 将焦点移至下一个输入?

JQ如何取table中某一行的数据

使用带有 jQ​​uery 插件的 Browserify

有没有办法从 DAW 中的白菜插件中记录 printk 的某处?

写一个简单的JQ插件(例子)

有没有办法从 json 格式在一行中制作系统日志?