Opt. [Module] CRUD


Reference


How to Custom CRUD module - Getting Started


Pull template from CRUD modules

play crud:ov --template Users/list
play crud:ov --template Users/show
play crud:ov --template Users/blank #edit page

Add #{crud.custom 'fieldname'} tag in #{crud.form} or #{crud.table} 

#{crud.form field:['name','other property']}
#{crud.custom 'name'} <label for="name"> &{'name'} </label> #{crud.textField 'name' /} #{/crud.custom} #{/crud.form}

SelectItem Version

#{crud.custom 'itemTag'}
<label for="object_itemTag">
&{'itemTag'}
</label>
<select name="object.itemTag">
#{list items:models.Tag.findAll(), as:'tag'}
<option value="${tag}">${tag}</option>
#{/list}
</select>
#{/crud.custom}



More useful tag like #{crud.textField /} (could be found in crud/tags)

  • checkField
  • dateField
  • enumField
  • fileField
  • hiddenField
  • longtextField
  • numberField
  • passwordField
  • relationField
  • serializedTextField
  • textField

Add jQuery UI datePicker to dateField


download jquery ui 1.8.8 and jquery 1.4.4put js/jquery-ui.js into /public/javascripts/ and put css/smoothness/* into /public/stylesheets/smoothness/*

pull template CRUD/layout from crud module


play> play crud:ov --template CRUD/layout

import javascript and css in views/CRUD/layout.html  (Note: calendar.js would be created later)

<script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/jquery-ui-1.8.8.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/calendar.js'}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/smoothness/jquery-ui-1.8.8.custom.css'}">


pull template blank nad show from crud module

play crud:ov --template Controllers/blank #new page
play crud:ov --template Controllers/show #eidt page


define which id can use datepicker in /public/javascripts/calendar.js

/**
 * 將有選取到的id的text加上可選擇日期的功能
 */
$(function(){
    $("#datepicker-start").datepicker({
        altField: "#datepicker-start",
        altFormat: "yy-mm-dd",
        showButtonPanel: true
    });

    $("#datepicker-end").datepicker({
        altField: "#datepicker-end",
        altFormat: "yy-mm-dd",
        showButtonPanel: true
    });
});


Use jquery ui datepicker in views/Controller/blank.html defined by calendar.js

#{crud.form}
    #{crud.custom 'startDate'}
        <label for="${fieldName}">&{'startDate'}</label>
        <input id="datepicker-start" name="${fieldName}" type="text"  value="${_value?.format()}" />                #{/crud.custom}
#{/crud.form}



Comments