Jquery 如何在javascript中迭代数组并以特定形式显示其内容?
我正在玩一个可以根据需要生成pdf文件的库。我可以直接在那里设置所有需要打印的内容,因为我可以选择适当的布局,所以我决定使用一张桌子 因此,该表的代码如下所示:Jquery 如何在javascript中迭代数组并以特定形式显示其内容?,jquery,pdfmake,Jquery,Pdfmake,我正在玩一个可以根据需要生成pdf文件的库。我可以直接在那里设置所有需要打印的内容,因为我可以选择适当的布局,所以我决定使用一张桌子 因此,该表的代码如下所示: table: { widths: ['*', '*', '*',200,'*', '*'], //setting up the dimension of each column body: [ [ 'No1.', 'No2', 'No3', 'No4', 'No5', 'No6'], //header of ea
table: {
widths: ['*', '*', '*',200,'*', '*'], //setting up the dimension of each column
body: [
[ 'No1.', 'No2', 'No3', 'No4', 'No5', 'No6'], //header of each column
[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row
[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc.
]
}
我之前有一个表格,里面有一个由ajax获取的数据:
client_data = JSON.parse(response);
当我发出警报(客户端数据)
时,我看到[对象对象],[对象对象],[对象对象对象]等等。每个对象都包含必要的数据,因此我可以执行以下操作:
var no1 = client_data.no1[0]
等等。
现在我想在主体内构建一个循环:[
,它将替换现有的虚拟行:
[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row
[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc.
来自客户机的数据
。我不知道如何从中迭代并获取适当的数据,您能帮我吗?我已经构建了一个简单的代码片段,其中包含一个用于填充表的循环。将其直接粘贴到,以便查看其实际效果
问候
var client_data, dataTable, i, item, len, rows;
client_data = [
{
prop01: 'row01.prop01',
prop02: 'row01.prop02',
prop03: 'row01.prop03',
prop04: 'row01.prop04',
prop05: 'row01.prop05',
prop06: 'row01.prop06'
}, {
prop01: 'row02.prop01',
prop02: 'row02.prop02',
prop03: 'row02.prop03',
prop04: 'row02.prop04',
prop05: 'row02.prop05',
prop06: 'row02.prop06'
}, {
prop01: 'row03.prop01',
prop02: 'row03.prop02',
prop03: 'row03.prop03',
prop04: 'row03.prop04',
prop05: 'row03.prop05',
prop06: 'row03.prop06'
}
];
dataTable = {
style: 'table',
table: {
widths: ['30%', '10%', '15%', '15%', '15%', '15%'],
headerRows: 1,
body: [
[
{
text: 'No1',
style: 'tableHeader'
}, {
text: 'No2',
style: 'tableHeader'
}, {
text: 'No3',
style: 'tableHeader'
}, {
text: 'No4',
style: 'tableHeader'
}, {
text: 'No5',
style: 'tableHeader'
}, {
text: 'No6',
style: 'tableHeader'
}
]
]
},
layout: {
hLineWidth: function(i, node) {
if (i === 0 || i === node.table.body.length) {
return 0;
} else if (i === node.table.headerRows) {
return 2;
} else {
return 1;
}
},
vLineWidth: function(i) {
return 0;
},
hLineColor: function(i) {
if (i === 1) {
return '#2361AE';
} else {
return '#84a9d6';
}
},
paddingLeft: function(i) {
if (i === 0) {
return 0;
} else {
return 8;
}
},
paddingRight: function(i, node) {
if (i === node.table.widths.length - 1) {
return 0;
} else {
return 8;
}
}
}
};
rows = dataTable.table.body;
i = 0;
len = client_data.length;
while (i < len) {
item = client_data[i];
rows.push([
item.prop01, {
text: item.prop02,
alignment: 'right'
}, {
text: item.prop03,
alignment: 'right'
}, {
text: item.prop04,
alignment: 'right'
}, {
text: item.prop05,
alignment: 'right'
}, {
text: item.prop06,
alignment: 'center'
}
]);
i++;
}
var dd = {
content: [],
styles: {
table: {
margin: [0, 5, 0, 15]
},
tableHeader: {
bold: true,
fontSize: 10,
color: '#2361AE'
}
},
defaultStyle: {
// alignment: 'justify'
}
}
dd.content.push(dataTable)
var客户机_数据、数据表、i、项、len、行;
客户端数据=[
{
prop01:'行01.prop01',
prop02:'行01.prop02',
prop03:'行01.prop03',
prop04:'行01.prop04',
prop05:'行01.prop05',
prop06:“行01.prop06”
}, {
prop01:'行02.prop01',
prop02:'行02.prop02',
prop03:'行02.prop03',
prop04:'行02.prop04',
prop05:'行02.prop05',
prop06:'行02.prop06'
}, {
prop01:'行03.prop01',
prop02:'行03.prop02',
prop03:'行03.prop03',
prop04:'行03.prop04',
prop05:'第03行。prop05',
prop06:'第03行。prop06'
}
];
数据表={
样式:'表格',
表:{
宽度:['30%,'10%,'15%,'15%,'15%,'15%,'15%,
校长:1,
正文:[
[
{
正文:“第1号”,
样式:“表格标题”
}, {
文字:‘第二号’,
样式:“表格标题”
}, {
文字:“第三号”,
样式:“表格标题”
}, {
文字:‘第四号’,
样式:“表格标题”
}, {
正文:“第5号”,
样式:“表格标题”
}, {
文字:‘第六号’,
样式:“表格标题”
}
]
]
},
布局:{
hLineWidth:函数(i,节点){
if(i==0 | | i==node.table.body.length){
返回0;
}else if(i==node.table.headerRows){
返回2;
}否则{
返回1;
}
},
vLineWidth:函数(i){
返回0;
},
hLineColor:函数(i){
如果(i==1){
返回“#2361AE”;
}否则{
返回“#84a9d6”;
}
},
paddingLeft:函数(i){
如果(i==0){
返回0;
}否则{
返回8;
}
},
paddingRight:函数(i,节点){
if(i==node.table.widths.length-1){
返回0;
}否则{
返回8;
}
}
}
};
行=dataTable.table.body;
i=0;
len=客户机数据长度;
而(我