推薦一個(gè)網(wǎng)站缠劝，建議大家去看看怎樣快速而優(yōu)雅地遍歷 JavaScript 數(shù)組
第一段
場(chǎng)景：
php將數(shù)據(jù)取出便利到模版后，自己用js取出模版的數(shù)據(jù)骗灶，組裝成json格式提交到一個(gè)控制器惨恭。比如代碼如下：
<tbody>
<tr>
<td>15</td>
<td>1</td>
<td>1</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>1</td>
<td>1</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>1</td>
<td>1</td>
<td>17</td>
</tr>
</tbody>
- 取出數(shù)據(jù)的代碼
// 取出標(biāo)題部分
var thead = new Object();
$("thead tr th").each(function(i){
thead[i] = $(this).text();
});
console.log(thead);
// tbody
var datas = new Object();
$("tbody tr").each(function(i){
datas[i] = new Object();
datas[i]['id'] = $(this).children("td").eq(0).text();
datas[i]['web_id'] = $(this).children("td").eq(1).text();
datas[i]['game_id'] = $(this).children("td").eq(2).text();
datas[i]['username'] = $(this).children("td").eq(3).text();
});
// console.log(datas);
// datas = JSON.stringify(datas);
// console.log(datas);
//// 組裝標(biāo)題和內(nèi)容
var data = new Object();
data['thead'] = thead;
data['datas'] = datas;
// ajax處理
$.ajax({
type: "GET",
url: "{{ url('excel') }}",
data: data,
dataType:'json',
success: function (data) {
alert(data.msg);
}
})
注意事項(xiàng)：
1。數(shù)組和對(duì)象使用介紹：數(shù)組和對(duì)象要預(yù)定義耙旦。而且一次預(yù)定義只能定義一維數(shù)組脱羡。
所以我們?nèi)绻枰褂枚S數(shù)組，就可以在內(nèi)部再定義一個(gè)數(shù)組免都，然后賦值給外層數(shù)組锉罐。
2.數(shù)組或?qū)ο蟮氖褂眠x擇：JSON.stringify(datas);是將對(duì)象轉(zhuǎn)換成json格式。此處其實(shí)使用new Array;也可以取出數(shù)據(jù)绕娘。但是我們還是用對(duì)象比較符合需求
3.打优Ч妗：數(shù)組活著對(duì)象的時(shí)候，我們打印可以使用console.log(datas),但是使用documen.write(datas)是不能打印數(shù)組對(duì)象的险领。我們?nèi)绻蛴【唧w某個(gè)值侨舆，使用這兩種方式都可以
ajax請(qǐng)求處理
- 在控制器里面打印
ajax提交的數(shù)據(jù)
$request = $request->all();
dd($request);
我有點(diǎn)困惑，為什么我傳對(duì)象過(guò)去挨下，的到的卻是數(shù)組呢熔恢？還有，其實(shí)用不用
dataType:'json',的到的結(jié)果都是一樣的臭笆。但是此處使用了它叙淌，為什么傳遞的時(shí)候卻是傳遞JSON.stringify(datas)的到的結(jié)果圖的結(jié)果呢
- 如果我們想獲取
tr或者td的條數(shù)，可以這樣
var num = $("#example1 tbody tr").toArray(); //獲取總記錄條數(shù)
// alert(num.length);
第二段
我發(fā)現(xiàn)我不能使用
ajax請(qǐng)求去打印數(shù)據(jù)愁铺，因?yàn)榭刂破骼锩娴?code>excel是直接導(dǎo)出的一個(gè)結(jié)果鹰霍，就相當(dāng)于是返回給我我們數(shù)據(jù)。而ajax又不能接受處理文件這個(gè)數(shù)據(jù)帜讲。所以我此處用了post提交的方式
- 先來(lái)看一個(gè)一維的數(shù)組提交
var jsPost = function(action, values) {
var id = Math.random();
document.write('<form id="post' + id + '" name="post'+ id +'" action="' + action + '" method="post">');
for (var key in values) {
document.write('<input type="hidden" name="' + key + '" value="' + values[key] + '" />');
}
document.write('</form>');
document.getElementById('post' + id).submit();
}
jsPost('b.html', {
'username': 'zhangsan',
'password': '123'
});
我又將第一次的代碼做了修改
1.二維對(duì)象取值的時(shí)候衅谷，$(this).children("td").eq(1).text();這種方法不靈活，因?yàn)樗菍?xiě)死的似将。應(yīng)該再用each遍歷一次取值
2.對(duì)象遍歷使用for(var key in value),
3.post傳遞的時(shí)候获黔，要把行的個(gè)數(shù)傳遞過(guò)去，因?yàn)槲覀償?shù)組的形式傳遞的是一維數(shù)組在验，傳遞后還要拆分成二維數(shù)組打印
<script>
$(function(){
function excel(){
var datas = new Object();
$("#example1 tbody tr").each(function(i){
datas[i+1] = new Object();
$(this).children("td").each(function(j){
datas[i+1][j] = $(this).text();
});
});
datas[0] = new Object();
$("#example1 thead tr th").each(function(i){
datas[0][i] = $(this).text();
});
// 取出每一行的條數(shù)
var num = $("#example1 thead tr th").toArray().length;
var jsPost = function(action, v, num) {
var id = Math.random();
document.write('<form id="post' + id + '" name="post'+ id +'" action="' + action + '" method="post">');
document.write('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
document.write('<input type="hidden" name="num" value="'+num+'">');
// 此處遍歷可以根據(jù)文章頭部推薦的文章做修改玷氏，但我這里是用的自己的方式
for (var k in v) {
for(var key in v[k]){
document.write('<input type="hidden" name="' + k+'_'+key + '" value="' + v[k][key] + '" />');
}
}
document.write('</form>');
document.getElementById('post' + id).submit();
};
jsPost("{{ url('/excel') }}", datas, num);
}
</script>
- 控制器代碼
$num = $request->input('num'); //接收的是一維數(shù)組，需要拆分
$request = $request->except(['_token','num']);
//把一維數(shù)組拆分成二維
$datas = array_chunk($request,$num);
\Excel::create('Filename', function($excel)use($datas) {
$excel->sheet('Sheetname', function($sheet) use($datas) {
$sheet->fromArray($datas);
});
})->export('xls');
- 代碼
function excel(){
var datas = new Object();
$("#example1 tbody tr").each(function(i){
datas[i+1] = new Object();
$(this).children("td").each(function(j){
datas[i+1][j] = $(this).text();
});
});
datas[0] = new Object();
$("#example1 thead tr th").each(function(i){
datas[0][i] = $(this).text();
});
// 取出每一行的條數(shù)
var num = $("#example1 thead tr th").toArray().length;
// var token = $("input[name='_token']").val();
// console.log(token);
//取出打印頭
var head = $(".content-header h1").text();
var jsPost = function(action, v, num) {
var id = Math.random();
document.write('<form id="post' + id + '" name="post'+ id +'" action="' + action + '" method="post">');
// document.write('<input type="hidden" name="num" value="'+token+'">');
document.write('<input type="hidden" name="num" value="'+num+'">');
document.write('<input type="hidden" name="head" value="'+head+'">');
for (var k in v) {
for(var key in v[k]){
document.write('<input type="hidden" name="' + k+'_'+key + '" value="' + v[k][key] + '" />');
}
}
document.write('</form>');
document.getElementById('post' + id).submit();
};
jsPost('/excel', datas, num);
}
