Question

我正在尝试创建一种从数据库中选择多个值（ID）的方法，并按相关名称显示它们，同时保存附加到每个选定值（名称）的ID。我试着询问这是否可能在jquery中被告知ajax可以实现这一点，但我知道几乎没有ajax。是否有更好的方法来处理此任务或如何将ajax合并到输入标记以按名称显示？

script>
$(document).ready(function () {
    $(".claim").change(function () {
        $(".area").append("<div><input class='field' name='students_going' readonly type='text' value='" + $(this).val() + "'/><input class='field' name='students' type='hidden' value='" + $(this).val() + "'/><label class='remove fakeLink'> Remove</label></div>");
        $(this).find("option:selected").remove();
    });
    $(".area").on("click", ".remove", function () {
        var val = $(this).parent().find("input").val();         
        $(".claim").append("<option value='" + val + "'>" + val + "</option>");
        $(this).parent().remove();
    });
    $(".area").on("click", ".removeEdit", function () {
        $(this).parent().remove();

    });
});
</script>

<div class="area">
<h2>Select all students who will be visiting</h2>
<div>
<g:if test="${disabled=='false'}">
 <g:select name="selector" class="claim" value="None" from="${fullList}" optionKey="studentNumber" optionValue="${{it.firstName + ' ' + it.lastName}}" noSelection="${['null':' ']}" disabled="${disabled}"/>
   <g:if test="${fieldTripInstance?.students!= null }">
   <g:each var="i" in="${(0..<fieldTripInstance?.students?.length) }">
    <div>
     <input class='field' name='Name' readonly type='text' value='${fullList.firstName[((fieldTripInstance?.students[i]).toInteger()-1)]} ${fullList.lastName[((fieldTripInstance?.students[i]).toInteger()-1)]}'/>
     <input class='field' name='students' readonly type='hidden' value='${fieldTripInstance?.students[i]}'/>
       <label class='removeEdit fakeLink'> Remove</label>
    </div>
  </g:each>
 </g:if>
</g:if>

<g:if test="${disabled=='true'}">
<g:if test="${fieldTripInstance?.students!= null }">
 <g:each var="i" in="${(0..<fieldTripInstance?.students?.size()) }">
  <div>
   <input class='field' name='students' readonly disabled="${disabled}" type='text' value='${fieldTripInstance?.students[i]}'/>
  </div>
 </g:each>
 </g:if>
</g:if>
</div>

Answer 1

考虑班级

class SchoolClass {
    String className
    static  hasMany = [students: Student]

    static constraints = {
    }

    String toString(){
        className
    }
}

AND

class Student {
    String name

    static constraints = {
    }

    String toString(){
        name
    }
}

以下是基本视图的示例：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
  <title>Index</title>
   <meta name="layout" content="main">
</head>
<body>
    <h1>Class Roster</h1>

    <g:select name="class" from="${classRoster}" optionKey="id" class="ajax-loader" data-target="#ajaxContent" data-targeturl="${createLink(controller: 'schoolClass', action: 'ajaxStudents')}"/>

    <div id="ajaxContent">

    </div>

    <script>
    (function($){
        $(document).ready(function(){
            ajaxify();
        });


        function ajaxify(){
            $(".ajax-loader").on('change', function(){
                var control = $(this);
                var targetUrl = control.data("targeturl");
                var target = control.data("target");
                console.log("Loading ajax content:"+ control + target + targetUrl);
                $(target).load(targetUrl, {controlVal : control.val()}, function(){
                    //Things done after loading
                })



            });
        }
    })(jQuery);
    </script>

</body>
</html>

检查视图，您将看到我添加了data-target和data-targetUrl。 data-target告诉函数加载新内容的位置，data-targetUrl将告诉函数内容的位置。正如您所看到的，data-targeturl指向一个动作。小部分 {controlVal：control.val（）} 是您定义将哪些参数传递给控制器操作的地方。

请调查 load（）功能，它会对您有所帮助。另外，我提供的加载函数是一个简单的框架，您需要添加错误处理和一些测试以确保稳定性。

一个简单的控制器

class SchoolClassController {

    def index() {
        [classRoster: SchoolClass.list()]
    }

    def ajaxStudents(long controlVal){
           render "${controlVal}"
    }
}

请注意 controlVal 的名称与从jquery函数传递的值的名称相同。只要视图和控制器之间的名称和类型一致，就可以传递n个参数。

渲染“$ {controlVal}”可以更改为渲染模板：'myTemplate'，型号：[] 。请调查grails渲染功能。

使用ajax和grails从所选值显示关联的数据库值

1 个答案: