Java获取后台数据,动态生成多行多列复选框
本例目标:
获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面
应用场景:
获取数据库的人员姓名,将其显示在页面,供多项选择
效果如下:
一、后台
查询数据库,返回List集合形式给页面
二、HTML
设置一个div,里面动态加载人员姓名
<div id="result" style="background-color:#FFE4B5; width:300px; "> </div>
三、JS
(1)dealData(result)中的这个result,是后台返回的 查询数据库得到的 所有人员的 List集合数据,
(2)遍历这个List集合,result[i].Name就是集合里的姓名字段,将其动态加载到页面
(3)使用div的append方法,在div里添加复选框
(4)注意:checkbox复选框和label标签配合使用
function dealData(result){
for(var i=; i < result.length; i++ ){
$("#result").append(
"<label>"
+ "<input name='items' type='checkbox' value="
+ result[i].Name
+ ">"
+ result[i].Name
+"</label>" + " "
);
//每三个进行换行
if( (i+) % == ){
$("#result").append("<br>");
}
} }
成功:
四、获取所有选中的复选框
Jquery方法:
//获取选中的所有复选框
var str="";
$("input[name=items]:checkbox:checked").each(function(){
str = str + $(this).val() + ",";
});
五、多列复选框对齐
效果如下:
有人的名字是两个字,有的人名是三个字,
要对齐的话,js方法判断:如果是两个字,在名字后加两个"#nbsp;"空格字符
因为一个汉字等于两个字符
在第三步的JS代码里添加一个if判断语句即可:
for(var i=; i < result.length; i++ ){
$("#result").append(
"<label>"
+ "<input name='items' type='checkbox' value="
+ result[i].emplName
+ ">"
+ result[i].emplName
+"</label>" + " "
);
//一个汉字占两个字符
if(result[i].emplName.length == ){
$("#result").append(" ");
} //每三个进行换行
if( (i+) % == ){
$("#result").append("<br>");
}
}
Java获取后台数据,动态生成多行多列复选框的更多相关文章
- ExtJS表格——行号、复选框、选择模型
本篇的内容是为表格添加行号,和复选框,最后谈一下Ext的选择模型.内容比较简单,就直接上代码了.一. 设置行号 行号的设置主要问题在于删除某一行后需要重新计算行号 Ext.onReady(fun ...
- 通过js根据后台数据动态生成一个页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExportSelField ...
- java freemarker导出word时添加或勾选复选框
最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...
- easyui复选框树动态加载后台数据,实现自动选中数据库中数据。后台语言是.NET
最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...
- java swing 添加 jcheckbox复选框
总体上而言,Java Swing编程有两大特点:麻烦.效果差. 麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclip ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- cglib根据数据动态生成对象
最近有个任务:根据查询SQL直接导出报表 实现关键是,怎么根据sql查询的数据动态生成对象列表,想到Cglib动态代理实现 废话少说,上代码: 定义动态生成Java Bean类: import jav ...
随机推荐
- Eclipse项目左侧调整显示或者不显示路径
View Menu(倒三角)-->Package Presentation-->选择Flat或Hierarchical
- [C#]读取不同版本的excel文件的方法
--------------------------------2007及以上的版本-------------------------------- 测试如下: //DataInterface.Met ...
- 第 6 章 存储 - 039 - Data Volume 之 bind mount
Data Volume Data Volume 本质上是 Docker Host 文件系统中的目录或文件,能够直接被 mount 到容器的文件系统中. Data Volume 有以下特点: 1.Dat ...
- windows安装使用docker
doker就是一个容器,如果想要在windows安装还必须要用另外一个工具docker-toolbox.下载地址:https://mirrors.aliyun.com/docker-toolbox/w ...
- m_Orchestrate learning system---三十六、如何修改插件的样式(比如ueditor)
m_Orchestrate learning system---三十六.如何修改插件的样式(比如ueditor) 一.总结 一句话总结:所有的js,html插件,修改样式无非是两种,一是直接修改css ...
- QQ Protect 的删除
删的好费劲,驱动程序,服务,各个东西都在相互保护. 最后总结: 1)进安全模式 2)删除 下面的文件 c:\program files\tencent\qqlite\shellext\qqshelle ...
- 雷林鹏分享:C# 数组(Array)
C# 数组(Array) 数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1... ...
- Confluence 6 如何保持我空间的整洁
如果你有很多用户在同一个空间中编辑和创建内容,你的空间将会很快的变得混乱不堪.你可以使用下面的一些步骤来避免这个的发生. 创建一系列的指南 让你的合作编辑用户知道创建页面的上级页面是什么,这样可以保证 ...
- python基础之列表以及切片等操作
列表 定义: 能装对象的对象,列表能放大量的数据,各种类型,且列表内的数据是可以修改保存的,常用 [ ] 去表示,每一项数据之间用逗号隔开 1.列表的索引与切片 1.1 索引 与字符串的索引几乎一致, ...
- 一篇文章一张思维导图看懂Android学习最佳路线(转载)
Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级.中级.高级以及资深工程师.只针对Android应用开发,不针对Rom开发和逆向工程等.方便起见虚拟“小 ...