有没有办法使用 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 拖到可放置的文本字段?的主要内容,如果未能解决你的问题,请参考以下文章