Question

我有一张桌子，上面装着一堆自动装箱子，看起来像......

<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();

我总是得到一个＆＃34; undefined＆＃34;当我试图提醒值时返回...

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

我注意到在html中查看firebug时，有一个/脚本链接到自动完成，这可能是问题，因为当添加新行时这不会更新，我可以看到多个引用旧/原始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的部分，如果我可以改变它，那我就可以了，但这行是自动生成的，我不知道如何更新它，任何人都有类似的经历？

Answer 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。

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

1 个答案: