基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目
2013-12-10 19:20
363 查看
项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示:
当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端html控件,所以还是会稍微多转化一下,
思路
对于数据的存储考虑过可以存放到多个字段里面,这样操作起来方便,现在通过查询资料是可以把这些只要是选中的某项都可以拼接成字符串存入到数据库中的一个字段中,读取的时候需要先把这些信息读取出来,再通过对字符串的拆分与读取,判断是否某些值被选择,这样大致的思路就有了,现在我们来实战:
实现过程
由于下面的复选框度在一个div里面存放,所以调用的是对div的点击事件:
这样通过提交表单的方法就可以把界面上的数据提交到后台,可以轻松的写入到数据库中了
Json中返回的数据格式:
存入list中的数据结构,对于这样的内容如果理解了,整体理解很简单了。
当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端html控件,所以还是会稍微多转化一下,
前提
这个是个人资料的修改,需要如果用户已经选择某项的话,需要加载时打上对勾:如图所示思路
对于数据的存储考虑过可以存放到多个字段里面,这样操作起来方便,现在通过查询资料是可以把这些只要是选中的某项都可以拼接成字符串存入到数据库中的一个字段中,读取的时候需要先把这些信息读取出来,再通过对字符串的拆分与读取,判断是否某些值被选择,这样大致的思路就有了,现在我们来实战:实现过程
首先定义的是一个隐藏空间为了存取数据向后台传送数据
<input id="zonestr" name="zonestr" type="text" style="display: none" />
由于下面的复选框度在一个div里面存放,所以调用的是对div的点击事件:
<div id="div1" style="border: 1px solid #D1D1D1" onclick="javascript:GetZone()">
接下来是如何把要选定的某项存入数据库中
<script> function GetZone() { //获取input所在div的对象 var ob = document.getElementById("div1"); //获取div中所用的IUPUT控件集合 var col = div1.getElementsByTagName("INPUT"); //定义一个变量并初始化为空 var str = ""; var count = 0; //循环遍历,判断INPUT是否选中 for (var i = 0 ; i < col.length; i++) { if (col[i].checked == true) { count++; if (count == 1) {//当是一个值得时候,直接把选中的值赋给字符串 str += col[i].value; } else { str += "/" + col[i].value;//多个被选中的时候,需要把选定的值不断的拼接 } //str+=col[i].value+"/"; } } document.getElementById("zonestr").value = str;//把选择完后的字符串给一个隐藏空间以便向后台传送 } </script>
这样通过提交表单的方法就可以把界面上的数据提交到后台,可以轻松的写入到数据库中了
核心内容:
对如何读取并判断数据并打上对勾呢?由于是基于easyui框架,需要通过Json数据的传送<script> $('#sheyuan').form('submit', { url: 'ShowMember.ashx',//调用的一般处理程序 onSubmit: function () { }, dataType: "json", success: function (data) {//返回的数据在data中 var NowLivecountry = eval("(" + data + ")").NowLivecountry//json为接收的后台返回的数据,拿出我存放界面上值得字段; var list = NowLivecountry.split('/');//把数据给拆分并放到list里面 //获取input所在div的对象 var ob = document.getElementById("div1"); //获取div中所用的IUPUT控件集合 var col = div1.getElementsByTagName("INPUT"); var str = ""; var count = 0; //通过页面上的循环获取的值与后台传送过来放到list中的数据一一比对,如果和界面的内容一致的就可以选择,让其打上对勾 for (var obj in list) { for (i = 0; i < col.length; i++) {//界面上input中的值 for (j = 0; j <= list.length; j++)//list中的值 { if (col[i].value == list[j])//比较是否内容相等,如果一致就在界面上打上对勾 { col[i].checked = true//是combox选中,打上对勾 } } } } } });
Json中返回的数据格式:
存入list中的数据结构,对于这样的内容如果理解了,整体理解很简单了。
总结
整个实现功能接触了:easyui架构中页面如何加载数据、如何从json数据中拿到某个字段值的内容、把json数据存入list、通过小的for循环来实现数据的对比,实现功能主要来源于静下心来多多的思考,这方面自己接下来多多的努力锻炼。相关文章推荐
- 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目
- 把TreeView的CheckBox选中值插入数据库,从数据库中读取数据后让CheckBox勾选
- java--时间字符串类型转换为可存入数据库时间类型的方法
- C# 读取 timestamp 时间戳 值为byte[] 类型时,需要转换成 16进制的字符串 和 数据库中的时间戳值进行比对
- 基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
- 字符串存入数据库date类型字段
- asp.net CheckBox从数据库读取数据设定是否选中 并更新
- 我刚做的一个TreeView的CheckBox进行选中插入数据库,从数据库中读取数据后让CheckBox勾选的代码!
- 框架-字符串拼接、数据库拆分
- input type="checkbox",选中或取消,将value存入隐藏域
- jquery 根据ID判断checkbox是否选中,取值,拼接字符串(和Java代码混用)
- C# 读取 timestamp 时间戳 值为byte[] 类型时,需要转换成 16进制的字符串 和 数据库中的时间戳值进行比对
- 框架 day54 BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)
- 基于easyui 框架,通过读取json 文件实现省市区三联动的效果
- Java从数据库中读取图片并转化为字符串类型
- asp.net中从数据库中读取数据,有对应的吧checkbox选中
- 二进制数据流方式实现 个人头像的读取、上传、修改------善良公社项目
- java读取文件以字节流的形式读取 然后转化为字节流数组,最后经过SHA1加密生成返回16进制字符串存入数据库
- ASP.NET 之 CheckBoxList在实际项目中的应用——高级查询、数据库读出默认选中
- 二进制数据流方式实现 个人头像的读取、上传、修改------善良公社项目