根据配置生成表格布局
表格配置
1 var fields = [ 2 [{rowspan : 2},{},{colspan : 1}], 3 [{},{}]6 ];
经过计算, 得出每个cell的位置坐标
1 [ 2 [ 3 { "rowspan": 2, "colspan": 1, "row": 0, "col": 0 }, 4 { "colspan": 2, "rowspan": 1, "row": 0, "col": 1 }, 5 { "rowspan": 2, "colspan": 1, "row": 0, "col": 3 } 6 ], 7 [ 8 { "rowspan": 1, "colspan": 1, "row": 1, "col": 1 }, 9 { "rowspan": 1, "colspan": 1, "row": 1, "col": 2 } 10 ] 11 ]
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Access-Control-Allow-Origin" content="*"> 6 <title>Title</title> 7 <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 8 <style> 9 10 #view{ 11 position:relative; 12 } 13 .cell { 14 position:absolute; 15 display:block; 16 margin:2px; 17 background-color:#33a45130; 18 border:1px solid #000; 19 box-sizing: border-box; 20 } 21 </style> 22 23 </head> 24 <body> 25 <div id="view"></div> 26 27 28 <script> 29 var random = function(x){ 30 return Math.floor(x * Math.random())+ 1 31 } 32 33 var fields = [ 34 //[{rowspan:2},{},{colspan:1}], 35 //[{rowspan:2,colspan:3},{},{rowspan:3}], 36 //[{colspan:2},{rowspan:1},{}], 37 //[{colspan:2},{rowspan:1},{}] 38 ]; 39 40 function randomFields(fields){ 41 for(let i=0;i<random(10);i++){ 42 let row = []; 43 for(let j=0;j<random(10);j++){ 44 row.push({rowspan:random(6), colspan:random(6)}) 45 } 46 fields.push(row) 47 } 48 return fields 49 } 50 51 //console.log(fields) 52 53 function generate(fields){ 54 // 55 calc(fields) 56 var $doms = [] 57 fields.forEach((x, r)=>{ 58 x.forEach((cell, c)=>{ 59 cell.row=cell.row || r 60 cell.col=cell.col || c 61 $doms.push(toCell(cell)) 62 }) 63 }) 64 return $doms 65 } 66 67 function calc(fields){ 68 // 69 var xy = []; 70 // 71 fields.forEach((x, r) => { 72 let tmp_c = 0 73 xy[r] = xy[r] || [] 74 x.forEach((cell, c) => { 75 // 76 cell.rowspan = cell.rowspan || 1 77 cell.colspan = cell.colspan || 1 78 cell.row = r 79 //安排位置 80 //在r行, 跳过已被占用的列 81 while(xy[r][tmp_c]) { 82 tmp_c++ 83 } 84 // 85 cell.col = tmp_c 86 //标记位置被占用 87 fillRect(xy, r, tmp_c, cell.rowspan, cell.colspan); 88 // 89 tmp_c+=cell.colspan 90 }) 91 }) 92 } 93 94 function fillRect(xy, row, col, rowspan, colspan){ 95 for(let i=0;i<rowspan;i++){ 96 xy[row+i] = xy[row+i] || [] 97 for(let j=0;j<colspan;j++){ 98 xy[row+i][col+j] = 1 99 } 100 } 101 } 102 103 function toCell(cell){ 104 var w = 20; 105 var margin = 2; 106 107 var $cell = $('<div />').addClass('cell'); 108 if(cell.rowspan > 1){ 109 $cell.attr('rowspan', cell.rowspan) 110 } 111 if(cell.colspan > 1){ 112 $cell.attr('colspan', cell.colspan) 113 } 114 $cell.css({ 115 width:cell.colspan * w + (cell.colspan -1 ) * margin, 116 height: cell.rowspan * w + (cell.rowspan -1 ) * margin, 117 left: cell.col*(w + margin), 118 top: cell.row *(w + margin) 119 }) 120 return $cell 121 } 122 123 function view(){ 124 let fields = [] 125 // 126 fields = randomFields(fields) 127 for(let i=0;i<10;i++){ 128 randomFields(fields) 129 } 130 let arr = generate(fields); 131 $('#view').append(arr) 132 return arr.length 133 } 134 135 let count = view(); 136 for(let i=0;i<10;i++){ 137 //count += view(); 138 } 139 140 console.log('count:', count); 141 142 </script> 143 </body> 144 145 </html>
