Grails Ajax 연동 선택 실현

jsp 에 < g: javascript library = "prototype" / > 를 추가 하면 g: reoteLink, g: formRemote 등 을 사용 하면 비동기 리 셋 을 실현 할 수 있 습 니 다.
생 성 된 html 를 보면 주요 구현 코드 는 다음 과 같 습 니 다.
new Ajax.Updater('Bdiv','/Test/test/b', {asynchronous:true,evalScripts:true});return false;

이 문 구 는 자 바스 크 립 트 스 크 립 트 에서 비동기 리 셋 을 편리 하 게 할 수 있 으 며, grails 가 제공 하 는 몇 개의 태그 만 제한 하지 않 습 니 다.
예 를 들 어 간단 한 리 셋 없 는 관련 select 를 실현 하려 면
a.gsp

<html>
<head>
<title>test</title>
<g:javascript library="prototype" />
<script language="JavaScript">
function sel(){
    var select = document.getElementById("A");
    var index = select.selectedIndex;
    var a = select.options[index].value;
    new Ajax.Updater('Bdiv','/Test/test/b?Aid='+a,
        {asynchronous:true,evalScripts:true});return false;
    }
}
</script>
<body>
<select id="A" onChange="sel();">
<option vaule="1">1</option>
<option vaule="2">2</option>
<option vaule="3">3</option>
</select>
<div id="Bdiv">
</div>
</body>
</html>

b.gsp

<select id="B">
<g:each in="${BB}" var="bInstance">
  <option value="${bInstance.id}">${bInstance.name}</option>
</g:each>
</select>

TestController.groovy

class TestController{
    def index = { redirect(action:a,params:params) }
    def a={[params:params]}
    def b={
        render(action:"b",model:[BB:B.findAllByA(params.Aid)])
    }
}

B.groovy

class B{
String name
Integer A
}

이렇게 하면 A 를 움 직 이면 B 는 A 의 내용 에 따라 데이터베이스 에서 A 값 이 Aid 인 모든 B 를 조회 한 다음 B 선택 상자 에 열 거 됩 니 다.
g: select 라벨 은 다 중 선택 상자 입 니 다. 단일 선택 상자 라벨 을 찾 지 못 했 습 니 다. 이렇게 이 루어 졌 습 니 다.
연동 선택 은 자 바스 크 립 트 로 간단하게 이 루어 집 니 다. 여 기 는 Ajax. Updater 의 한 용법 일 뿐 입 니 다.
초보 자 여러분, 잘못된 점 이 있 으 면 아낌없이 가르침 을 바 랍 니 다.감사합니다!

좋은 웹페이지 즐겨찾기