2012-02-01 4 views
0

私は初めてGrailsに潜入して、簡単な作業だと思っていることを達成しようとしているので、これは簡単なことです。それに費やされた時間は私に別の気分にさせています:)Grails - チェックボックスを使用してオブジェクトリストを更新していますか?

私はisActiveと呼ばれるブール値に結びついている連絡先のリストをデータベースに持っています。非アクティブなメンバーを表示するかどうかを決定するチェックボックスをリストgspに入れたいと思います。

私はJavascript関数を使用しようとしましたが(これは正常に呼び出せましたが、呼び出し後の処理方法はわかりませんでした)。また、ボックスのチェックされたプロパティが有効になっているかどうかを確認するためにg:ifを追加しようとしましたが、nullオブジェクトが発生します(これは起こりそうです)。

また、チェックボックスのonclickでremoteFunctionコールをアタッチしようとしましたが、残念なことにレスポンスは返されません。

アドバイスはありますか?ありがとう - 私はそれを感謝します。初めて自分自身のWeb言語を教えるの課題:)

<html> 
    <head> 
      <meta name="layout" content="main"> 
     <g:set var="entityName" value="${message(code: 'contact.label', default: 'Contact')}" /> 
     <title><g:message code="default.list.label" args="[entityName]" /></title> 

    <g:javascript> 
     function updateThisPage() 
     { 

     } 
    </g:javascript> 

</head> 
<body> 
    <a href="#list-contact" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a> 
    <div class="nav" role="navigation"> 
     <ul> 
      <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li> 
      <li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li> 
      <li><g:checkBox name="showInactives" value="${false}" onclick="....." /></li> 
     </ul> 
    </div> 
    <div id="list-contact" class="content scaffold-list" role="main"> 
     <h1><g:message code="default.list.label" args="[entityName]" /></h1> 
     <g:if test="${flash.message}"> 
     <div class="message" role="status">${flash.message}</div> 
     </g:if> 
     <table> 
      <thead> 
       <tr> 
       <g:if test="${isActive?.checked}"> 
        <g:sortableColumn property="firstName" title="${message(code: 'contact.firstName.label', default: 'First Name')}" /> 

        <g:sortableColumn property="lastName" title="${message(code: 'contact.lastName.label', default: 'Last Name')}" /> 

        <g:sortableColumn property="phone" title="${message(code: 'contact.phone.label', default: 'Phone')}" /> 

        <g:sortableColumn property="email" title="${message(code: 'contact.email.label', default: 'Email')}" /> 

        <g:sortableColumn property="title" title="${message(code: 'contact.title.label', default: 'Title')}" /> 

        <g:sortableColumn property="jobFunc" title="${message(code: 'contact.jobFunc.label', default: 'Job Func')}" /> 
       </g:if> 
       </tr> 
      </thead> 
      <tbody> 
      <g:each in="${contactInstanceList}" status="i" var="contactInstance"> 
          <g:if test="${contactInstance.isActive}"> 
           <tr class="${(i % 2) == 0 ? 'even' : 'odd'}"> 

            <td><g:link action="show" id="${contactInstance.id}">${fieldValue(bean: contactInstance, field: "firstName")}</g:link></td> 

            <td>${fieldValue(bean: contactInstance, field: "lastName")}</td> 

            <td>${fieldValue(bean: contactInstance, field: "phone")}</td> 

            <td>${fieldValue(bean: contactInstance, field: "email")}</td> 

            <td>${fieldValue(bean: contactInstance, field: "title")}</td> 

            <td>${fieldValue(bean: contactInstance, field: "jobFunc")}</td> 

           </tr> 
          </g:if> 
      </g:each> 
      </tbody> 
     </table> 
     <div class="pagination"> 
      <g:paginate total="${contactInstanceTotal}" /> 
     </div> 
    </div> 
</body> 

答えて

0

は、なぜあなたはjQueryの& CSSの組み合わせを試してみませんか?例えば、あなたが持っているすべてのフィールドで、データベースのレコードに従って「アクティブ」または「非アクティブ」クラスを追加します。次に、ボタンをクリックすると、「非アクティブ」クラスを持つすべての要素に対して、単に「非表示」クラスを追加します。

jQuery("#hideInactiveContact").click(function(){ 
    jQuery(".Inactive").addClass("Hidden"); 
}); 

jQuery("#showInactiveContact").click(function(){ 
    jQuery(".Inactive").removeClass("Hidden"); 
}); 

はCSSでは、次の操作を実行できますし、「隠された」クラスのすべての要素が隠されます。

.Hidden { 
display: none; 
} 
+1

私にこのショットをしましょう。あなたの投稿を心がけてください - あなたのご意見をありがとうございます! – user82302124

0

jQueryのでは、実際にショー()および非表示()関数を代わりに使用することができますCSSクラスを追加または削除する

$("#hideInactiveContact").hide(); 
$("#showInactiveContact").show(); 
関連する問題