javaweb项目
我这个该怎么设计比较好
就是我要添加道具 而道具需要查询道具列表
道具可以添加多个
大家帮我想想以何种方式实现效果比较好
图1图2
我是这样子做的 点击添加 弹窗 道具列表 选择 添加 图1
添加后 （利用jquery append）进行追加 是图2
可是有两个问题：我再选择添加道具到页面
会出现同样的道具被追加进去
再说明一下 我现在 用的是bootstrap 没有用easyui
baiduzhidao.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<!-- jQuery -->
<script src="jquery/jquery-1.11.1.js"></script>
<!-- 可选的Bootstrap signin -->
<script type="text/javascript" src="myscjh/plugins/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<!--添加所需的JS-->
<script type="text/javascript" src="js/baiduzhidao.js"></script>
<!--添加所需的CSS-->
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/jumbotron-narrow.css">
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
</head>
<body>
<input class="btn btn-success" type="button" data-toggle='modal' data-target='#myModal' onclick="baiduzhidao.cleardata()" value="Add">
<div id="add"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Dialog Modal</h4>
</div>
<div class="modal-body">
<div id="collapse_magic" class="panel-group" jsselect="auths" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" >
<h4 class="panel-title">
<input type="checkbox" onclick="baiduzhidao.checkall(this)"></input>
<a class="check-fixed" jscontent="name" data-toggle="collapse" data-parent="#collapse_magic" href="#collapse_magic_User" aria-expanded="false" aria-controls="collapse_magic_User">Menu</a>
<label class="navbar-right" jstcache="0"></label>
</h4>
</div>
<div id="collapse_magic_User" class="panel-collapse collapse in" role="tabpanel" style="">
<div class="panel-body" >
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button" >apple</button>
</div>
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button">banana</button>
</div>
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button">orange</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="baiduzhidao.save();" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>baiduzhidao.js
if(!baiduzhidao){
var baiduzhidao ={
cleardata:function(){
$(":checkbox").prop("checked",false);//清除所有checkbox
$("h4 label").html("");
},
checksum:function(_this){
var temp = $(_this).parent().parent().parent();
var sum = temp.children().children("span").children(":checked").length;
var str = "";
if(sum!=0) str +="["+sum+"]";
var checksum =temp.parent().prev().children().children("label");
checksum.html(str);
},
checkall:function(_this){
var checksum = $(_this).siblings("label");
var temp = $(_this).parent().parent();
var checkitem = temp.next().children().children().children("span").children("input");//获取所有checkbox
var sum = checkitem.length;
checkitem.prop("checked",$(_this).prop("checked"));//与全选同步
var str="";
if($(_this).prop("checked")){
str +="["+sum+"]";
}
checksum.html(str);
},
getallchecked:function(){
var arr = [];
$(".authitem:checked").each(function(i,e){
arr.push($(e).parent().next().html());
})
return arr;
},
addtion:function(_this){
var data = $(_this).prev().val();
var intdata = parseInt(data);
$(_this).prev().val(++intdata);
},
subtraction:function(_this){
var data = $(_this).next().val();
var intdata = parseInt(data);
$(_this).next().val(intdata==1?intdata:--intdata);
},
save:function(){
var arr=[];
var str="";
arr = baiduzhidao.getallchecked();
for(var i=0;i<arr.length;i++){
//根据你自己需要的格式进行调整
str += "<div class='alert alert-success alert-dismissible fade in' role='alert'><button class='close' data-dismiss='alert' type='button'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button><div><label class='control-label' for='inputError2'>"+arr[i]+"</label><input type='button' onclick='baiduzhidao.subtraction(this)' value='-'><input type='text' value='1' readonly><input type='button' onclick='baiduzhidao.addtion(this)' value='+'></div></div>";
}
$("#add").html(str);
}
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<!-- jQuery -->
<script src="jquery/jquery-1.11.1.js"></script>
<!-- 可选的Bootstrap signin -->
<script type="text/javascript" src="myscjh/plugins/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<!--添加所需的JS-->
<script type="text/javascript" src="js/baiduzhidao.js"></script>
<!--添加所需的CSS-->
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/jumbotron-narrow.css">
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
</head>
<body>
<input class="btn btn-success" type="button" data-toggle='modal' data-target='#myModal' onclick="baiduzhidao.cleardata()" value="Add">
<div id="add"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Dialog Modal</h4>
</div>
<div class="modal-body">
<div id="collapse_magic" class="panel-group" jsselect="auths" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" >
<h4 class="panel-title">
<input type="checkbox" onclick="baiduzhidao.checkall(this)"></input>
<a class="check-fixed" jscontent="name" data-toggle="collapse" data-parent="#collapse_magic" href="#collapse_magic_User" aria-expanded="false" aria-controls="collapse_magic_User">Menu</a>
<label class="navbar-right" jstcache="0"></label>
</h4>
</div>
<div id="collapse_magic_User" class="panel-collapse collapse in" role="tabpanel" style="">
<div class="panel-body" >
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button" >apple</button>
</div>
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button">banana</button>
</div>
<div class="input-group">
<span class="input-group-addon">
<input class="authitem" type="checkbox" onclick="baiduzhidao.checksum(this)"></input>
</span>
<button class="btn btn-info form-control" type="button">orange</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="baiduzhidao.save();" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>baiduzhidao.js
if(!baiduzhidao){
var baiduzhidao ={
cleardata:function(){
$(":checkbox").prop("checked",false);//清除所有checkbox
$("h4 label").html("");
},
checksum:function(_this){
var temp = $(_this).parent().parent().parent();
var sum = temp.children().children("span").children(":checked").length;
var str = "";
if(sum!=0) str +="["+sum+"]";
var checksum =temp.parent().prev().children().children("label");
checksum.html(str);
},
checkall:function(_this){
var checksum = $(_this).siblings("label");
var temp = $(_this).parent().parent();
var checkitem = temp.next().children().children().children("span").children("input");//获取所有checkbox
var sum = checkitem.length;
checkitem.prop("checked",$(_this).prop("checked"));//与全选同步
var str="";
if($(_this).prop("checked")){
str +="["+sum+"]";
}
checksum.html(str);
},
getallchecked:function(){
var arr = [];
$(".authitem:checked").each(function(i,e){
arr.push($(e).parent().next().html());
})
return arr;
},
addtion:function(_this){
var data = $(_this).prev().val();
var intdata = parseInt(data);
$(_this).prev().val(++intdata);
},
subtraction:function(_this){
var data = $(_this).next().val();
var intdata = parseInt(data);
$(_this).next().val(intdata==1?intdata:--intdata);
},
save:function(){
var arr=[];
var str="";
arr = baiduzhidao.getallchecked();
for(var i=0;i<arr.length;i++){
//根据你自己需要的格式进行调整
str += "<div class='alert alert-success alert-dismissible fade in' role='alert'><button class='close' data-dismiss='alert' type='button'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button><div><label class='control-label' for='inputError2'>"+arr[i]+"</label><input type='button' onclick='baiduzhidao.subtraction(this)' value='-'><input type='text' value='1' readonly><input type='button' onclick='baiduzhidao.addtion(this)' value='+'></div></div>";
}
$("#add").html(str);
}
}
}
经测试通过 可行 截图
界面自己根据自己需要调整 若有什么疑问 QQ 278750600
温馨提示：答案为网友推荐，仅供参考
第1个回答 2014-10-24
点击“添加”，弹出所有可添加的道具窗口A，窗口A中用长方形表格，每个表格里有道具图片和复选框，然后有个添加BA按钮和取消BC按钮。当点击BA的时候，将选择的道具名称或图片显示到现在这个页面上，可以显示在“添加”按钮前，或下方，一个一个排开。如果现在的页面上没有删除道具功能的话，当第二次点击“添加”的时候，选中的道具依然显示在窗口A中，复选框选中。这样只要对要删除道具的复选框取消选择就可。
第2个回答 2014-11-04
没必要弹窗，点击添加后就出现第三张图(也就是图2)。其实连“添加”都没必要，直接就展示图2的道具列表就行了，因为你有提交按钮呢。只需要初始化的时候把所有道具的数量从数据库获取，没有的设置为0就可以了
第3个回答 2014-10-24
你可以弹出选择道具框来进行添加。
第4个回答 2014-10-24
jquery easyui呀，用combobox多选，ajax从后台取数据
道具太多的话可以用另外一个窗口或者把下拉菜单里自己写一下
道具太多的话可以用另外一个窗口或者把下拉菜单里自己写一下
相似回答