머리글 셀의 jQuery Bootgrid 조건부 아이콘

Question

조건이 충족되면 머리글 셀에 아이콘을 추가하고 싶습니다. 설명서에 따르면 dynamic placholders이 중요하다는 것을 알지만 직접 추가하는 방법에 대해서는 자세히 설명하지 않습니다.

내가 무엇을 시도했다

---

: 사용자 정의 필드를 추가, 포맷터에서 다음

templates: { 
    headerCell: '<th data-column-id="{{ctx.column.id}}">{{ctx.column.text}}{{ctx.column.myCustomIcon}}</th>', 
} 

:

내 자신의 템플릿을 정의.

formatters: { 
    myCustomField: function(column, row){ 

    column.myCustomIcon = ""; 

    if (item[column.id] == 0) { 
     return ""; 
    } 

    column.myCustomIcon = '<i class="fa fa-shield"></i>'; 
    } 
} 

일부 지침이 적용됩니다.

Answer 1

필자는 템플릿을 사용하지 않고이 작업을 수행하고 프로토 타입에 새 메서드를 만드는 작업을 관리했습니다.

그냥 (jquery.bootgrid.js) 자신의 라이브러리에이 방법을 추가 : 그들은 라인 주위에 var Grid = function(element, options)을 정의 후

Grid.prototype.recreateTableHeader = function() { 
    renderTableHeader.call(this); 
    return this; 
}; 

이것은 974

그런 다음에 있어야합니다, 당신이 할 수있는 그리드가로드 된 후이 메소드를 호출하십시오.

var columnNameChanged = false; 

var grid = $('#my-grid').bootgrid(/* your options here */); 

grid.on("loaded.rs.jquery.bootgrid", function() { 

    if (!columnNameChanged) { 

     columnNameChanged = true; 
     var columns = grid.bootgrid('getColumnSettings'); 
     var column = columns[1]; 
     column.text = '<i class="fa fa-shield"></i> ' + column.text; 

     grid.bootgrid('recreateTableHeader'); 
    } 

}); 

테이크 노트 열의 텍스트 속성을 변경하고 아이콘을 현재 column.text (HTML에 입력 한 텍스트가 들어 있음)과 연결합니다. 포맷터 내부 나 내 샘플처럼이 loaded 이벤트를 변경할 수 있지만 각 행마다 포맷터를 한 번 호출하고 아이콘 마크 업 후에 column.text을 추가하면 <i class="fa fa-shield"></i><i class="fa fa-shield"></i><i class="fa fa-shield"></i> Column Name과 같은 열 텍스트가 나타납니다.