請原諒我的無知。我剛剛開始使用反應,我相信我錯過了一些非常簡單的東西。因此,根據我從loadData獲取的數據量,我需要在1 2或3列中顯示數據。我正在使用ul和li。我根據屏幕大小計算可以放入一列中的人數。我試圖讓他們都在一個UL,但我需要在頂部的標題行,所以我真的需要高達3 uls的第一個李有頭信息。我如何循環並創建我需要的uls數量?我試圖在迴歸週期中進行循環,但我無法做到這一點。任何幫助是極大的讚賞。需要方向通過數組遍歷
var appointmentBoardSection = React.createClass({
displayName: "appointmentBoardSection",
getInitialState: function() {
return {
key: null,
results: [],
parameters: this.props.parameters,
type: "",
};
},
shouldComponentUpdate: function(nextProps, nextState) {
console.info("this.state.key: " + this.state.key);
console.info("nextState.key: " + nextState.key);
if (this.state.key !== nextState.key) {
console.info("NO MATCH!!!!");
//this.forceUpdate();
return true;
}
return false;
},
componentDidMount: function() {
console.info("MOUNTED!!!");
var _this = this;
_this.loadData();
setInterval(function() {
_this.loadData();
}, 10000);
},
loadData: function() {
console.info("LOADING DATA....");
var _this = this;
$.when(_api.callPromise('apiRouter.ashx', 'getAppointmentsBoard', JSON.stringify(masterPage.reporting.parameters), this.props.type)).then(function(data) {
var totalData = data.args[0];
if (totalData.length <= 0) {
$("div#" + _this.props.type).hide();
} else {
$("#no_data").hide();
$("div#" + _this.props.type).show();
}
_this.setState({
results: totalData,
key: Math.random()
});
masterPage.hidePleaseWait(true);
});
},
render: function() {
var contHeight = $(window).height();
var offsetTop = $("div.appt_bd_container").offset().top;
var realEstate = contHeight - 400;
var perColumn = Math.round(realEstate/70);
console.info("height: " + $(window).height());
console.info("offsetTop: " + offsetTop);
console.info("perColumn: " + perColumn);
var maxICanShow = perColumn * 3;
var limitResults = false;
var colCount = 3;
var colDef = "";
var colWidth = 100;
var numberOfColsNeeded = Math.round(this.state.results.length/perColumn);
if (numberOfColsNeeded > 3) {
colCount = 3;
} else {
colCount = numberOfColsNeeded;
}
switch (colCount) {
case 2:
colWidth = 50;
break;
case 3:
colWidth = 33.333;
break;
default:
colDef = "";
colWidth = 100;
}
if (this.state.results.length > maxICanShow) {
var i = 1;
console.info("this.state.results.length: " + this.state.results.length);
console.info("maxICanShow: " + maxICanShow);
while (i < this.state.results.length - (maxICanShow - 1)) {
this.state.results.pop();
i++;
}
}
var curColData = [];
var overallCount = this.state.results.length;
var testArr = [];
for (var i = 0; i < colCount; i++) {
testArr.push({});
}
if (this.state.results.length > perColumn) {
for (var i = 0; i < perColumn; i++) {
if (overallCount > 0) {
curColData.push(this.state.results.shift());
overallCount--;
}
}
}
var myTest = [];
return (<
ul className = "appt_bd" >
<
li className = "appt_bd_header"
style = {
{
width: colWidth + '%'
}
} >
<
span className = "appt_bd_header_main" > {
this.props.title
} < /span> <
span className = "appt_bd_header_sub" > Appts Set < /span> <
span className = "appt_bd_header_sub" > Appts Show < /span> <
/li> {
curColData.map(function(row) {
return <AppointmentBoardRow colWidth = {
colWidth
}
key = {
row.userId
}
row = {
row
}
/>;
})
} <
/ul>
);
}
});
var AppointmentBoardRow = React.createClass({
render: function() {
var row = this.props.row;
return (<
li className = "appt_bd_row"
style = {
{
width: this.props.colWidth + '%'
}
}
key = {
row.userId
} >
<
span className = "appt_bd_desc" >
<
span className = "appt_bd_rank" > {
row.rank
} < /span> <
span className = "appt_bd_avatar_container" > < div className = {
row.className
} > < span className = "initials" > {
row.initials
} < /span></div > < /span> <
span className = "appt_bd_user" >
<
span className = "appt_bd_description_main" > {
row.userName
} < /span> <
span className = "appt_bd_description_sub" > {
row.role
} < /span> <
/span> <
/span> <
span className = "appt_bd_data" >
<
span className = "appt_bd_data_main" > {
row.apptsSetCount
} < /span> <
span className = "appt_bd_data_sub" > /{row.apptsSetGoal}</span >
<
/span> <
span className = "appt_bd_data" >
<
span className = "appt_bd_data_main" > {
row.apptsShowCount
} < /span> <
span className = "appt_bd_data_sub" > /{row.apptsShowGoal}</span >
<
/span> <
/li>
);
}
});
****編輯迴應喬希......我現在有一個問題是沒有顯示,雖然我可以驗證你是正確的。這裏是我的nee渲染:
render: function() {
var contHeight = $(window).height();
var offsetTop = $("div.appt_bd_container").offset().top;
var realEstate = contHeight - 400;
var perColumn = Math.round(realEstate/70);
var maxICanShow = perColumn * 3;
var colWidth = 100;
var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);
let li = "";
return (
<div>
{uls.map((lis) => {
<ul className="appt_bd">
<li className="appt_bd_header" style={{ width: colWidth + '%' }}>
<span className="appt_bd_header_main">{this.props.title}</span>
<span className="appt_bd_header_sub">Appts Set</span>
<span className="appt_bd_header_sub">Appts Show</span>
</li>
lis.map(li => {<li className="appt_bd_row" style={{ width: this.props.colWidth + '%' }} key={li.userId}>
<span className="appt_bd_desc">
<span className="appt_bd_rank">{li.rank}</span>
<span className="appt_bd_avatar_container"><div className={li.className}><span className="initials">{li.initials}</span></div></span>
<span className="appt_bd_user">
<span className="appt_bd_description_main">{li.userName}</span>
<span className="appt_bd_description_sub">{li.role}</span>
</span>
</span>
<span className="appt_bd_data">
<span className="appt_bd_data_main">{li.apptsSetCount}</span>
<span className="appt_bd_data_sub">/{li.apptsSetGoal}</span>
</span>
<span className="appt_bd_data">
<span className="appt_bd_data_main">{li.apptsShowCount}</span>
<span className="appt_bd_data_sub">/{li.apptsShowGoal}</span>
</span>
</li>})
</ul>
})}
</div>
);
}
這可能是在一個完全不同的方向,但你有沒有看過css'columns'屬性? –
我沒有,但我現在... – BigPoppa
所以是的,我可以做這樣的事情,但仍然有在每列的頂部獲得標題行的問題。 – BigPoppa