使用ajax在grails中填充下拉列表

时间:2011-08-23 04:57:58

标签: grails

我们正尝试在新事件中实现ajax以通过单击组获取assign user id的值,因为我们在create.gsp上的视图中应用ajax

create.gsp中使用的ajax

<g:javascript>document.observe('dom:loaded', function() {$("groupId").observe("change", respondToSelect);});        
            function respondToSelect(event)
            {new Ajax.Updater("userId","/smartserv/incident/updateSelect",{method:'get', parameters: {selectedValue : $F("groupId")} });}</g:javascript>

这是create.gsp

中使用的标签
<tr class="prop"> <td valign="top" class="name">
                                    <label for="groupId"><g:message code="incident.groupId.label" default="Assignment Group" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'groupId', 'errors')}">
                                    <g:select id="groupId" name="groupId" from="${app.Usergroup.list()}" optionKey="id" value="${incidentInstance?.groupId?.id}"  />
                                </td>
                            </tr>
                            <div id="userId">
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="userId"><g:message code="incident.userId.label" default="Assign Id" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'userId', 'errors')}">
                                    <g:select  name="userId" from="${app.User.list()}" optionKey="id" value="${incidentInstance?.userId?.id}"  />
                                </td>
                            </tr> 
                            </div> 

在事件控制器中,我们使用updateSelect来获取值

def dataSource
   def updateSelect = {
             def sql = new Sql(dataSource)
                         def user_id = sql.execute("SELECT distinct user_id FROM user_groups where user_groups.usergroup_id='+usergroup_id+'")
  render(usergroup_id:params.selectedValue,template:"assignId", model : ['user_id' : user_id])
}        

_assignId.gsp

<g:select
       from="${groupId.members}"
       name="" value="">
</g:select>

数据库表:group_(字段:groupid,description,application)

表:用户(字段:用户ID,用户名等)

table:user_groups(fields:userid和usergroupid)

通过使用这个表,我们必须使用ajax

来获取值

我们正在对assignid采取行动,但我们没有得到特定的价值观 任何人都可以建议网站或pdf如何在控制器中实现SQL查询。

2 个答案:

答案 0 :(得分:3)

我的工作是我得到了上述问题的答案我发布了我的答案。

在控制器中我写了这段代码

import grails.converters.*
def ajaxGetMembers = {
        def group = Usergroup.get(params.id)
        render group?.members as JSON
    } 

在create.gsp

<g:javascript library="prototype"/>
         <g:javascript>
    function updateUser(e) {
        // The response comes back as a bunch-o-JSON
        var members = eval("(" + e.responseText + ")")  // evaluate JSON

        if (members) {
            var rselect = document.getElementById('user')

            // Clear all previous options
            var l = rselect.length

            while (l > 0) {
                l--
                rselect.remove(l)
            }

            // Rebuild the select
            for (var i=0; i < members.length; i++) {
                var user = members[i]
                var opt = document.createElement('option');
                opt.text = user.userId
                opt.value = user.id
                try {
                    rselect.add(opt, null) // standards compliant; doesn't work in IE
                }
                catch(ex) {
                    rselect.add(opt) // IE only
                }
            }
        }
    }


    // This is called when the page loads to initialize city
    var zselect = document.getElementById('user.id')
    var zopt = zselect.options[zselect.selectedIndex]
    ${remoteFunction(controller:"incident", action:"ajaxGetMembers", params:"'id=' + zopt.value", onComplete:"updateUser(e)")}

</g:javascript> 

将代码置于create.gsp

的标题部分中
<tr class="prop">
                                <td valign="top" class="name">
                                    <label for="group"><g:message code="incident.group.label" default="Group" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'group', 'errors')}">
                                    <g:select  optionKey="id"  name="group.id" id="group.id" from="${app.Usergroup.list()}"
        onchange="${remoteFunction(
            controller:'incident', 
            action:'ajaxGetMembers', 
           params:'\'id=\' + this.value', 
            onComplete:'updateUser(e)')}"
    ></g:select>
                                </td>
                            </tr>


                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="user"><g:message code="incident.user.label" default="User" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'user', 'errors')}">
                                   <g:select name="user.id" optionKey="id" id="user" selectedValue="groupId"  ></g:select>


                                </td>
                            </tr>

答案 1 :(得分:2)

您不需要为此编写javascript。使用remoteFunction标记/功能执行此操作:

<g:select onchange="${remoteFunction(
                    action:'updateSelect', 
                    params:'\'groupId=\' + this.value', 
                    update:'userId',
                    id:'groupId',
                    name:'groupId',
                    from:'${app.Usergroup.list()}', 
                    optionKey:'id', 
                    value:'${incidentInstance?.groupId?.id}')}" />

在服务器端执行:

def updateSelect = {
    def userList = UserGroup.get(params.groupId).user;

    render(template:"assignId", model: ['userList' : userList])
}        
祝你好运;)