To create a Yahoo Ajax Datatable (with local datasource) from a rails view, I had to do the following. First I had to add this helper method to the Application controller:
module ApplicationHelper
#Outputs the javascript code necesary to create a yahoo datable
# from a plain datasource
# column_array: and array of 2-item arrays in the form:
# ["name_wihout_spaces", "Text to show in the column header"]
# data_rows: an array or rows. Each row is an array that has the values in the
# order specified in the column_array.
def to_yahoo_array_data_source(column_array, data_rows, custom_div_id = "myContainer",
custom_col_var_name = "data_cols",
custom_datasource_var_name = "data_source")
column_items = []
column_array.each do |column|
column_items << "{key:\"#{column[0]}\", label:\"#{column[1]}\", sortable:true}"
end
column_code = "var #{custom_col_var_name} = [#{column_items.join(',')}];"
data_items = []
data_rows.each do |row|
data_for_row = []
for col_idx in 0...column_array.size
row[col_idx] = "\"#{escape_javascript(row[col_idx])}\"" unless row[col_idx].is_a?(Fixnum)
data_for_row << "#{column_array[col_idx][0]}: #{row[col_idx]}"
end
data_items << "{#{data_for_row.join(',')}}"
end
record_set_code = "var #{custom_datasource_var_name} = new YAHOO.util.LocalDataSource([#{data_items.join(',')}]);"
# {key:"no", label:"No.", sortable:true},
# {key:"lname", label:"Last Name", sortable:true},
# {key:"age", label:"Age", sortable:true}
#];
return "#{column_code}\n #{record_set_code}\nvar myDataTable = new YAHOO.widget.DataTable(\"#{custom_div_id}\", #{custom_col_var_name}, #{custom_datasource_var_name});"
end
end
Next I added the required javascript libraries to the application layout:
<html> <head> <title>Email Detentions</title> <%= javascript_include_tag 'prototype' %> <!--CSS file (default YUI Sam Skin) --> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css"> <!-- Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script> <!-- OPTIONAL: JSON Utility (for DataSource) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script> <!-- OPTIONAL: Connection Manager (enables XHR for DataSource) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script> <!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script> <!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script> <!-- OPTIONAL: Calendar (enables calendar editors) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script> <!-- Source files --> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script> </head> <body class="yui-skin-sam"> <%= @content_for_layout %> </body> </html>
And then I had to call the helper method from my view. This is an example (which by the way, it also shows how to implement the "click all" check box that select all check boxes when clicked):
<h1>Email Demerit Detention letters</h1>
<% form_tag({:controller => 'deans', :action => 'send_detention_demerits_letter'}, :id => 'students_selection') do -%>
<br/>Please enter the detention date as it will appear in the email: <%= text_field(:email, :detention_date, :value => Time.now.next_week(day = :thursday).to_date.to_formatted_s(:long_ordinal) ) %>
<%= hidden_field(:email, :beg_date, :value => @beg_date) %>
<br/> Mark the checkbox of the students that should receive an email:
<br/>
<input id="check_all" name="check_all" type="checkbox"
onclick="Form.getInputs('students_selection',
'checkbox').each(function(box){box.checked = $('check_all').checked})" />
Select All Students
<br/>
<div id="myContainer"></div>
<%= submit_tag "Send emails" %> <strong>(don't click twice, it may take some time to send all emails)</strong>
<% end -%>
<!-- Create the table -->
<script type="text/javascript">
<% column_array = [['no', "No."],['Name', "Name"],['Total_Demerits', "Total Demerits"],
['Credits', "Credits"],
['Balance', "Balance"]]; data_rows = []; std_idx = 1 %>
<% for student in @students_needing_detention %>
<% std_name = student.Students_LastName + ", " + student.Students_FirstName %>
<% data_rows << ["#{std_idx.to_s.rjust(3)} #{check_box_tag("students[#{std_idx}]",
student.Students_StudentID, false)}" , std_name,
student.tot_dems.to_s.rjust(5), student.tot_creds.to_s.rjust(5), student.diff.to_s.rjust(5)] %>
<% std_idx = std_idx + 1 %>
<% end %>
<%= to_yahoo_array_data_source(column_array, data_rows) %>
</script>
1 comments:
hi there
sounds like a great software
BTW
did you read any reviews about it?
I will be interested in getting more information about their software
i found you blog are interesting i have boorkmark you blog to read more in future thanks
thanks again
from kmz
Inventory Management Software
Post a Comment