ant design下運用js實現框選功能
由於同事離職，公司缺人，他的工作便交接到我的手裏了，我一個android開發者，以前也從來沒做過web端開發啊，沒辦法，領導交代的任務硬着頭皮也得接下來啊！拿到手上，做的第一個功能，便是存儲計劃，需要實現可按照天、周、月存儲，並且以鼠標圈選的形式實現，接下來附上自己的實現效果圖：
實現流程
本來拿到這個任務的時候，自己是想用Grid實現的，但是看到官網上面的一句話，直接打消了我的念頭，官網是這麼說的：
也就是說用Grid每一行最多顯示24個單元格，這個完全達不到我的要求，因爲我每行需要顯示25個單元格（每行的title+24小時），我決定還是自己用div畫吧。
1.先畫單元格
畫單元格分成第一行和剩餘的行兩種：
第一行組件我們定義爲ColumsTitle：
循環裏面的每一個div其實代表的是每一個單元格。
//標題列組件
const ColumsTitle = () => {
const colums = [];
for (let i = 0; i < 25; i++) {
if (i == 0) {
colums.push(<div key={i} className={styles["columns-title-border"]}></div>);
} else {
colums.push(<div key={i} className={styles["columns-border-none"]}>{i - 1}</div>);
}
}
return colums;
}
剩餘行組件，我們定義爲Colums:
//列組件
class Colums extends PureComponent {
render() {
const colums = [];
for (let i = 0; i < 25; i++) {
if (i == 0) {
colums.push(<div key={i} className={styles["columns-title-border"]}>{this.props.rowName}</div>);
} else {
colums.push(<div id={this.props.rowName + i} key={this.props.rowName + i} className={styles["columns-border"]} name="chooseDiv"></div>);
}
}
return colums;
}
}
最後一個就是整體上的組件了，我們叫做Rows：
// 行組件
const Rows = (props) => {
const rows = [];
var rowLength = 1;
var rowName = "";
if (props.saveType == "1") {
rowLength = 2;
} else if (props.saveType == "2") {
rowLength = 8;
} else if (props.saveType == "3") {
rowLength = 32;
}
for (let i = 0; i < rowLength; i++) {
rowName = formatRowName(props, i);
if (i == 0) {
rows.push(<Row key={i}>
<div className={styles["columns-title-out-margin"]}><ColumsTitle/></div>
</Row>);
} else {
rows.push(<Row key={i}>
<div className={styles["columns-title-out"]}><Colums saveType={props.saveType} rowName={rowName}/>
</div>
</Row>);
}
}
return rows;
};
我們渲染到SavePlan這個組件裏面：
export default class SavePlan extends PureComponent {
constructor(props) {
super(props);
this.state = {
saveType: "1"//1 按天存儲 2 按周存儲 3 按月存儲
}
}
handleRadioChange = e => {
this.setState({saveType: e.target.value});
};
onChange(value) {
console.log('changed', value);
}
render() {
return (
<PageHeaderWrapper>
<div>
<h1>存儲計劃</h1>
<div className={styles["title-row"]}>
<Radio.Group defaultValue="1" size="large" onChange={this.handleRadioChange}>
<Radio.Button value="1">天存儲</Radio.Button>
<Radio.Button value="2">周存儲</Radio.Button>
<Radio.Button value="3">月存儲</Radio.Button>
</Radio.Group>
<div className={styles["right-div"]}>
存儲週期：<InputNumber min={1} max={10} defaultValue={3} onChange={this.onChange}/>（天）
<div className={styles["title-row"]}>
<Button type="primary" className={styles.btn}>確定</Button>
<Button className={styles.btn}>取消</Button>
</div>
</div>
</div>
<Rows saveType={this.state.saveType}>
</Rows>
</div>
</PageHeaderWrapper>
);
}
}
到這一步，我們在頁面其實已經可以看到整個佈局了，但是還沒有添加鼠標事件，還沒有圈選功能，接下來我們看鼠標事件。
2.鼠標事件
我們這裏主要用到了鼠標的三個事件：onmousedown、onmousemove、onmouseup。
我們首先設定可選的單元格，標題設定爲不可選：
-webkit-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
-moz-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
-ms-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
思路就是：獲取鼠標按下時的座標，並判斷是否在可選區域內，若在那麼就添加一個div（也就是我們的圈選框），圖解如下：
- 獲取可選單元格數組
//可選單元格
var fileNodes = document.getElementsByName("chooseDiv");
- 獲取鼠標點擊位置的座標
var evt = window.event||arguments[0];
//加上滾動距離
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var startX =evt.pageX || evt.clientX + scrollX;
var startY =evt.pageY || evt.clientY + scrollY;
- 判斷可選框座標範圍
//判斷鼠標點擊的點是否在可選框內部，主要是判斷第一個可選框的左上角座標和最後一個圈選框的右下角座標
if ((startX >= firstDivOffsetLeft && startY >= firstDivOffsetTop) && (startX <= lastDivOffsetLeft && startY <= lastDivOffsetTop))
- 判斷鼠標點擊在哪一個單元格里面,並獲取該單元格左上角座標
//判斷鼠標點擊的點在哪一個div裏面，然後更改圈選框的左上角座標爲該div的左上角座標
for (var i = 0; i < fileNodes.length; i++) {
if ((startX >= getOffsetLeft(fileNodes[i]) && startX <= getOffsetLeft(fileNodes[i]) + fileNodes[i].offsetWidth) && (startY >= getOffsetTop(fileNodes[i]) && startY <= getOffsetTop(fileNodes[i]) + fileNodes[i].offsetHeight)) {
console.log("在內部");
startX = getOffsetLeft(fileNodes[i]);
startY = getOffsetTop(fileNodes[i]);
break;
} else {
console.log("不在內部");
}
}
- 創建圈選框，並更改圈選框的左上角座標爲該單元格的左上角座標
//創建選擇框
selDiv = document.createElement("div");
selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
selDiv.id = "selectDiv";
document.body.appendChild(selDiv);
selDiv.style.left = startX + "px";
selDiv.style.top = startY + "px";
- 鼠標移動過程中，改變圈選框的寬高；
evt = window.event || arguments[0];
if (isSelect) {
if (selDiv.style.display == "none") {
selDiv.style.display = "";
}
//加上鼠標滾動距離
var _scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var _scrollY = document.documentElement.scrollTop || document.body.scrollTop;
_x = evt.pageX || evt.clientX + _scrollX;
_y = evt.pageY || evt.clientY + _scrollY;
selDiv.style.left = Math.min(_x, startX) + "px";
selDiv.style.top = Math.min(_y, startY) + "px";
selDiv.style.width = Math.abs(_x - startX) + "px";
selDiv.style.height = Math.abs(_y - startY) + "px";
- 鼠標擡起的時候，計算被圈選的單元格並更改樣式；
var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
for (var i = 0; i < selList.length; i++) {
var sl = selList[i].offsetWidth + getOffsetLeft(selList[i]);
var st = selList[i].offsetHeight + getOffsetTop(selList[i]);
if (sl > _l && st > _t && getOffsetLeft(selList[i]) < _l + _w && getOffsetTop(selList[i]) < _t + _h) {
if (selList[i].className.indexOf("seled") == -1) {
selList[i].className = styles["columns-borderseled"];
}
else {
selList[i].className = styles["columns-border"];
}
}
}
- 其他工具方法
const getOffsetLeft = function (obj) {
var tmp = obj.offsetLeft;
var node = obj.offsetParent;
while (node != null) {
tmp += node.offsetLeft;
node = node.offsetParent;
}
return tmp;
}
const getOffsetTop = function (obj) {
var tmp = obj.offsetTop;
var node = obj.offsetParent;
while (node != null) {
tmp += node.offsetTop;
node = node.offsetParent;
}
return tmp;
}
