ruby on rails 用prototype 实现表格排序

最新推荐文章于 2024-04-24 20:00:25 发布
最新推荐文章于 2024-04-24 20:00:25 发布
阅读量686 收藏
点赞数
分类专栏： ruby 文章标签： prototype rails ruby class table internet

 

 <!--
/*
* Copyright (c) 2006 Andrew Tetlaw
* http://tetlaw.id.au/view/blog/table-sorting-with-prototype/
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
* BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
* *
*/
 -->
    <head>
        <title>Sortable Table<%= Time.now.year %></title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        
        <script type="text/javascript" src="javascripts/fastinit.js"></script>
        <script type="text/javascript" src="javascripts/tablesort.js"></script>    
    </head>
    <body>
        <div id="content">
            <p><a href="http://tetlaw.id.au/view/blog/table-sorting-with-prototype/">Return to the article</a></p>
            <h1>Sortable Table</h1>
            <h2>Table 1</h2>
            <p>This one demonstrates multiple sorting types, a no-sort column - Status, an initial sorted column - Urgency, ignoring the HTML in the Urgency column and a table foot that remains in place</p>
            <table class="sortable">
            <thead>
            <tr><th class="sortfirstdec">Urgency</th><th>Date</th><th>Time</th><th>Title</th><th class="nosort">Status</th><th>Requested By</th><th>Cost</th><th>Size</th></tr>
            </thead>
            <tfoot>
                <tr><td>Urgency</td><td>Date</td><td>Time</td><td>Title</td><td>Status</td><td>Requested By</td><td>Cost</td><td>Size</td></tr>
            </tfoot>
            <tbody>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:49:41 AM</td><td>10:49:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>24/10/2005 10:49:41 PM</td><td>10:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>06/07/2006</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
            <tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>In Progress</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:49:41 AM</td><td>10:49:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>24/10/2005 10:49:41 PM</td><td>10:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>06/07/2006</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
            <tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>In Progress</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
            </tbody>
            </table>
            <h2>Table 2</h2>
            <p>This one demonstrates multiple date formats and a cell with a colspan</p>
            <table class="sortable">
            <thead>
            <tr><th>Date</th><th>Date</th></tr>
            </thead>
            <tbody>
            <tr><td>Mon, 6 Nov 2006 17:28:35 GMT</td><td>2005-03-26T19:51:34Z</td></tr>
            <tr><td colspan="2">Tue, 6 Nov 2006 18:28:35 GMT</td></tr>
            <tr><td>Tue, 6 Nov 2006 18:28:35 GMT+1000</td><td>2005-08-26T19:51:34Z</td></tr>
            <tr><td>Thu, 9 Nov 2006</td><td>2005-03-26T19:51:34Z</td></tr>
            <tr><td>Fri, 10 Nov 2006 17:28:35 GMT</td><td>2005-03-29T19:51:34Z</td></tr>
            <tr><td>Sat, 11 Nov 2006 17:28:35 GMT</td><td>2005-03-26T19:51:34Z</td></tr>
            <tr><td>Sun, 12 Nov 2006 17:28:35 GMT</td><td>2005-03-01T19:51:34Z</td></tr>
            <tr><td>Mon, 20 Nov 2006</td><td>2005-03-26T19:51:34Z</td></tr>
            <tr><td>Wed, 22 Nov 2006 17:28:35 GMT</td><td>2005-04-26T19:51:34Z</td></tr>
            <tr><td>Mon, 5 Nov 2007 17:28:35 GMT</td><td>2005-03-26T19:51:34Z</td></tr>
            <tr><td>Sun, 4 Nov 2007 17:28:35 GMT</td><td>2005-12-26T19:51:34Z</td></tr>
            </tbody>
            </table>
            <h2>Table 3</h2>
            <p>This one demonstrates formats set by class name</p>
            <table class="sortable">
            <thead>
            <tr><th class="number">Text as Number</th></tr>
            </thead>
            <tbody>
            <tr><td>30 dogs</td></tr>
            <tr><td>I have 300 fish</td></tr>
            <tr><td>6 white sheep</td></tr>
            <tr><td>Geforce 8800GTX</td></tr>
            <tr><td>I told him 7</td></tr>
            </tbody>
            </table>
            <h2>Table 4</h2>
            <p>This one demonstrates sorting by external control</p>
            <p><a href="#" οnclick="SortableTable.sort($('test'),1,1);return false;">sort column 1 ascending</a> | <a href="#" οnclick="SortableTable.sort($('test'),2,-1);return false;">sort column 2 decending</a></p>
            <table id="test" class="sortable">
            <thead>
            <tr><th>Number</th><th>Number</th></tr>
            </thead>
            <tbody>
            <tr><td>30</td><td>30</td></tr>
            <tr><td>300</td><td>450</td></tr>
            <tr><td>6</td><td>33</td></tr>
            <tr><td>8800</td><td>388</td></tr>
            <tr><td>7</td><td>6666</td></tr>
            </tbody>
            </table>
            <h2>Table 5</h2>
            <p>This one demonstrates a table with no thead or tbody specified</p>
            <table class="sortable">
            <tr><td>Number</th><td>Number</th></tr>
            <tr><td>30</td><td>30</td></tr>
            <tr><td>300</td><td>450</td></tr>
            <tr><td>6</td><td>33</td></tr>
            <tr><td>8800</td><td>388</td></tr>
            <tr><td>7</td><td>6666</td></tr>
            </table>
            
            <h2>Table 6</h2>
            <p>This one demonstrates fixed header scrolling</p>
            <table class="sortable scroll">
            <thead>
            <tr><th id="urg-head">Urgency</th><th>Date</th><th>Time</th><th>Title</th><th class="nosort">Status</th><th>Requested By</th><th>Cost</th><th>Size</th></tr>
            </thead>
            <tfoot>
                <tr><td>Urgency</td><td>Date</td><td>Time</td><td>Title</td><td>Status</td><td>Requested By</td><td>Cost</td><td>Size</td></tr>
            </tfoot>
            <tbody>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:49:41 AM</td><td>10:49:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>24/10/2005 10:49:41 PM</td><td>10:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>06/07/2006</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
            <tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>In Progress</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
            <tr><td><div class="urg5">5</div></td><td>24/10/2005 10:49:41 AM</td><td>10:49:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>24/10/2005 10:49:41 PM</td><td>10:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>06/07/2006</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
            <tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
            <tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
            <tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
            <tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>In Progress</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
            </tbody>
            </table>
        </div>
    </body>

cocolong2002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Ruby on Rails实现的在线考试系统
03-21
# 在线考试系统 在服务器上部署后可以由老师管理其考试，并发布给学生参加考试。由于需要自动化评分，题型只支持选择题和多选题 ## 管理员账户生成 ...如果真的有这个需求可以更改一下db/seeds.rb
基于ruby on rails框架实现的音乐推荐网站项目源码.zip
02-18
基于ruby on rails框架实现的音乐推荐网站项目源码.zip基于ruby on rails框架实现的音乐推荐网站项目源码.zip基于ruby on rails框架实现的音乐推荐网站项目源码.zip基于ruby on rails框架实现的音乐推荐网站项目源码...
Rails2中实现表格排序(整合sortable_column_headers和will_paginate)
【昆山人在上海】
05-15 822
参考资料：http://qbar.qq.com/pd4b5b1t/85.htmhttp://blog.csdn.net/xieqibao/archive/2007/09/12/1782533.aspx 未完，待续...... ======================================================================sor
JavaScript Framework Prototype 专题
chenqunan3231的博客
03-09 92
JavaScript Framework Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-us...
ajax17,17个使用AJAX技术的数据表格控件
weixin_31514917的博客
08-06 1713
为了将数据高效的展示出来，数据需要有合适的结构，展现结构设计的越好，用户就越容易理解信息的内容。因此，提高数据的可萃取性和可扫描性非常有意义。表，是一个非常好的数据呈现结构，非常便于人们分析和理解二维的关系数据。他的初始目的是去展示数据，而非样式化数据，因此，它可以将设计者的主观思想有效地表达出来。进而言之，通过一些额外的操作功能，如排序，过滤，快速编辑等，用户体验也可以得到非常好的扩展。本文汇总...
rails tips
dazhi_100的专栏
09-01 718
MRP启动之后，上次介绍了Phase I的完成情况，之后很久都没什么时间去折腾，最多是零零散散的更新几行代码——事实上对于大部分页面来说，也就几行代码就行了——直到开始实现查询部分的功能，这个有点麻烦，这次趁着假期才算是完成了这个部分，于是就有了这个最初的发布版本。这一篇就针对这个过程中的一些体会稍作回顾，主要涵盖的是Controller和View的部分。 我是完全意义上的Rails新手，所
Ruby on Rails 学习案例
03-06
Ruby on Rails 学习案例
redis-rails：Ruby on Rails的Redis存储
02-02
Ruby on Rails的Redis商店 redis-rails为Ruby on Rails提供了一整套存储（缓存，会话， HTTP缓存）。 有关一般准则，请参见主要的。 关于Rails 5.2的快速说明 Rails 5.2.0用地，因此，如果您只需要将片段缓存存储在...
react-blog:React + Redux + Ruby On Rails 实现的博客系统
04-30
本项是使用 React 实现的个人博客，使用了 Redux 做数据管理，后端使用的是 Ruby On Rails 提供的接口，欢迎大家围观！ 本地部署 git clone [email protected]:wewin11235/react-blog.git cd react-blog npm install ...
Ruby语言介绍要点难点代码案例参考实际应用举例
2401_84235249的博客
04-22 639
并发编程：Ruby 的并发编程支持相对较弱，尽管有一些库和工具可以帮助处理并发，但相比之下，与一些语言（如Erlang或Go）相比，Ruby 在并发处理方面可能需要更多的工作。：Ruby on Rails 是一个流行的 Web 框架，许多网站和应用程序都是用 Ruby on Rails 构建的，包括 GitHub、Basecamp 等。开发者友好：Ruby 被设计为开发者友好的语言，注重提高开发者的幸福感和生产力。虽然不如一些专门的游戏开发语言，但Ruby也被用于创建简单的游戏和游戏原型。
001 rabbitmq减库存demo direct
m0_46695127的博客
04-24 172
001 rabbitmq减库存demo direct
RabbitMQ, DelayQueue, Redis的介绍以及IDEA的实现
m0_64021225的博客
04-24 490
RabbitMQ, DelayQueue, Redis的介绍以及IDEA的实现
rabbitmq报错
m0_46695127的博客
04-24 556
rabbitmq报错
golang rabbitmq客户端连接及重连
my_miuye的博客
04-18 453
golang的rabbitmq客户端连接、发送、发送异常、重连
2010考研管理类联考综合能力答案解析.pdf
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
NumPy Matplotlib Matplotlib 是 Python 的绘图库 .zip
04-24
matplotlib绘图 通过 Matplotlib，开发者可以仅需要几行代码，便可以生成绘图、直方图、功率谱、条形图、错误图、散点图等。 Matplotlib基础知识 1.Matplotlib中的基本图表包括的元素 x轴和y轴 水平和垂直的轴线 x轴和y轴刻度 刻度标示坐标轴的分隔，包括最小刻度和最大刻度 x轴和y轴刻度标签 表示特定坐标轴的值 绘图区域 实际绘图的区域 2.hold属性 hold属性默认为True，允许在一幅图中绘制多个曲线；将hold属性修改为False，每一个plot都会覆盖前面的plot。 但是不推荐去动hold这个属性，这种做法（会有警告）。因此使用默认设置即可。 3.网格线 grid方法 使用grid方法为图添加网格线 设置grid参数（参数与plot函数相同） .lw代表linewidth，线的粗细 .alpha表示线的明暗程度 4.axis方法 如果axis方法没有任何参数，则返回当前坐标轴的上下限 5.xlim方法和ylim方法 除了plt.axis方法，还可以通过xlim，ylim方法设置坐标轴范围
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档）
04-24
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 第二章 需求分析 4 2.1可行性分析 4 2.1.1技术的可行性 4 2.1.2经济的可行性 4 2.1.3操作可行性 4 2.2需求调研 4 第三章 数据库设计 6 3.1数据库的分析与设计 6 3.1.1数据库的概念结构设计 6 3.1.2数据表的逻辑结构设计 7 第四章 系统功能实现 8 4.1 系统后台界面 8 4.2书籍类别管理 8 4.3 书籍信息界面 9 4.4竞拍管理界面 9 4.5 微信小程序首页 9 4.6书籍信息添加 10 4.7书籍竞拍界面 11 4.8用户后台界面 11 第五章 系统测试 12 5.1 系统测试的意义 12 5.2 系统测试的内容 12 5.3系统测试结果 12 总结 13
利用openCV控制单片机小车运动轨迹.zip
最新发布
04-24
利用openCV控制单片机小车运动轨迹.zip
為Ruby on Rails程序加入拖曳排序功能
05-29
要为 Ruby on Rails 程序加入拖曳排序功能，你可以使用 jQuery UI 的 Sortable 插件和 Rails 的 AJAX 功能来实现。 首先，在你的 Rails 应用程序中安装 jQuery UI： ```ruby # Gemfile gem 'jquery-ui-rails' ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值