学生列表排序功能

public/react/src/modules/courses/members/studentsList.js

@@ -7,7 +7,7 @@ import CourseLayoutcomponent from '../common/CourseLayoutComponent'
 
 import Titlesearchsection from '../common/titleSearch/TitleSearchSection'
 import ColorCountText from '../common/titleSearch/ColorCountText'
-import { WordsBtn, trigger, on, off, getUrl, downloadFile } from 'educoder'
+import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections } from 'educoder'
 import Modals from "../../modals/Modals";
 import axios from 'axios'
 import _ from 'lodash'
@@ -17,8 +17,9 @@ import CreateGroupByImportModal from './modal/CreateGroupByImportModal'
 
 const Search =Input.Search;
 
-const buildColumns = (that) => {
+const buildColumns = (that,isParent) => {
-  const { course_groups } = that.state
+  const { course_groups , sortedInfo } = that.state
+  let showSorter = isParent==true
   const columns=[{
     title: '序号',
     dataIndex: 'id',
@@ -59,6 +60,9 @@ const buildColumns = (that) => {
     align:'center',
     width:"10%",
     className:"color-grey-6",
+    sorter: true,
+    sortDirections: sortDirections,
+    sortOrder: sortedInfo.columnKey === 'student_id' && sortedInfo.order,
     render: (student_id, record) => {
       return <span className="color-dark overflowHidden1 " title={student_id && student_id.length > 10 ? student_id : ''}
           style={{maxWidth: '160px'}} >{student_id}</span>
@@ -71,7 +75,10 @@ const buildColumns = (that) => {
       key: 'course_group_name',
       align:'center',
       width:"40%",
-      className:"color-grey-6"
+      className:"color-grey-6",
+      sorter:showSorter,
+      sortDirections: sortDirections,
+      sortOrder: sortedInfo.columnKey === 'course_group_name' && sortedInfo.order,
     })
   }
   const isAdminOrStudent = that.props.isAdminOrStudent()
@@ -124,6 +131,7 @@ class studentsList extends Component{
       isSpin:false,
       DownloadType:false,
       DownloadMessageval:undefined,
+      sortedInfo: {order:'ascend',columnKey: 'student_id'}
     }
   }
 /// 确认是否下载
@@ -319,8 +327,19 @@ class studentsList extends Component{
       this.setState({ page: argPage })
     }
     let page = argPage || this.state.page
-    let { order, searchValue }=this.state
+    let { searchValue , sortedInfo }=this.state
-    let url=`/courses/${id}/students.json?order=${order}&page=${page}&limit=20&course_group_id=${course_group_id}`;
+    let order = 1;
+    if (sortedInfo.columnKey == 'student_id') {
+      order = 1;
+    } else if (sortedInfo.columnKey == 'course_group_name') {
+      order = 2;
+    }
+    let sort = 'desc';
+    if (sortedInfo.order == 'ascend') {
+      sort = 'asc'
+    }
+
+    let url=`/courses/${id}/students.json?order=${order}&sort=${sort}&page=${page}&limit=20&course_group_id=${course_group_id}`;
     if(!!searchValue){
       url+='&search='+searchValue;
     }
@@ -494,6 +513,15 @@ class studentsList extends Component{
       this.props.showNotification('复制成功')
   }
 
+  onTableChange = (pagination, filters, sorter) =>{
+    this.setState({
+      sortedInfo: sorter,
+    }, () => {
+      this.fetchAll();
+    });
+  }
+
+
   render(){
     const isAdmin = this.props.isAdmin()
     const isSuperAdmin = this.props.isSuperAdmin()
@@ -653,7 +681,7 @@ class studentsList extends Component{
               {isAdmin && <Checkbox className="fl" onChange={this.onCheckAll} checked={checkAllValue} >已选 {checkBoxValues.length} 个</Checkbox>}
               <div className="studentList_operation_ul">
                 {isAdmin && <li className="li_line"><a href="javascript:void(0)" className="color-grey-9" onClick={this.onDelete}>删除</a></li>}
-                {isAdmin && <li className="li_line drop_down">
+                {isAdmin && <li className="drop_down">
                   移动到...<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                   <ul className="drop_down_menu" style={{"right":"0px","left":"unset", minWidth: '160px', maxHeight: '324px', overflowY: 'auto'}}>
                     {
@@ -687,7 +715,7 @@ class studentsList extends Component{
                   </ul>
                 </li>}
                 
-                <li className="drop_down">
+                {/* <li className="drop_down">
                   {currentOrderName}
                   { course_groups && !!course_groups.length && 
                   <React.Fragment>
@@ -698,13 +726,13 @@ class studentsList extends Component{
                   </ul>
                   </React.Fragment>
                    }
-                </li>
+                </li> */}
               </div>
             </div>
             <Spin size="large" spinning={this.state.isSpin}>
             <div className="clearfix stu_table">
               {!this.state.isSpin && <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>       
-                <Table columns={buildColumns(this)} dataSource={students} pagination={false}></Table>
+                <Table columns={buildColumns(this,isParent)} dataSource={students} onChange={this.onTableChange} pagination={false}></Table>
               </Checkbox.Group> }
             </div>
             </Spin>