Grails Richui 自动完成将对象传递给函数或更新对象 ID答案

【问题标题】：Grails richui autocomplete passing object to function or updating object IDGrails Richui 自动完成将对象传递给函数或更新对象 ID
【发布时间】：2013-11-18 16:12:56
【问题描述】：

我有一张桌子，里面有很多自动完成框，看起来像这样......

<richui:autoComplete style="width:500px" name="objSelect[${newRow-1}].id" value= "" action="${createLinkTo('dir': 'object/searchAJAX')}" forceSelection = "true" maxResultsDisplayed="20" minQueryLength ="3" onItemSelect="updateHiddenInput(id,${newRow-1})" />

当用户选择传入所选 id 以及自动完成所在行的值时，我可以调用一个名为 updateHiddenInput 的函数（此函数然后更新同一行中的隐藏字段，使用传入的值，带有 ID）。函数如下所示：-

function updateHiddenInput(id, num){
    var objID = "objectID[" + num + "].id";
    $(document.getElementById(objID)).val(id);
}

一切正常，直到我在表中添加新行，这会将所有内容向下推一行并阻止自动完成更新正确的行隐藏字段（因为它仍然引用旧行）。

目前我有另一段代码在插入新行时会遍历并重命名所有字段，但我不知道如何更新自动完成功能以使其通过正确的行号，任何人都知道我该怎么做改变这个？

我能想到的唯一其他选择是只通过对象本身以及我可以根据对象定位隐藏的 ID，但我不知道如何做到这一点，任何建议感激不尽！ :S

我尝试过改变 onItemSelect="updateHiddenInput(id,${newRow-1})" 到 onItemSelect="updateHiddenInput(id,this)"

理论上，这样我就可以通过自动完成对象，然后从那里遍历页面以找到我想要更新的隐藏字段。但是，当我尝试在我的函数中使用该对象时，例如：-

var mynumber = $(myobject).closest('td').find('input').val();

当我尝试提醒值时，总是返回“未定义”...

如果我只是在函数中输入alert(myobject)，它会返回AutoComplete instance0 autoLook[0].id，但如果我插入新行，id 值不会改变（即对象 id 现在是 autoLook[3].id 但它仍然显示 [0]，我认为这可能是问题的一部分，但我现在知道如何更新此值...

我注意到当在 html 中查看 firebug 时，有一个链接到自动完成的 /script，这可能是问题，因为添加新行时它不会更新，我可以看到对旧/原始 id 的多个引用值（见下文）所以可能this 的传递没有传递当前对象的值...？

<script type="text/javascript">
var autoCompleteDataSource = new YAHOO.util.XHRDataSource("/Framework/object/searchAJAX");
autoCompleteDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
autoCompleteDataSource.responseSchema = {
resultNode : "result",
fields : [
{ key: "name" },
{ key: "id" }
]
};
;
autoComplete = new YAHOO.widget.AutoComplete('autoLook[0].id','ad186a42e45d14d5cde8281514f877e42', autoCompleteDataSource);
autoComplete.queryDelay = 0;
autoComplete.prehighlightClassName = 'yui-ac-prehighlight';
autoComplete.useShadow = false;
autoComplete.minQueryLength = 3;
autoComplete.typeAhead = false;
autoComplete.forceSelection = true;
autoComplete.maxResultsDisplayed = 20;
autoComplete.shadow = false;
var itemSelectHandler = function(sType, args) {
var autoCompleteInstance = args[0];
var selectedItem = args[1];
var data = args[2];
var id = data[1];
updateHiddenInput(id,this) };
autoComplete.itemSelectEvent.subscribe(itemSelectHandler);
</script>

感谢 user1690588 迄今为止的所有帮助！ :)

在进一步挖掘中，我确信我的问题归结为 autoComplete = new YAHOO.widget.AutoComplete('autoLook[0].id','a5b57b386a2d1c283068b796834050186', autoCompleteDataSource); 行，特别是其输入 autoLook[].id 的部分，如果我可以更改它，我会没问题，但这条线是自动生成的，并且不知道怎么更新，有没有类似经历的？

【问题讨论】：

如何在表格中添加新行？
我通过 AJAX 调用添加它，该调用刚刚开始并生成 html 并对其进行 psots。完成此操作后，它会遍历并重命名表中的所有元素。
我发现我可以将onItemSelect="updateHiddenInput(id,${newRow-1})" 更改为onItemSelect="updateHiddenInput(id,\$(this))"，然后我可以将$(this) 传递给函数（如果我alert($(this)) 我得到object Object 回来）。但是我现在不知道如何从那个开始计算出 $(this) 所在的行......！ Alertnig $(this).id 什么都不做... :/
对不起，水有点混，它只是一个变量，告诉它在哪一行。该代码来自我在制作 AJAX 帖子时插入的片段（它告诉它要结束哪一行）它最终只是作为一个数字来标识它所在的行...
我不确定添加 \$(this) 是否实际上是通过对象，因为无论我尝试什么，我都无法从中获取任何信息（你能发送空对象吗？ .?)

标签： javascript jquery grails autocomplete rich-ui

【解决方案1】：

我对您的 gsp 页面不太了解，但我尝试过：

我的 gsp：

<!DOCTYPE html>
<html>
<head>
<resource:autoComplete skin="default"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var counter = ${list.size()};

    function asd() {
        jQuery.ajax({
            url: " ${createLink(controller: 'oauthCallBack', action: 'testAuto')}",
            data: "idx=" + counter++,
            success: function (data) {
                jQuery("#tableId").append("<tr><td>" + data + "</td></tr>");
            }
        });
    }

    function updateHiddenInput(id, tg) {
        jQuery(tg).val(id);
    }
</script>
</head>

<body>
<g:form>
<table id="tableId">
    <g:each in="${list}" var="vr" status="idx">
        <tr>
            <td>
                <richui:autoComplete name="name" id="uniqueId${idx}" action="${createLinkTo('dir': 'oauthCallBack/test')}" onItemSelect="updateHiddenInput(id, someId${idx})"/>
                <g:hiddenField name="someName" id="someId${idx}" value=""/>
            </td>
        </tr>
    </g:each>
</table>
</g:form>
<button onclick="asd()">Add</button>
</body>
</html>

我的行动：

def testAuto() {
    render template: 'addNew', model: [idx: params.idx]
}

我的模板（addNew）：

<richui:autoComplete name="name" id="uniqueId${idx}" action="${createLinkTo('dir': 'oauthCallBack/test')}"
                 onItemSelect="updateHiddenInput(id, someId${idx})"/>
<g:hiddenField name="someName" id="someId${idx}" value=""/>

试试这个..,.

编辑.......................... ......................................

我认为您已成功更新所有输入字段名称。然后您可以编辑隐藏字段，例如：

查看：

<tr class="dummyClass">
    <td>
        <richui:autoComplete name="name[${idx}]" id="uniqueId[${idx}]" action="${createLinkTo('dir': 'oauthCallBack/test')}" onItemSelect="updateHiddenInput(id, this)"/>
        <g:hiddenField name="someName[${idx}]" id="someId[${idx}]" value=""/>
    </td>
</tr>

jQuery：

function updateHiddenInput(id, tg) {
    jQuery(tg._elTextbox).closest("tr.dummyClass").find("input[type=hidden]").val(id);
}

编辑.......................... ......................................

为什么需要更改“id”？更改名称足以按顺序发送值。并且您可以像上面编辑一样更新没有 id 的隐藏字段。

如果您仍然需要更改 id，那么您可以通过克隆 tr 来更改它，然后使用正则表达式。有关完整的工作示例，请参阅this answer。

【讨论】：

感谢您的建议，但我遇到的问题是，一旦我在表中插入另一行，我会按顺序重命名所有输入（因此 1 变为 2，2 变为 3 等），这种方式将始终引用原始的someId${idx} 并开始更新错误的字段。我希望以某种方式将自动完成对象传递给函数，这样我就可以动态计算出它在页面上的位置并找到相对于它的隐藏字段，但是传递对象似乎不起作用：S
为什么要重命名输入？我还在表格中添加了行，它工作正常，无需更改输入的名称。
您的示例将行添加到末尾，而我也让用户能够在表格中间添加行，或上下拖动行以重置其位置（该表表示作为测试的一部分的“事件”序列。当我将这些值保存回数据库时，我需要知道它们的顺序，以便以正确的顺序保存和调用它们以及我这样做的方式当时正在使用对象 ID 来确定事件的顺序。
我需要做的是返回并修改我的代码，以便重命名/事情的顺序只在用户点击保存时发生一次。为此，我还需要返回并更改添加行的方式（以便每个新行都有一个唯一的 ID，将自动完成和隐藏字段绑定在一起等）。
为什么需要更改“id”？更改名称足以按顺序发送值。您可以更新没有 id 的隐藏字段，请参阅我编辑的答案（jQuery(tg._elTextbox).closest("tr.dummyClass").find("input[type=hidden]").val(id);）。