推荐一个网站，建议大家去看看怎样快速而优雅地遍历 JavaScript 数组
第一段
场景：
php将数据取出便利到模版后，自己用js取出模版的数据，组装成json格式提交到一个控制器。比如代码如下：
<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>
- 取出数据的代码
// 取出标题部分
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);
//// 组装标题和内容
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);
}
})
注意事项：
1。数组和对象使用介绍：数组和对象要预定义。而且一次预定义只能定义一维数组。
所以我们如果需要使用二维数组，就可以在内部再定义一个数组，然后赋值给外层数组。
2.数组或对象的使用选择：JSON.stringify(datas);是将对象转换成json格式。此处其实使用new Array;也可以取出数据。但是我们还是用对象比较符合需求
3.打印：数组活着对象的时候，我们打印可以使用console.log(datas),但是使用documen.write(datas)是不能打印数组对象的。我们如果打印具体某个值，使用这两种方式都可以
ajax请求处理
- 在控制器里面打印
ajax提交的数据
$request = $request->all();
dd($request);
直接传递datas，控制器的到的数据
传递`JSON.stringify(datas)`的到的结果
把表单头部尾部都组装请求打印后结果
我有点困惑，为什么我传对象过去，的到的却是数组呢？还有，其实用不用
dataType:'json',的到的结果都是一样的。但是此处使用了它，为什么传递的时候却是传递JSON.stringify(datas)的到的结果图的结果呢
- 如果我们想获取
tr或者td的条数，可以这样
var num = $("#example1 tbody tr").toArray(); //获取总记录条数
// alert(num.length);
第二段
我发现我不能使用
ajax请求去打印数据，因为控制器里面的excel是直接导出的一个结果，就相当于是返回给我我们数据。而ajax又不能接受处理文件这个数据。所以我此处用了post提交的方式
- 先来看一个一维的数组提交
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.二维对象取值的时候，$(this).children("td").eq(1).text();这种方法不灵活，因为它是写死的。应该再用each遍历一次取值
2.对象遍历使用for(var key in value),
3.post传递的时候，要把行的个数传递过去，因为我们数组的形式传递的是一维数组，传递后还要拆分成二维数组打印
<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();
});
// 取出每一行的条数
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+'">');
// 此处遍历可以根据文章头部推荐的文章做修改，但我这里是用的自己的方式
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'); //接收的是一维数组，需要拆分
$request = $request->except(['_token','num']);
//把一维数组拆分成二维
$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();
});
// 取出每一行的条数
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);
}
