2016-01-11 2 views
2

Я пытаюсь изменить значок сортировки моего заголовка таблицы, когда пользователь сортирует колонку, я в настоящее время у меня есть сортировать функции:Реагировать JS - значок изменения рода OnClick

var headerColumns = []; 
    var IconType = 'triangle'; 
    var IconSort = 'top'; 
    var onToggleOrder = this.props.onToggleOrder; 
    var sortColumn = this.props.sortColumn; 
    var sortOrder = this.props.sortOrder; 

    function bindContextOnClick(columnName){ 
     return function(){ 
      if(columnName === sortColumn) { 
       sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc'; 
       IconSort = (sortOrder === 'asc') ? 'top' : 'bottom'; 
      } else { 
       sortOrder = 'asc'; 
       IconSort = 'top'; 
      } 
      IconType = IconType + "-" + IconSort; 

      onToggleOrder(columnName, sortOrder); 
     }; 
    } 

Я тогда цикл через JSON который генерирует столбцы таблицы:

for (var i = 0; i < this.props.rowScheme.length; i = i + 1) { 
     // by default all visible columns are sortable, unless it has 'sortable'=false option 
     if(_.has(this.props.rowScheme[i],"sortable") && !this.props.rowScheme[i].sortable) { 
      headerColumns.push(<th key={_.uniqueId('edit_student_tbl_th_')}>{this.props.rowScheme[i].title}</th>); 
     } else { 
      console.log(IconType); 
      headerColumns.push(
       <th key={_.uniqueId('edit_student_tbl_th_')} 
        onClick={bindContextOnClick(this.props.rowScheme[i].column)}> 
        <span className="sortableColumn"> 
         {this.props.rowScheme[i].title} <Glyphicon glyph={IconType} /> 
        </span> 
       </th> 
      ); 
     } 
    } 

IconType содержит только текст triangle и не IconSort, верхний или нижний

ответ

Смежные вопросы