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

当初想如果是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--ftp服务器(pyftpdlib)

    # -*- coding: utf-8 -*-# @Time : 2018/4/11 16:47# @Author : liuxiaobing# @File : test2.py# @Software ...

  2. Template Method 模板设计模式

    什么是模板设计模式 对于不了解的模板设计模式的来说,可以认为如同古代的造纸术一样,纸所以成型,取决于用了模板的形状,形状又由镂空的木板组成,而你想要造什么纸,又取决于你使用什么材料. 上面提到了两个关 ...

  3. Centos 7安装MYSQL

    1.下载RPM源 直接使用yum命令下载mysql来进行安装是不能成功的,安装过程会有问题,这里需要使用rpm命令来先进下载.下载路径为: http://dev.mysql.com/get/mysql ...

  4. MAX(字段)加0与不加0的测试

    --max(字段名)中的"字段名"的数据类型是字符型的,"字段名"+ 0后,oracle会隐式的转换成数字型 --测试 )); insert into Test ...

  5. opencv视屏流嵌入wxpython框架

    前几篇博客分享搭建人脸识别与情绪判断的环境和源码,但是没有UI,界面很难看,一打开就是opencv弹出的一个视屏框.处女座的我看着非常难受,于是决定做一个UI,稍微规矩好看一点,再怎么说,这样的话也算 ...

  6. Android开发技巧——定制仿微信图片裁剪控件

    拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...

  7. Redis 学习笔记1:CentOS 6.7下安装Redis

    在linux环境搭建Redis环境,首先从官网(http://redis.io/)下载Redis 版本,本人使用的3.21版本. 1. 将redis 解压到  /usr/local目录下. [root ...

  8. Android之Animation动画各属性的参数意思(二)

    现在就来讲讲Animation里这四个标签的属性. 一.这四个标签alpha.scale.translate.rotate共有的属性为: android:duration        动画持续时间, ...

  9. 21 RadioGroup ListFragment

    结构 MainActivity.java package com.qf.day21_radiogroupfragment_demo3; import java.util.ArrayList; impo ...

  10. sql server中高并发情况下 同时执行select和update语句死锁问题 (二)

    SQL Server死锁使我们经常遇到的问题,数据库操作的死锁是不可避免的,本文并不打算讨论死锁如何产生,重点在于解决死锁.希望对您学习SQL Server死锁方面能有所帮助. 死锁对于DBA或是数据 ...