项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示:

当初想如果是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拼接成字符串存入数据库和读取选中---善良公社项目的更多相关文章

  1. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  2. js对象数组中的某属性值 拼接成字符串

    js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...

  3. 快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。

    快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...

  4. 将前台input中的数据异步传到后台并存入数据库

    将前台input中的数据异步传到后台并存入数据库 先看图: 利用ajax异步交互数据,并不是以json数组的形式将数据传到后台,而是利用字符数组的形式将其传到后台.动态新增每一行数据,将每一列对应的数 ...

  5. .join() ----- 是把列表中的元素用 "xx".join() 拼接成字符串

    li = ["alex", "eric", "rain"] str1 = "_".join(li) # 是把列表中的元素 ...

  6. SQLserver将查询的字段中的数据 拼接成字符串用逗号隔开

    ,,'') 将查询的字段中的数据 拼接成字符串用逗号隔开

  7. Date、Time类型拼接成字符串

    Date.Time类型拼接成字符串 语言用的是kotlin,和Java类似 var time = "" val sdf1 = SimpleDateFormat("yyyy ...

  8. jQuery easyUI框架中经常出现的问题

    相信开发者对于我们jquery来说都不会陌生吧,jquery为我们的开发提供了很多各式各样的库,满足各种开发的需求,其中我们知道的有轻量级的,但是也有一些基于富客服端的一些重量级库,顾名思义,当我们在 ...

  9. easyui框架中关于dialog自带关闭事件的使用

    easyui是一个开源的第三方控件库,虽然使用比较方便,但其中有些事件和样式会与其他的控件或者框架形成冲突. 今天谈一下easyui 中dialog这个控件(对话框) easyui dialog一般在 ...

随机推荐

  1. python while条件和if判断的总练习

    输出123456 89的数字 num =1 while num < 11: if num == 7: pass else: print(num) num = num + 1 输出1-100的奇数 ...

  2. 给大家安利一个学习angular2的视频网站

    本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 视频地址: https://egghead.io/courses/angular-2-fundamen ...

  3. SpringBatch的核心组件JobLauncher和JobRepository

    Spring Batch的框架包括启动批处理作业的组件和存储Job执行产生的元数据.因此只需掌握配置这个基础框架在批处理应用程序中即启动Jobs并存储Job元数据. 组件:Job Launcher和J ...

  4. Redis源码学习:Lua脚本

    Redis源码学习:Lua脚本 1.Sublime Text配置 我是在Win7下,用Sublime Text + Cygwin开发的,配置方法请参考<Sublime Text 3下C/C++开 ...

  5. Linux块设备加密之dm-crypt分析

    相关的分析工作一年前就做完了,一直懒得写下来.现在觉得还是写下来,以来怕自己忘记了,二来可以给大家分享一下自己的研究经验. 这篇文章算是<Device Mapper代码分析>的后续篇,因为 ...

  6. Android自动打包工具aapt详解

    概念 在Android.mk中有LOCAL_AAPT_FLAGS配置项,在gradle中也有aaptOptions,那么aapt到底是干什么的呢? aapt即Android Asset Packagi ...

  7. cassandra 监控方案评估

    摘要 最开始做cassandra monitor 方案的选型时,主要是从cassandra 本身入手,后来发现cassandra运行在JVM上,所有的metrics都是通过JMX 暴露出来.所以又可以 ...

  8. Android中的语言和字符串资源

    在任何情况下,从您的应用代码中提取 UI 字符串并将其存放在外部文件中都是个好办法.Android 在每个 Android 项目中都提供一个资源目录,从而简化了这一过程. 如果您是使用 Android ...

  9. ROS常用三維機器人仿真工具Gazebo教程匯總

    參考網址: 1. http://gazebosim.org/tutorials 2. http://gazebosim.org/tutorials/browse Gazebo Tutorials Ga ...

  10. System startup files

    System startup files When you log in, the shell defines your user environment after reading the init ...