87,997
社区成员
发帖
与我相关
我的任务
分享tab动态增加和删除问题
我有一功能,需要分批制定项目推广分行计划,,
如:
第一批：推广月份输入框 2015-03，推广分行checkbox勾选 上海、四川、深圳
第二批：推广月份输入框 2015-04，推广分行checkbox勾选 大连、吉林、河北、山东
第三批 ................
第四批 ...........
。。。。。
我想采用tab控件，默认显示第一批tab1，然后输入日期和勾选分行，完成后添加tab2，同样操作,,,,,依次类推。并且要判断每个tab的日期和分行不能相同，也就是相互唯一，某个行不能这个月推广下个月也推广。
所有完成后点击提交项目推广分行计划到数据库中。
本想适使用jquery.easyui，但动态获取输入框的value值不会？如何获取值提交到后台也不会，哪位高手看看，谢谢！
如:
第一批：推广月份输入框 2015-03，推广分行checkbox勾选 上海、四川、深圳
第二批：推广月份输入框 2015-04，推广分行checkbox勾选 大连、吉林、河北、山东
第三批 ................
第四批 ...........
。。。。。
我想采用tab控件，默认显示第一批tab1，然后输入日期和勾选分行，完成后添加tab2，同样操作,,,,,依次类推。并且要判断每个tab的日期和分行不能相同，也就是相互唯一，某个行不能这个月推广下个月也推广。
所有完成后点击提交项目推广分行计划到数据库中。
本想适使用jquery.easyui，但动态获取输入框的value值不会？如何获取值提交到后台也不会，哪位高手看看，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Tabs Tools - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script language="javascript">
<!--
function checkinfo(){
//如何或者控件value？
//如何判断每个tab是否控件之间的value是否重复？
//如何取到值提交到后台？
}
-->
</script>
</head>
<body onload="add()">
<form name="form" method="post" action="/zygl/action/PBranchPlan.asp" onsubmit="return checkinfo();">
<h2>Tabs Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons on the top right of tabs header to add or remove tab panel.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="add()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="remove()"></a>
</div>
<script type="text/javascript">
var index = 0;
function add(){
index++;
if(index==1){
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">推广日期'+index+'：<input type="text" name="LaunchDate"'+index +'><br><input type="checkbox" name="LaunchBranch"'+index +' value="上海">上海<input type="checkbox" name="LaunchBranch"'+index +' value="北京">北京</div>',
closable: false
});
}
else{
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">推广日期'+index+'：<input type="text" name="LaunchDate"'+index +'><br><input type="checkbox" name="LaunchBranch"'+index +' value="上海">上海<input type="checkbox" name="LaunchBranch"'+index +' value="北京">北京</div>',
closable: true
});
}
}
function remove(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
if(index!=0){
$('#tt').tabs('close', index);
}
}
}
</script>
<input type="Submit" name="Submit" value="提交" accesskey="S">
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
娃都会打酱油了 2015-03-26
- 打赏
- 举报
虽然记得不清楚了，但easyui每个tab应该也是独立的div吧
如果你都是允许客户输入的话，那你这个根本没法控制
简单点的做法是：将月份固定至每个tab，这样就只用关心分行是否是连续两个月被选中了
第几个tab对应第几个div你应该是可以通过标志位或者其它方式确认并获取到的
那么有没有被连续选中就变得简单了
在某个checkbox被选中后(假定上海，对应唯一编号SHA（这是城市三字码，妥妥的唯一）)，向上找到最外层的div，确认这是第几个tab的，比如这是第二个div，那么你就要向前、向后找，可能的代码如下
if($('div:eq(0) :checked[value='+SHA+']').length>0||$('div:eq(2) :checked[value='+SHA+']').length>0)
{
//SHA已经被选择了连续多月推广
//SHA对应的checkbox取消选中
}
wx8849 2015-03-26
- 打赏
- 举报
var obj = $("#tt div");
for (var i = 0; i < obj.length; i++) {
var date = $(obj[i]).children("input").eq(0);//获取第一个input
}
wx8849 2015-03-26
- 打赏
- 举报
这个时候提交 就得去解析html 代码了
