原文参见我另一个博客:http://caok.github.com/blog/2012/08/07/jquery-columnmanager-plugin-and-rails-settings-cached/
在平时页面显示表格时,容易出现要显示的字段过多,而在一页的范围内无法完全显示的困境。通过juery columnanager可以实现显示和隐藏的效果,再通过rails-settings-cached将其与个人偏好设置相关联,使得更加人性化。
安装rails-settings-cached
Edit your Gemfile:
gem "rails-settings-cached"
Generate your settings:
$ rails g settings <settings_name>
Now just put that migration in the database with:
rake db:migrate
Settings may be bound to any existing ActiveRecord object. Define this association like this: Notice! is not do caching in this version.
class User < ActiveRecord::Base
include RailsSettings::Extend
end
安装jQuery columnManager plugin
下载地址:jquery.columnmanager.zip 我这使用的是里面的jquery.columnmanager.pack,添加至项目的application.js中
//= require jquery.columnmanager.pack
两者的配合使用
页面上调用
div id="targetcol">
</div>
<table id="tableall">
.....
</table>
<script type="text/javascript">
$('#tableall').columnManager({
listTargetID:'targetcol',
onClass: 'simpleon',
offClass: 'simpleoff',
colsHidden: <%= current_user.hide_columns(request.url) %>,
onToggle: function(index, state){
$.ajax({
url: 'users/hide',
type: 'post',
data: "index=" + index + ";state=" + state + ";url=" + "<%= request.url %>"
})
}
});
</script>
这里将点击后的效果通过ajax保存到用户的settings中,其中保存了url、index、state这几个属性值, 并在下次打开页面时通过hide_cloumns取出原先保存的值,起到一个人性化的效果。
编辑routes
resources :users do
post :hide, :on => :collection
end
在users_controller中增加hide处理,提供给ajax调用
def hide
p = current_user.settings.pagesetups
p = {} unless p
if p[params[:url]]
p[params[:url]][params[:index].to_i] = params[:state]
else
p[params[:url]] = {params[:index].to_i => params[:state]}
end
current_user.settings.pagesetups = p
render :nothing => true
end
取出用户对于table中字段隐藏显示的偏好设置
def hide_columns(url)
if settings.pagesetups and settings.pagesetups[url]
p = self.settings.pagesetups[url]
else
return "[]"
end
lists = p.delete_if {|k,v| v != "false" }.keys
"[" + lists * "," + "]"
end
参考
jQuery columnManager plugin http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html
rails-settings-cached: https://github.com/huacnlee/rails-settings-cached
分享到:
相关推荐
《jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize:基于canvas的前端图片缩放技术详解》 在Web开发中,处理用户上传的图片大小和格式问题是一项常见任务。为了提高用户体验并减轻服务器压力,我们经常...
struts2-jquery-plugin-3.1.0.jar
"jquery-plugin-circliful-master.zip" 是一个专门用于创建环形统计动画图的jQuery插件,它提供了一种独特而吸引人的方法来展示各种统计数据。环形图以其直观的视觉效果,可以清晰地传达百分比信息,适用于系统门户...
赠送jar包:spring-plugin-core-2.0.0.RELEASE.jar; 赠送原API文档:spring-plugin-core-2.0.0.RELEASE-javadoc.jar; 赠送源代码:spring-plugin-core-2.0.0.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring...
jQuery plugin for autocomplete - jQuery自动完成插件
赠送jar包:spring-plugin-metadata-2.0.0.RELEASE.jar; 赠送原API文档:spring-plugin-metadata-2.0.0.RELEASE-javadoc.jar; 赠送源代码:spring-plugin-metadata-2.0.0.RELEASE-sources.jar; 赠送Maven依赖信息...
"jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer.zip" 是一个专门用于解决这个问题的jQuery插件。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。这个插件利用jQuery...
cordova-plugin-app-update App updater for Cordova/PhoneGap Demo Try it yourself: Just clone and install this demo. cordova-plugin-app-update-DEMO :tada: 如果喜欢它,请别忘了给我一颗鼓励的星 Support ...
这些文件通常包含在下载的`jquery-plugin-circliful-master`压缩包中。接下来,我们可以使用HTML来定义一个容器元素,然后在JavaScript中初始化Circliful,指定进度、颜色、大小等参数。 例如,HTML部分可以这样写...
**前端开源库-babel-plugin-search-and-replace** `babel-plugin-search-and-replace` 是一个针对前端开发的开源库,主要用于JavaScript代码的自动化搜索与替换。这个Babel插件是在代码转换过程中执行查找和替换...
struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0
将atlassian-universal-plugin-manager-plugin-2.17.13.jar 替换到 jira/atlassian-jira-6.3.6-standalone/atlassian-jira/WEB-INF/atlassian-bundled-plugins/ 重新启动jira 用管理员账户登录jira
《jQuery Lightbox Plugin——打造极致图片查看体验》 在网页设计和开发中,为了提供优质的用户体验,图片查看功能显得尤为重要。jQuery Lightbox Plugin就是这样一款专为网页图片展示而设计的插件,它基于流行的...
mysql 5.7安全审计插件 Linux X86-X64通用...audit-plugin-mysql-5.7-1.1.7 for Linux 等保开启审计插件,貌似官网找不到,发出来共享. 缺点:日志信息比较大,对性能影响大。 优点:对每一时刻每一用户的操作都有记录。
yum-plugin-fastestmirror-1.1.31-54.el7_8.noarch.rpm
yum-plugin-fastestmirror-1.1.31-34.el7.noarch.rpm
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中,集成摄像头功能可以帮助用户实时捕捉图像,广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库,它...
修改datax源码plugin-unstructured-storage-util下的UnstructuredStorageReaderUtil.class 加上一个判断,因为在hdfs中,null值存储的是 \N ,所以需要把它转换成 null存储到Mysql中
jquery-clipchamp-mjpeg-player-plugin 这个 jQuery 插件为 MJPEG(“运动 JPEG”)视频提供了一个简单的播放器,由。 安装 有两种简单的替代方法可以将 jquery-clipchamp-mjpeg-player-plugin 添加到您的项目中: ...
jquery-fileupload-rails, 用于 Rails的jQuery文件上传集成 Rails 文件上传jQuery-File-Plugin 是一个文件上传插件,由的Tschan 。 jQuery文件上传功能多文件选择。drag&拖放支持。进度栏和jQuery预览图像。 支持...