通过托放创建一个自定义的报表

sunfengcheng

浏览: 183599 次
性别:
来自: 北京

最近访客更多访客>>

lingling1420q

kristy_yy

jb2011

qq_29266167

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术

Rails JavaScript Ajax ActiveRecord Flash

[size=large][color=brown]通过托放创建一个自定义的报表

不管是用户还是程序员都习惯了，手动托控件的应用程序。但是在web 中实现比较麻烦，今天我就告诉你一个就像桌面上应用程序一样的恶实例。

解决的方法：
使用 rails 。为了描述这个解决的方法，例如你正在为一个用户数据库提供 WEB 接口，同时，公司中的其他人员也正在使用这个数据库，每个人浏览了报表之后都可能会有不同的想法，这些想法是关于他们愿意看到报表中显示了那些字段，你想提供一个操作简单，反应迅速的界面，让用户可以自己定义报表的版本。
报表时在数据库中的用户表中选择出来的，表的定义：

db/schema.rb:

ActiveRecord::Schema.define(:version => 1) do

  create_table "customers", :force => true do |t| 
    t.column "company_name", :string
    t.column "contact_name", :string
    t.column "contact_title", :string
    t.column "address", :string
    t.column "city", :string
    t.column "region", :string
    t.column "postal_code", :string
    t.column "country", :string
    t.column "phone", :string
    t.column "fax", :string
  end 
end

创建一个视图来举例出客户的列表。并且每一列都能托放，那就的定义一个放置你托放的列。添加一个运行报表的链接，以及一个让报表复位的链接。
app/views/customers/report.rhtml:

<

h1>Custom Report</h1>

<% for column in Customer.column_names %>
  <div id="<%= column %>" style="cursor:move;">
    <%= column %>;
  </div>  
  <%= draggable_element("#{column}", :revert => false) %>
<% end %>

<div id="select-columns">
  <% if session['select_columns'] %>
    <%= session['select_columns'].join(", ").to_s %>
  <% end %>
</div>

<%= link_to_remote "Run Report",
                   :update => "report",
                   :url => { :action => "run" } %>

(<%= link_to "reset", :action => 'reset' %>)


<div id="report">
</div>

<%= drop_receiving_element("select-columns",
                           :update => "select-columns",
                           :url => { :action => "add_column" }) %>

在 Customers 控制器中定义一个 add_column ，用来对那些列被放入接受区域的时候触发的ajax 请求响应，在定义一个运行报表的方法以及一个同通过清除色素sion 哈希表的 select_cloumns 来复位报表。
[

quote]controllers/customers_controller.rb:

class CustomersController < ApplicationController

  def report 
  end

  def add_column
    if session['select_columns'].nil?
      session['select_columns'] = []
    end
    session['select_columns'] << params[:id]
    render :text => session['select_columns'].join(", ").to_s
  end

  def run
    if session['select_columns'].nil?
      render :text => '<p style="color: red;">no fields selected</p>'
    else        
      @customers = Customer.find_by_sql("select 
          #{session['select_columns'].join(", ").to_s} from customers")
      render :partial => 'report'
    end
  end

  def reset
    session['select_columns'] = nil
    redirect_to :action => 'report'
  end
end

现在创建一个名字是_report.rhtml 的局部的视图来显示报表本身。

app/views/customers/_report.rhtml:

<table>
  <tr>
  <% for column in session['select_columns'] %>
    <th><%= column %></th> 
  <% end %>
  </tr>
  
  <% for customer in @customers %>
    <tr>
    <% for column in session['select_columns'] %>
      <td><%=h customer.send(column) %></td> 
    <% end %>
    </tr>
  <% end %>
</table>

布局当然修要包含 javascript 库以及定义在报表视图中用来接受区域的样式。

app/views/layouts/customers.rhtml:

<html>
<head>
  <title>Customers: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>
  <style type="text/css">
    #select-columns {
      position:         relative;
      width:            400px;
      height:           90px;
      background-color: #e2e2e2;
      border:           2px solid #ccc;
      margin-top:       20px;
      padding:          10px;
    }
  </style> 
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield %>

</body>
</html>

[/color][/size]

3
顶

0
踩

分享到：

动态的向列表添加项 | 在页面中添加 DOM 元素

2008-08-18 07:36
浏览 1529
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论