// 数据
const viewdata = {
showmodel: "saledetailtable",
modelcode: "saledetailtable",
tablist: [
{
width: '80',
key: 'all', // 必须和当前显示的数据键相同 例如：dataall
title: '全部(40)'
},
{
width: '50',
key: 'one', // 例如：dataone
title: '红色'
},
{
width: '50',
key: 'two',
title: '绿色'
},
{
width: '50',
key: 'three',
title: '黑色'
},
{
width: '50',
key: 'four',
title: '白色'
},
],
// 每一列的宽和标题
widthlist: [
{width: '100', title: "<p >规格</p>"},
{width: '70', title: '销量'},
{width: '90', title: '库存'},
{width: '90', title: "<div>已补<i class='fa fa-address-book' style='color: #FF3E3E; margin-left: 5px'></i></div>"},
{width: '90', title: '订货'},
{width: '50', title: '在途'},
{width: '50', title: '占用'},
],
// 固定列表头
left_header_all: [
{width: '100', title: "<p >规格</p>"},
{width: '70', title: '销量'},
],
// 固定列内容
left_body_all: [
{
code: '1',
list: [
{ linkurl: '1', value: "<div style='color: #0486FE'>红色/S</div>" },
{ linkurl: '', value: '<p >100</p>' },
]
},
{
code: '2',
list: [
{ linkurl: '', value: '红色/S2'},
{ linkurl: '', value: '<p >100</p>' },
]
},
{
code: '3',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
]
},
{
code: '4',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
]
},
{
code: '5',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
]
},
],
dataall: [
{
code: '1',
list: [
{ linkurl: '1', value: "<div style='color: #0486FE'>红色/S</div>" },
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
},
{
code: '2',
list: [
{ linkurl: '', value: '红色/S2'},
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
},
{
code: '3',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
},
{
code: '4',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
},
{
code: '5',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
}
],
// 以下tab 红色 的数据
dataone: [
{
code: '1',
list: [
{ linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
{ linkurl: '', value: '<p >100</p>' },
{ linkurl: '', value: '300'},
{ linkurl: '', value: '200'},
{ linkurl: '', value: '400'},
{ linkurl: '', value: '300'},
{ linkurl: '',value: '500'}
]
}
],
left_header_one: [
{width: '100', title: "<p >规格</p>"},
{width: '70', title: '销量'},
],
left_body_one: [
{
code: '1',
list: [
{ linkurl: '', value: '红色/S2'},
{ linkurl: '', value: '<p >100</p>' },
]
},
],
}
let datalist = [];
let left_header_data = [];
let left_body_data = [];
if(viewdata["data"+stateData.rowsaledetailtableflag] != undefined) {
datalist = viewdata["data"+stateData.rowsaledetailtableflag]
left_header_data = viewdata["left_header_"+stateData.rowsaledetailtableflag]
left_body_data = viewdata["left_body_"+stateData.rowsaledetailtableflag]
}
let tablist = viewdata.tablist || [];
let widthlist = viewdata.widthlist || [];
function thWidth(val, defauleWidth) {
if(val == '' || val == undefined || val == '0') {
return defauleWidth;
}else {
return val + 'px';
}
}
// 获取屏幕的宽度
let allWidth = window.innerWidth;
if(viewdata != null || viewdata != undefined) {
let num = 0;
widthlist.map(item => {
num += parseInt(item.width);
})
let all_width = num;
if(all_width <= window.innerWidth) {
allWidth = window.innerWidth
}else {
allWidth = all_width;
}
}
setTimeout(() => {
if(document.getElementById('pubhead'+stateData.rowsaledetailtableflag) != null) {
// 获取表头高度
let he = document.getElementById('pubhead'+stateData.rowsaledetailtableflag).offsetHeight;
// 获取表头宽度
let wid = document.getElementById('pubhead1'+stateData.rowsaledetailtableflag).scrollWidth;
// 获取内容body内容的高度
let body_height = document.getElementById("bodyBox"+stateData.rowsaledetailtableflag).offsetHeight;
let body_content = document.getElementById("bodyBox"+stateData.rowsaledetailtableflag);
// 固定列的内容高度
let left_body = document.getElementById("pobodyBox"+stateData.rowsaledetailtableflag);
// 如果内容高度<300, box的高度 = 表头高度 + body内容的高度，反之最大不能超过300
// 如果内容高度>300, body内容的高度 = 300 - 表头高度
if(body_height < 300) {
document.getElementById('box'+stateData.rowsaledetailtableflag).style.height = (he + body_height) + 'px'
body_content.style.height=body_height+'px';
left_body.style.height=body_height+'px';
}else {
document.getElementById('box'+stateData.rowsaledetailtableflag).style.height = '300px'
body_content.style.height=(300-he)+'px';
left_body.style.height=(300-he)+'px';
}
// body内容的宽度 = 表头的宽度
body_content.style.width=wid+'px';
body_content.style.marginTop=he+'px';
body_content.style.overflowY='scroll';
body_content.style.overflowX='hidden';
// 定位表格
document.getElementById('positionHeadertr').style.height = he-4 + 'px';
left_body.style.marginTop=he+'px';
left_body.style.overflowY='scroll';
left_body.style.overflowX='hidden';
}
}, 200)
// 点击每个单元格跳转
function currentTrRow(it) {
if(it.linkurl != '') {
console.log('准备跳转了')
}
}
// 滚动的height
function leftScroll(ty) {
let left_scroll = document.getElementById('pobodyBox'+stateData.rowsaledetailtableflag);
let right_scroll = document.getElementById('bodyBox'+stateData.rowsaledetailtableflag);
if(ty == 'left') {
right_scroll.scrollTop = left_scroll.scrollTop;
}else {
left_scroll.scrollTop = right_scroll.scrollTop;
}
}
// 获取固定列的宽
let pos_width = 0;
if(left_header_data.length != 0) {
left_header_data.map(item => {
pos_width += parseInt(item.width)
})
}
function showDiv(data) {
let showView = <div id={'box'+stateData.rowsaledetailtableflag} style={{position: 'relative'}}>
<div className={styles.tableBox} >
<table className={styles.tableHead} id={'pubhead'+stateData.rowsaledetailtableflag} style={{width: allWidth + 'px'}}>
{
widthlist.map((it, wthind) => {
let defauleWidth = window.innerWidth / widthlist.length;
return <colgroup key={wthind}>
<col width={thWidth(it.width, defauleWidth)} />
</colgroup>
})
}
<thead id={'pubhead1'+stateData.rowsaledetailtableflag}>
<tr>
{
widthlist.map((item, ind) => {
return <th key={ind}>
<div style={{display: 'inline-block'}} dangerouslySetInnerHTML={{__html:item.title}}></div>
{/* {
item.imgflag == '1'
? <img src={require('../../assets/huocar.png')} style={{height:12, marginLeft: '10px'}} />
: null
} */}
</th>
})
}
</tr>
</thead>
</table>
<div className={styles.tableBodyBox} id={'bodyBox'+stateData.rowsaledetailtableflag} onScroll={leftScroll.bind(this, 'right')}>
<table className={styles.tableBody} style={{margin: 0, padding: 0}}>
{
widthlist.map((it, wthind) => {
let defauleWidth = window.innerWidth / widthlist.length;
return <colgroup key={wthind}>
<col width={thWidth(it.width, defauleWidth)} />
</colgroup>
})
}
<tbody>
{
datalist.map((item, trind) => {
return <tr key={trind} >
{
item.list.map((it, tdind) => {
return <td key={tdind} onClick={ it.linkurl != '' ? currentTrRow.bind(this, it) : ''}>
<div style={{height: '100%', wordWrap:"break-word", }} dangerouslySetInnerHTML={{__html:it.value}}></div>
</td>
})
}
</tr>
})
}
</tbody>
</table>
</div>
</div>
<div className={styles.tableBox} style={{position: 'absolute', left: 0, top: 0, width: (pos_width+6)+'px', boxShadow: '1px 0px 5px #EAEAEA'}}>
<table className={styles.tableHead}>
{
left_header_data.map((it, wthind) => {
return <colgroup key={wthind}>
<col width={it.width} />
</colgroup>
})
}
<thead >
<tr id={'positionHeadertr'}>
{
left_header_data.map((item, ind) => {
return <th key={ind}>
<div style={{display: 'inline-block', width: '100%'}} dangerouslySetInnerHTML={{__html:item.title}}></div>
{/* {
item.imgflag == '1'
? <img src={require('../../assets/huocar.png')} style={{height:12, marginLeft: '10px'}} />
: null
} */}
</th>
})
}
</tr>
</thead>
</table>
<div className={styles.tableBodyBox} id={'pobodyBox'+stateData.rowsaledetailtableflag} onScroll={leftScroll.bind(this, 'left')}>
<table className={styles.tableBody} style={{margin: 0, padding: 0}}>
{
left_header_data.map((it, wthind) => {
return <colgroup key={wthind}>
<col width={it.width} />
</colgroup>
})
}
<tbody>
{
left_body_data.map((item, trind) => {
return <tr key={trind} >
{
item.list.map((it, tdind) => {
return <td key={tdind} onClick={currentTrRow.bind(this, it)}>
<div style={{height: '100%', wordWrap:"break-word", }} dangerouslySetInnerHTML={{__html:it.value}}></div>
</td>
})
}
</tr>
})
}
</tbody>
</table>
</div>
</div>
</div>
return showView;
}
// 展示的html部分
<div>
{
showDiv(datalist)
}
</div>
