js数组生成json数据 js二维数组的创建

来源:互联网 发布:cart算法如何做回归 编辑:程序博客网 时间:2024/06/05 04:28

以下是一段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

原创粉丝点击