- 浏览: 300801 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
masuweng:
如何给新人机会 -
masuweng:
多sql结果集按列合并新结果报表实现方案 -
Ahe:
赞
坚持长跑方能赢 -
masuweng:
好好好
程序员如何更好的了解自己所做的事情 -
小楠人:
laoguan123 写道楼主好,使用过一些excel导入导出 ...
excell导入导出
实现文本框搜索多选框选择功能:
文本框搜索,多选框响应检索结果,选中触发事件后触发模版切换操作。
涉及到焦点触发显示多选框,ajax中文乱码处理等。
前端代码:
#'_model_text.html.erb'
JS代码:
后台代码:
文本框搜索,多选框响应检索结果,选中触发事件后触发模版切换操作。
涉及到焦点触发显示多选框,ajax中文乱码处理等。
前端代码:
<div class="col right" id="change_copy_model"> <%=render :partial=>"model_text"%> </div>
#'_model_text.html.erb'
<label class="label label">模版复制:</label> <span style="position: relative; float: left;"> <input type="text" id ="projectNameText" onclick="click_text_show()" style="width:220px;position:absolute" placeholder="输入文字检索"/> <div style="overflow-x: auto; overflow-y: auto;height:155px;width:259px; border:solid 1px;border-color:#B0C1D3;background-color:#ffffff;position: absolute; visibility: visible; z-index: 1000;margin-top:23px;display:none;" id="myare0" onmouseover="MM_over(this)" onmouseout="MM_out(this)" > <%=select_tag 'copy_model[report][]', @yourarrarys.collect{|c| [c.name,c.id]}), :multiple => true, :size => 10,:onchange=>"check_model()",:style=>"width:259px;position: absolute; visibility: visible; z-index: 1000;"%> </div> </span> <a href="#" onclick="searchProjectName()"> <img border="0" style="POSITION:absolute;margin-left:205px;margin-top:2px;" src="/stylesheets/themes/ultrapower/images2/find.jpg" id="hide_img"> </a>
JS代码:
<script type="text/javascript"> //点击隐藏模版复制列表 document.onclick=function(e){ var b=jQuery('#myare0') var el = window.event.srcElement; if(jQuery('#myare0').css("display")=="block"&&el.id!= 'projectNameText'&&el.parentNode.id!= 'myare0'&&el.parentNode.parentNode.id!= 'myare0'){ jQuery('#myare0').hide(); } } //模版切换响应 function check_model(){ window.location.href='/freed_report/ult_report_models/copy_report_model?id='+jQuery('#copy_model_report_').val() } //模版搜索按钮触发post事件 function searchProjectName(){ var mytext=document.getElementById("projectNameText").value; var myurl="/freed_report/ult_report_models/check_model_text?text_input="+mytext //url中文转码 myurl=encodeURI(myurl); myurl=encodeURI(myurl); $.ajax({ type: "POST", url: myurl , contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(msg){ $("#change_copy_model").empty(); $("#change_copy_model").append(msg); }, error: function(msg){ } }); } //模版搜索框控制模版列表显隐 function click_text_show(){ jQuery('#myare0').show(); } //模版列表鼠标划入、划出事件 function MM_over(mmObj) { var mSubObj = mmObj; mSubObj.style.display = "block"; mSubObj.style.backgroundColor = "#ffffff"; } function MM_out(mmObj) { var mSubObj = mmObj; var el = window.event.srcElement; mSubObj.style.display = "none" } </script>
后台代码:
def check_model_text #模版模糊查询 @model_text_search=CGI::unescape(params[:text_input]) @ult_report_models=FreedReport::UltReportModel.find(:all,:conditions=>"name like '%#{@model_text_search}%' ",:order=>"name desc,area_gran,time_gran") render :partial => 'model_text' end
发表评论
-
git仓库创建
2020-09-04 15:33 708推送现有文件夹 cd existing_folder git ... -
puma高并发
2020-08-19 09:31 475nginx突发大量502报错 top看一下,cpu的占用并不高 ... -
searchkick
2019-04-10 11:30 0# 通用查询块(条件) def general_ ... -
导入线下excell业务数据按权重匹配线上数据
2019-03-07 11:00 890业务场景:(系统间还没有接口对调,订单号暂时需要线下处理) 线 ... -
两对象同时映射一对一和一对多
2019-02-20 10:14 837class Kpi::Team < Applicat ... -
ruby一些类加载方式
2018-12-21 10:12 564require_dependency 'order/sco ... -
基于ruby的gem remotipart的异步上传文件
2018-12-21 10:11 530针对某一对象保存实例化之前,异步上传图片保存。 gem ' ... -
基于html2canvas的长图分享
2018-12-21 10:11 1156<span class="ui label ... -
rails处理上传读取excell&生成excell
2018-12-20 14:15 970gem 'spreadsheet' gem 'roo', ... -
基于ruby Mechanize的爬虫
2018-12-20 13:09 668def self.sang_carwler ... -
一些常用加密方式
2018-12-20 13:02 730sign = OpenSSL::Digest::SHA256. ... -
ruby 调用restful接口示例
2018-12-20 12:02 926链接参数中添加token def self.query_p ... -
省地市联动js
2018-12-20 10:41 614方案一 <div class="l&qu ... -
rails错误日志记录
2018-12-19 14:41 759Rails中对日志的处理采用的是“消息-订阅”机制,各部分组件 ... -
railsAPI接收Base64文件
2018-12-18 11:05 1038tmp_dir = " ... -
ruby 调用savon接口示例
2018-12-18 10:51 1017例子一 module Api module Aob ... -
关于国际商城现货展示与购物车的费用设计
2018-11-15 18:34 442关于国际商城现货展示 ... -
基于多线程的全局变量
2018-10-31 19:50 1161def current_nation def ... -
hash最小值过滤算法
2018-10-31 09:52 1085[["数量","包装" ... -
一些常用的ui框架组合
2018-10-09 17:52 1019amaze zUI 开源HTML5跨屏框架 window. ...
相关推荐
综上所述,"树形下拉多选框"是一个使用了ZTree和Bootstrap技术的组件,具备两种显示模式,支持多选操作,并且可能集成了搜索功能,方便用户在复杂的数据结构中筛选和选取需要的项。这种组件在网页应用中常用于权限...
本教程将深入探讨如何使用jQuery实现下拉多选框的效果,这在创建交互式用户界面时非常常见。 首先,我们需要理解下拉多选框的基本结构。在HTML中,我们可以使用`<select>`元素来创建一个下拉菜单,`<option>`元素...
首先,我们需要理解下拉多选框的基本结构。在HTML中,我们可以使用`<select>`元素配合`<option>`元素来创建一个标准的下拉选择框。但是,如果要实现多选功能,原生的`<select>`标签并不支持,所以我们通常会用到定制...
本文将详细介绍如何创建一个自定义的下拉列表框用户控件(Custom ComboBox),这个控件不仅支持基本的文本选项,还能够显示自定义的控件作为下拉项。 标题中的“WinForm自定义下拉列表框用户控件”指的就是我们将在...
`OptionMenu`是tkinter内建的一个下拉列表组件,但默认情况下,它不支持多选。因此,我们需要自定义一个组件来实现这个功能。这通常涉及到创建一个`ttk`的`Combobox`,并添加一些额外的逻辑来处理多选和滚动条。 1....
4. CSS(层叠样式表): `multiple-select.css`是样式表文件,负责控制多选下拉框的视觉表现,如颜色、大小、字体、边框、过渡效果等。CSS使得我们可以定制控件的外观,使其与网站的整体设计保持一致。此外,它还可以...
在CSS和jQuery中,我们可以使用媒体查询(`@media`)和`.resize()`事件来确保下拉多选框在手机、平板和桌面设备上都有良好的显示效果。 8. ** Accessibility(无障碍性)**:在开发过程中,不要忘记考虑无障碍性。...
在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: 测试多选渲染: <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...
本文主要探讨了使用Vue框架实现带有复选框的树形结构组件,重点在于在已有的递归组件基础上添加多选框功能,并实现一些基本的交互逻辑。要实现这样的功能,需要考虑以下几个关键技术点: 1. **递归组件的使用**:...
数据源可以是数组,其中每个元素代表一个选项的信息,包括文本和是否被选中的状态。 - **事件处理**:实现多选下拉框的关键在于处理用户的交互事件,如点击选项、点击全选按钮等。需要监听这些事件,并更新相应的...
这包括改变checkbox的选中状态,可能还有显示隐藏的下一级选项,或者更新一些总结性的展示,如已选项目的总数。 6. **性能优化**:在处理大量数据时,应避免不必要的DOM操作,例如使用事件委托来减少事件监听器的...
尽管主要目的是创建可折叠的导航菜单,但经过适当的定制,也能实现下拉多选框的效果。 8. **jquery-textext**:这是一个jQuery插件,专注于文本输入框的增强,包括自动完成、筛选和多选等功能。它可以用于创建更...
本文将深入探讨如何使用JavaScript实现下拉多选框的功能。 一、HTML基础 首先,我们需要创建一个基础的HTML结构来承载我们的下拉多选框。HTML的`<select>`元素用于定义下拉列表,`<option>`元素则用于定义列表中的...
首先,让我们了解下拉多选框(Dropdown)和复选框(Checkbox)的基本概念。下拉多选框通常用于节省页面空间,当需要展示大量选项时特别有用。它由一个可点击的标题和一个隐藏的列表组成,列表中包含所有可用选项。复...
下拉复选框通常由HTML的`<select>`元素与`<option>`子元素配合使用,而为了实现更丰富的交互效果,我们可能还会涉及到JavaScript(js)和CSS(css)的运用。在这个项目中,包含的`TestPublicUserManageNew.html`是主...
例如,可以为多选下拉框对象添加新的方法来支持搜索功能,或者修改其属性来改变选项的显示方式。 具体实现时,我们可能会创建一个名为`DropdownBox`的构造函数,用于初始化多选下拉框对象。这个构造函数可以接受...
在本主题中,我们将深入探讨如何使用EasyUI插件来美化下拉多选框,以提升用户体验和界面美观度。 EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件库,包括表格、窗口、菜单、对话框等,以及我们...
纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...