以下是一段html源代码:
<div class="form-group">
<label for="pricetext" class="col-sm-1 control-label">物料管理</label>
<div class="col-sm-11">
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog set_width">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="menu_close22" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
物料管理
</h4>
</div>
<div class="modal-body">
<div id="tree2">
<div class="form-group" style="border-bottom:1px solid #EEEEEE;">
<label class="col-sm-2 margin-b-5 text_align_l">产品名称</label>
<label class="col-sm-2 margin-b-5 text_align_l">规格</label>
<label class="col-sm-2 margin-b-5 text_align_l">单位</label>
<label class="col-sm-2 margin-b-5 text_align_l">数量</label>
<label class="col-sm-2 margin-b-5 text_align_l">单价</label>
<label class="col-sm-1 margin-b-5 text_align_l">自来</label>
<label class="col-sm-1 margin-b-5 text_align_l">操作</label>
</div>
<div class="form-group" style="border-bottom:1px solid #EEEEEE;">
<div class="col-sm-2 margin-b-5">
<input type="text" data="name" class="form-control">
</div>
<div class="col-sm-2 margin-b-5">
<input type="text" data="spec" class="form-control">
</div>
<div class="col-sm-2 margin-b-5">
<input type="text" data="unit" class="form-control">
</div>
<div class="col-sm-2 margin-b-5">
<input type="text" data="numbers" class="form-control">
</div>
<div class="col-sm-2 margin-b-5">
<input type="text" data="price" class="form-control">
</div>
<div class="col-sm-1 margin-b-5 text_align_c">
<input type="checkbox">
<input type="hidden" data="zilai" value="0">
</div>
<label class="col-sm-1 margin-b-5 control-label">
<span class="glyphicon glyphicon-plus color-green font-s20" title="新增"></span>
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="menu_clear" data-dismiss="modal">
<span class="glyphicon glyphicon-trash"></span> 清理
</button>
<button type="button" class="btn btn-primary" id="menu_close2" data-dismiss="modal">
<span class="glyphicon glyphicon-off"></span> 关闭
</button>
</div>
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" id="materialtext" name="materialtext" placeholder="请选择单价" value="" readonly>
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal2" id="sel_menu">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
以下是一段jquery语句:
<script type="text/javascript">
$(document).ready(function(){
$('#tree2 label .glyphicon-plus').click(function(){
var obj = $(this).parent().parent();
var obj1 = $(obj).clone(true);
$(obj1).insertAfter($(obj));
$(obj1).find("input").val('');
$(obj).children('label:eq(-1)').html('<span class="glyphicon glyphicon-minus color-grey font-s20"></span>');
$(obj).find('label .glyphicon-minus').click(function(){
$(this).parent().parent().remove();
});
});
$('#tree2 label .glyphicon-minus').click(function(){
$(this).parent().parent().remove();
});
$('#tree2 div input[type="checkbox"]').click(function(){
if($(this).is(':checked') == true)
{
$(this).siblings('input[type="hidden"]').val(1);
}else{
$(this).siblings('input[type="hidden"]').val(0);
}
});
$('#menu_close2,#menu_close22').click(function(){
var arr = new Array();
$('#tree2 > div:gt(0)').each(function(i){
var brr = new Array();
$(this).find('input:not([type="checkbox"])').each(function(e){
if(e == 0 && $(this).val() == '')
{
return false;
}
brr[e] = $(this).val();
});
arr[i] = brr;
});
var strify = JSON.stringify(arr);
if(strify != '[[]]')
{
$('#materialtext').val(strify);
}
});
});
</script>
如果您试图将源码复制去运行,您可能还需要加载一个bootstrap的js文件
今天的重点是关于js的数组如何创建出二维数组,并且如何将数组转换为JSON数据,这可能会很容易,毕竟网上资料也不少:
//以下这段源码包含了今天的主要内容,详细请看注解
//当点击模型的关闭按钮时发生以下事件
$('#menu_close2,#menu_close22').click(function(){
//创建一个空数组
var arr = new Array();
//遍历id=tree2这个元素的一级子元素
$('#tree2 > div:gt(0)').each(function(i){
//创建第二个空数组
var brr = new Array();
//从某个子元素的子元素里面提取input元素,并且排除类型为checkbox的元素
$(this).find('input:not([type="checkbox"])').each(function(e){
//这里需要清除第一个input元素中没有数据的整个循环
if(e == 0 && $(this).val() == '')
{
//跳出整个each循环
return false;
}
//将这个子元素中所有input数据存储在brr数组中
brr[e] = $(this).val();
});
//将brr数据存储在arr数组中,形成js的二维数组
arr[i] = brr;
});
//将arr数组转换为JSON数据
var strify = JSON.stringify(arr);
//如果JSON数据不为空
if(strify != '[[]]')
{
//将JSON字符串放入指定的input中
$('#materialtext').val(strify);
}
});
js不能直接创建二维数组,需要通过中介变量进行转换,效果还是有的,这点毋庸置疑
至于转JSON这个方法只是附带的,有兴趣可以研究
喜欢bootstrap的,可以关注网站:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html