前端框架(二)DIV多选复选框框的封装和MySql数据库存取
图能够包括的寓意和含义是文字不能比拟的,先有一个效果图你也就知道这篇文章的主要内容是关于什么问题的。省去了一大堆文字的累述。看以下这张图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlsb25nc2hlbmcxMTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
这个需求就是要实现某个人具有第二种特性。具有多对多关系。比方某个人既喜欢运动、有喜欢上网等等。这样类似的需求在差点儿在每一个系统里面都有设计。并且非常多框架都实现了这种功能,假设让自己去实现就须要自己从建立表、逻辑、以及界面JS都须要自己手动去写,以下是说下我的设计思路。
设计思路
将多个checkbox放到一个div元素中。利用jquery的函数进div和checkbox进行控制选取。取值和赋值能够写一个循环既能够完毕。至于表单提交既能够利用form标签调教。也能够利用jquery的ajax方式提交。在对用户体验度要求高的系统中最好使用ajax方式提交,这是界面的设计部门,另外还有数据库表的建立,我在做数据库表时认为非常easy但也遇到了一些问题。
数据库须要建立一张关系表来存储多对多关系,大家都知道到,须要注意的是在这张关系表里面怎么存储。即多个复选框的ID是存储在一个字段里面还是一个ID一条记录呢。这两种方式都能够实现;假设存储在一个字段里面就须要把处理这个字段的逻辑写在java类里面,我在做表单时从表单界面直接到数据库SQL语句,中间逻辑已经封装不能够改动,因此仅仅能把IDS存在一个字段里面,感觉这样的方式实现也挺快,降低了逻辑。
例如以下有两张表fcs_checkitem、fcs_useritem。fcs_useritem为关系表它的itemids字段保存了fcs_checkitem表的itemid数组,想利用以下嵌套语句查询:
SELECT * FROM fcs_checkitem
WHERE itemid IN
(
SELECT itemids FROM fcs_useritem
WHERE userid='00000075' )
经測试这样写并不能查询出结果,由于里面嵌套的查询返回的结果是一个逗号隔开的字符串数据(001,002。,003),假设手动写一个这种数据是能够查询出来的,可是这样动态的方式是查不出来的,上网查发现mysql是不支持这样动态查询的,发现有还有一种思路实现这种keyword “IN” 的功能。
SELECT group_concat(b.itemname) as itemnames
FROM fcs_useritem a, fcs_checkitem b
WHERE CONCAT(CONCAT(',',a.checkid),',')
LIKE CONCAT(CONCAT('%,',b.itemid),',%')
AND a.userid=':{$urlParam("formid")}:'
上面利用了concat()以及group_concat()这两个函数,它原理是能够用几个字理解:用LIKE 实现IN的功能。
这种比如有两张表A和表B,A表的一个字段ids是B表字段id的数组。那么给B.id两天加上%,让A.ids字符数组两端加上逗号。拿一个详细的数字举个样例即是,1,去匹配,1,2,3,这个字符串,仅仅要找到一个匹配的就会返回一条记录。用这种方式实现类似于in的查询。
Concat()函数
这个函数经常使用语连接多个字符串,比如
String Str1="世界";
String str2="你好"
Str3=concat(str1,str2);
Str3="世界你好",这个函数把这两个字符串连接了起来,有时会认为非常实用;
Group_concat()函数。看一下效果
这是一个简单的查询结果,再看一下使用这个函数的效果
该函数实现了将表中查出的某一列数据,转换成一个字符串数组。如上图所看到的,假设你就是想把查出的某一列转为字符串数组会非常实用。
这个多选能够封装为一个颗粒、把公共的东西抽象出来弄成一个个的颗粒,把它封装为一个控件,这个控件有自己的函数获得checkbox值和赋值等方法,还能够封装一些样式等,还在考虑怎么才干把checkbox封装到div标签中。以后再用到时仅仅须要引入这个div标签就可以,通过div标签传參控制多选。这涉及到自己定义标签怎么弄,在.NET中能够开发用户自己定义控件,那么在标签中认为也是能够开发自己定义标签库,还有类似于下拉列表框等等,都能够封装起来。
不知道还有没有别的思路能够实现用户控件、或标签的封装?开发自己定义标签查了一下好实现。把开发jar包引入进来实现几个接口就能够定义自己的标签库了,开发自己定义标签库能够实现用户自己定义功能。方便页面上的布局,同一时候发现如今的非常多产品有关界面框架,不管界面多美观、高端大气。都是封装原始的html标签元素,封装也就意味着能够带了自己心的特性,假设有特殊需求的时候能够自己适当封装一下。
方便别人编程、也提高了开发效率和编码的灵活性。
前端框架(二)DIV多选复选框框的封装和MySql数据库存取的更多相关文章
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...
- WPF: 实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...
- java freemarker导出word时添加或勾选复选框
最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
- ExtJS中,将Grid表头中的全选复选框取消复选
今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...
- WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...
- iOS开发-UITableView单选多选/复选实现1
TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...
随机推荐
- PostgreSQL修改数据库目录/数据库目录迁移
说明:以9+版本为例,10+的版本只要把目录替换一下即可.迁移目录肯定是要停服的! 1.在数据库软件安装之后,初始化数据库时候,可以指定初始化时创建的数据库的默认文件路径 /usr/local/pgs ...
- xcode找不到真机设备 - 转
先确认证书是否正确 再确认Bundle Indentifier 是否与证书匹配 再确认Deployment Target 为:sdk从6.0改为4.3 如果xcode还无法识别iphone, Xcod ...
- activity之间參数传递&&获取activity返回值&&activity生命周期
Activity之间參数传递 A activity想将參数传给B activity时能够利用Intent将消息带过去 Intent intent = new Intent(this,BActivity ...
- iOS中alloc与init
面向对象的3大特性,封装继承和多态. 我遇到过封装相关的问题,因为初级封装简单,常常暴露出被你封装的接口,进一步进行高级封装隐藏接口的时候才发现,封装是一门学问,而这门学问得从最基础的alloc与in ...
- spring mvc获取header
两种方法: 1.在方法参数中加入@RequestHeader 2.在类级别注入HttpServletRequest 建议使用第二种方法,这样可避免每个方法都加入HttpHeaders参数 @Contr ...
- Unity3d通用工具类之数据配置加载类-ini配置文件加载
Unity3d通用工具类之数据配置加载类-ini配置文件加载 上次我们讲过xml文件的加载配置管理,今天我们换个配置文件,也是比较常见的配置文件.ini格式的数据. 按照国际管理先贴一张啥是.ini文 ...
- Adhoc
没觉得Adhoc还有什么做的,这几年貌似很冷了,从通信的角度讲,实现比较困难,实际意义不大,国内最近又跟风了VANET.以我同学做的为例,他考虑用Adhoc做野外分散点的自组网(一个集体内),但从通信 ...
- NLP知识十大结构
NLP知识十大结构 2.1形式语言与自动机 语言:按照一定规律构成的句子或者字符串的有限或者无限的集合. 描述语言的三种途径: 穷举法 文法(产生式系统)描述 自动机 自然语言不是人为设计而是自然进化 ...
- Android Protobuf应用及原理
前言 之前一直忙于移动端日志SDK Trojan的开源工作,已十分稳定地运行在饿了么团队App中,集成了日志加密和解密功能.哎呀,允许我卖个狗皮膏药,不用不知道,用了就知道,从此爱不释手,Trojan ...
- 常用的OpenCV函数速查
常用的OpenCV函数速查 1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4 ...