论坛首页 编程语言技术论坛

用SwapSelect在view中管理一对多关联

浏览 1785 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-12-10   最后修改:2009-12-10
在视图中建立一对象与已经存在的多个对象的关联比较麻烦。
在select-box中设置 multiple => true可以实现,但是如果选项太多的话,上下翻起来很麻烦。
或者用一堆的check_box。也不方便。

http://trendwork.kmf.de/26/swapselect-a-better-way-for-multiple-select-in-rails/
发现了SwapSelect
这个SwapSelect有左右两个选择框,从左边的框中选中到右边的框,提交就可以了。
只是目前还存在一些问题:
1.没有做成plugin,要将各文件拷到相应的位置;
2.有时不进行选择时会有问题,随便左右移动一下就好了;
3.选择框中什么都没有时,框会很窄,比较难看;
4.IE中显示有问题,在swapselect.css中改一下width:40%;就好了。
div.swap_select .swap_select_select {
	float:left;
	width:40%;
}

中文嘛,在swapselect.js中改一下就好了。
  this.languagesValues = new Object();
  this.languagesValues["AviableHeadline"] = "可选项";
  this.languagesValues["SelectedHeadline"] = "已选项";
  this.languagesValues["AssumeButtonTitleAttr"] = "添加";
  this.languagesValues["AssumeButtonText"] = "添加";
  this.languagesValues["AssumeAllButtonTitleAttr"] = "添加所有";
  this.languagesValues["AssumeAllButtonText"] = "添加所有";
  this.languagesValues["TakeBackButtonTitleAttr"] = "去除";
  this.languagesValues["TakeBackButtonText"] = "去除";
  this.languagesValues["TakeBackAllButtonTitleAttr"] = "去除所有";
  this.languagesValues["TakeBackAllButtonText"] = "去除所有";

中文显示时字号显得有些小,再改一下swapselect.css吧,改为font-size:12px;
div.swap_select p.swap_select_selected {
	font-size:12px;
	background-color:#EEEEEE;
	border:1px solid #CBCBCB;
	border-bottom:none;
}

用起来很简单。
  • 大小: 20.1 KB
   发表时间:2009-12-22  
没有人发表意见?
大家还有没有其它办法?
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics