81,092
社区成员
发帖
与我相关
我的任务
分享jsp怎么实现动态分组功能
初来乍到，碰到一点问题，希望大神们帮帮忙；
是这样的，我从数据库查询出数据，需要在页面上显示，用的是jsp，根据需求，需要根据用户输入的分组数，在动态显示数据的同时，进行随机分组。打比方一共有96条数据，用户输入分组数是9，我要实现的效果是：页面有9组数据显示，前6组显示11条数据，后3组显示10条数据，然后每组数据显示前面有一个类似于跨行的效果，
类似这样的：具体每行的数据，我就简写了，用Java，大神们，拜托，
编号 姓名 学号 年龄 性别 出生年月 手机号
第一组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
第二组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
第三组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
是这样的，我从数据库查询出数据，需要在页面上显示，用的是jsp，根据需求，需要根据用户输入的分组数，在动态显示数据的同时，进行随机分组。打比方一共有96条数据，用户输入分组数是9，我要实现的效果是：页面有9组数据显示，前6组显示11条数据，后3组显示10条数据，然后每组数据显示前面有一个类似于跨行的效果，
类似这样的：具体每行的数据，我就简写了，用Java，大神们，拜托，
编号 姓名 学号 年龄 性别 出生年月 手机号
第一组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
第二组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
第三组
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
123 账三 123 12 男 1991-1-1 136*****
...全文
请发表友善的回复…
发表回复
小凤雏 2016-09-29
- 打赏
- 举报
你可以拿数据验证一下
小凤雏 2016-09-29
- 打赏
- 举报
举个例子啊，如果是20条数据，你分3组显示；那20/3=6.6多，取整数，按每组6条来说，也就是还有两条剩余，所以必须要加1；为了方便计算，使用20%3>0这种判断,如果没有整除，就是分组小了，所以要加1；至于你上面说的每组都加1，不是这样的，我上面有判断的，前面分组是都加1，后面我拿总数-前面分组数量，也就是最后一组的分组数=总数-（n-1）*每组大小
boybaozi 2016-09-29
- 打赏
- 举报
10楼说的可以，别忘了提前先判断用户要分的组数小于总条数
小凤雏 2016-09-29
- 打赏
- 举报
逻辑是：拿20分3组为例，先计算除法取整数，然后取余数计算，如果余数为0，说明恰好分组，否则，在遍历分组运算中，把余数分配到前面的结果上，每个加1即可。
街头小贩 2016-09-29
- 打赏
- 举报
如果不刷新的情况下jsp是不能实现实时分组的。
如果可以有刷新的情况下倒不难，c:forEach标签有一个varStatus可以实现你要 的效果
小凤雏 2016-09-29
- 打赏
- 举报
不好意思，上面那个没有测试，逻辑是有问题的，看看这个是我重新调试过的：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//后台查询的数据,这里我使用假数据
var initData=function(){
var jsonlist=[];
for(var i=0;i<20;i++){
var node={};
node.id=i+'';
node.name='数据'+i;
//jsonlist.add(node);
jsonlist.push(node);
}
return jsonlist;
}
var getDatai=function(datas,i,count){
var retJson=[];
for(var k=i;k<i+count;k++){
retJson.push(datas[k]);
}
return retJson;
}
var clearDatas=function(){
var tb=document.getElementById('mainTb');
var rows=tb.rows.length;
//从这个例子可以看出，var引用变量动态随着对象变化
if(rows>1){
for(var i=1;i<rows;i++){
tb.deleteRow(1);
console.log(rows+',i='+i);
}
}
}
var showDatas=function(){
//清空数据
clearDatas();
//分组数
var count=parseInt(document.getElementById('fenzu').value==''?0:document.getElementById('fenzu').value);
var gcount=0;//每组显示数目
var tb=document.getElementById('mainTb');
if(count>0){
var jsonarr=initData();
if(jsonarr.length>0){
//gcount=jsonarr/count;
//余数
var rcount=jsonarr.length%count;
gcount=parseInt(jsonarr.length/count);
var current_index=0;//当前分组开始位置的索引
var current_rows=0;
//分组创建table
for(var i=0;i<count;i++){
//其实这里使用table嵌套比较好，这里图方便不再叙述
var row=tb.insertRow();
var cell=row.insertCell();
row.insertCell();
cell.colSpan=2;
cell.innerHTML='第'+(i+1)+'分组';
//取第i组数据,这里从0开始默认第一组
if(rcount>0){
console.log(rcount);
current_rows=gcount+1;
rcount=rcount-1;
}else{
current_rows=gcount;
}
if(i==0){
current_index=0;
}else{
current_index+=current_rows;
}
var jnodes=getDatai(jsonarr,current_index,current_rows);
//console.log(jnodes);
for(var k=0;k<current_rows;k++){
if(jnodes[k]!=null){
row = tb.insertRow();//创建一行
var cell = row.insertCell();//创建一个单元
//cell.width = "150";//更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML=jnodes[k].id;
cell = row.insertCell();//创建一个单元
//cell.width = "150";//更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML=jnodes[k].name;
}
}
}
}
}
}
//初始化加载时候调用
</script>
<style type="text/css">
body{
text-align: center;
-webkit-user-select: none;
}
input[type=button]{
width: 90px;
}
ul{display: none}
#d1{
font-family: "微软雅黑";
background-image: url(img/HBuilder.png)
}
</style>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body style='margin: 0'>
输入分组：<input type="text" name='fenzu' id='fenzu'/><input type='button' value='分组显示' onclick="showDatas()"/>
<br>
<table id='mainTb'>
<th>
<td>ID</td>
<td>数据</td>
</th>
</table>
</body>
</html>
qq_35906906 2016-09-28
- 打赏
- 举报
还有一个需求忘记了，页面显示的数据是所有数据中随机抽出来的，就是说把所有数据打乱，然后重新排列分组
qq_35906906 2016-09-28
- 打赏
- 举报
逻辑不对呀，如果有余数，没组条数加一，那样的话，就是每一组都加一了，本来没组显示两个，这样的话没组就显示三个了，如果总条数少，组数多的话，后面几组没数据了
小凤雏 2016-09-28
- 打赏
- 举报
至于随机抽取，你可以放后台先封装好，效果是一样的；随机取数Math.random()*10，方法网上搜一下，比较多的。如果是list，就是遍历下标，通过随机数遍历，把顺序打乱即可
小凤雏 2016-09-28
- 打赏
- 举报
这个是一个简单的模拟，比较简单，数据是假数据，没有做style样式，你可以自己设计一下；过程比较简单：定义一个主table，table上面是输入分组框，当输入分组数量，点击分组显示，调用showDatas方法，里面逻辑也比较简单：获取初始化数据，计算每个分组的数量gcount（使用取余数判断，余数是否等于0；总数和分组数取余数，等0说明能够整除，分组大小等于总数除以分组数量；否则，说明分组大小还需要加1），然后分组创建table，过程中需要先调用getDatai=function(datas,i,count)获取当前分组数据，最后创建row显示即可（注解：本来应该使用嵌套table处理，为了方便暂时使用一个表，里面代码没有优化，可以自己修改一下）
小凤雏 2016-09-28
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//后台查询的数据,这里我使用假数据
var initData=function(){
var jsonlist=[];
for(var i=0;i<20;i++){
var node={};
node.id=i+'';
node.name='数据'+i;
//jsonlist.add(node);
jsonlist.push(node);
}
return jsonlist;
}
//取数操作，获取第i分组的数据
var getDatai=function(datas,i,count){
var start_i=i*count;
var end_i=start_i+count;
var retjson=[];
var size=datas.length;
for(var k=start_i;k<end_i;k++){
if(k<size){
var node=datas[k];
retjson.push(node);
}
}
return retjson;
}
var showDatas=function(){
//分组数
var count=parseInt(document.getElementById('fenzu').value==''?0:document.getElementById('fenzu').value);
var gcount=0;//每组显示数目
var tb=document.getElementById('mainTb');
if(count>0){
var jsonarr=initData();
if(jsonarr.length>0){
//gcount=jsonarr/count;
//余数
var rcount=jsonarr.length%count;
console.log(rcount);
if(rcount!=0){
gcount=parseInt(jsonarr.length/count)+1;
}else{
gcount=parseInt(jsonarr.length/count);
}
//分组创建table
for(var i=0;i<count;i++){
//其实这里使用table嵌套比较好，这里图方便不再叙述
var row=tb.insertRow();
var cell=row.insertCell();
row.insertCell();
cell.colSpan=2;
cell.innerHTML='第'+(i+1)+'分组';
//取第i组数据,这里从0开始默认第一组
var jnodes=getDatai(jsonarr,i,gcount);
//console.log(jnodes);
for(var k=0;k<gcount;k++){
if(jnodes[k]!=null){
row = tb.insertRow();//创建一行
var cell = row.insertCell();//创建一个单元
//cell.width = "150";//更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML=jnodes[k].id;
cell = row.insertCell();//创建一个单元
//cell.width = "150";//更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML=jnodes[k].name;
}
}
}
}
}
}
//初始化加载时候调用
window.onload=function(){
}
</script>
<style type="text/css">
body{
text-align: center;
-webkit-user-select: none;
}
input[type=button]{
width: 90px;
}
ul{display: none}
#d1{
font-family: "微软雅黑";
background-image: url(img/HBuilder.png)
}
</style>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<input type="text" name='fenzu' id='fenzu'/><input type='button' value='分组显示' onclick="showDatas()"/>
<table id='mainTb'>
<th>
<td>ID</td>
<td>数据</td>
</th>
</table>
</body>
</html>
