antd Checkbox多选框实现点选排序

最新推荐文章于 2023-10-23 15:44:26 发布

原创最新推荐文章于 2023-10-23 15:44:26 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

11 篇文章

订阅专栏

博客展示了排序逻辑的代码实现效果，包含相关代码及排序逻辑内容，聚焦于信息技术领域的排序功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

在这里插入图片描述
展示代码如下：

import { Row, Col, Badge,  Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
...

<Col span={6} style={{ margin: '8px 0' }}>
    <Badge count={this.state.sort_reply} style={{ backgroundColor: '#52c41a' }}>
            <Checkbox pids={func_detail_user['trees'][6].pids} value={func_detail_user['trees'][6].id}>{func_detail_user['trees'][6].name}</Checkbox>
     </Badge>
 </Col>
 <Col span={6} style={{ margin: '8px 0' }}>
      <Badge count={this.state.sort_reject} style={{ backgroundColor: '#52c41a' }}>
             <Checkbox pids={func_detail_user['trees'][7].pids} value={func_detail_user['trees'][7].id}>{func_detail_user['trees'][7].name}</Checkbox>
      </Badge>
 </Col>

排序逻辑：

//arr 传入的checkedList数组
getNewSortArr = (arr) => {
	//已知要排序的id组成数组
    let sortArr = [{id: 234, sort: -1}, {id: 235, sort: -1}, {id: 509, sort: -1}, {id: 510, sort: -1}, {id: 511, sort: -1}];
    sortArr.forEach(item => item.sort = arr.indexOf(item.id));
    return sortArr.filter(item => item.sort != -1);
}
//返回顺序
sortNumber = (id, arr) => {
    for(let i = 0; i < arr.length; i++) {
        if(arr[i].id == id) {
            return i + 1;
        }
    }
    return 0;
}
//冒泡排序
bubbleSort = (arr) => {
    let temp;
    for(let i = 0; i < arr.length - 1; i++) {
        for(let j = 0; j < arr.length-i-1; j++) {
            if(arr[j].sort > arr[j+1].sort) {
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}
	//点击checbox 项 在CheckboxGroup的onChange函数内写以下代码：
	let newSortArr = this.getNewSortArr(checkedList);
    let sorts = this.bubbleSort(newSortArr);
    let sort_appeal = this.sortNumber(234, sorts);
    let sort_reply = this.sortNumber(235, sorts);
    let sort_reject = this.sortNumber(509, sorts);
    let sort_query = this.sortNumber(510, sorts);
    let sort_pass = this.sortNumber(511, sorts);
    this.setState({
        sort_appeal,
        sort_reply,
        sort_reject,
        sort_query,
        sort_pass
    });