js陣列生成json資料 js二維陣列的建立
阿新 • • 發佈：2019-02-07
以下是一段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