Excel의 Data Bars Conditional Formatting option처럼 jQuery DataTables 테이블의 선택된 열의 값 뒤에 데이터 막대를 추가하려고합니다.jQuery DataTable에 Excel 스타일 데이터 막대를 그리는 방법은 무엇입니까?
This answer은 jqGrid를 사용하여 이러한 종류의 작업을 수행하는 방법을 보여줍니다. DataTables에서 비슷한 효과를 얻으려면 어떻게해야합니까?
이 아주 쉽게 할 경우, fnRowCallback를 사용하여().
필자는 샘플 코드를 직접 작성하지 않았지만 fnRowCallback에 datatables.net 예제를 사용하면 데이터 값을 사용하여 적절한 너비의 div를 만들 수 있다고 말하는 것으로 충분합니다. 현실 세계 테스트없이 함께 해킹 해 보도록하겠습니다.
렌더링 된 HTML의 표시 데이터가 동일한 열 (즉, 숨겨진 열이 없음)이라고 가정합니다. 의 컬럼이 ADATA의 값 백분율을 나타내는도 4의 (원점 0에서)하고 있다는 것을 더 가정하자 : 수퍼 간단한 예이다
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
var myValue = aData[4];
$('td:eq(4)', nRow).html('<div class="excelBar" style="width:' + myValue + '"></div>');
return nRow;
},
한다. 그것이하는 일은 현재 행의 열 4에있는 값을 가져 오는 것입니다 (변환하려면 여기에서 더 많은 논리를 수행 할 수 있으며, 이미 백분율로 표시되어 있다고 가정합니다). 렌더링 된 HTML에서 열 4의 html을 수정하여 div는 이미 발견 된 값과 동일한 너비입니다. 수정 후, 행의 새 값 (즉, 다시 형식화 된 행)을 리턴합니다.
더 많은 정보가 있습니다. 이미 CSS (bar : 표시 : 블록 등)가 될 수 있도록 CSS가 있어야합니다. 길지만 짧습니다.
무엇 fnRender 방법 like this를 사용하려고하지만, 대신에이 같은 스타일 사업부를 추가에 대한 :
fnRender: function (object) {
return "<div style=width: "+obj.data[0]+"%; />"
}
새로운 대답을 말씀 드릴 수 없습니다. 상자 밖으로
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
var myValue = aData[4];
$('td:eq(4)', nRow).html('<div class="excelBar" style="width:' + myValue + 'px"></div>');
return nRow;
},
Databar 작품 :
$("table").dataTable({}, $("table").databar());