我在谷歌可視化表中有兩行，我想在排序后保持固定在頂部，然后再次繪制表。我正在使用：
var data = new google.visualization.DataTable();
var table1 = new google.visualization.Table(document.getElementById('my_div'));
var ascendOrDescend = true;
...
data.sort({column: colIndex, desc: ascendOrDescend});
ascendOrDescend = !ascendOrDescend;
table1.draw(data, options);
有沒有辦法修復這兩行或在排序后強制它們回到頂部？
uj5u.com熱心網友回復：
為了將一行固定在排序中的某個位置，
您需要手動控制排序順序。
要手動控制，請在繪制表格時設定以下選項。
var options = {
sort: 'event'
};
表的排序事件將提供用戶請求的列和方向
您可以將列和方向傳遞給資料表方法getSortedRows
，該方法將回傳滿足排序條件的行索引陣列
// table sort event
google.visualization.events.addListener(table, 'sort', function (sender) {
// get sorted rows indexes
var sortIndexes = data.getSortedRows({column: sender.column, desc: !sender.ascending});
我們可以通過將我們想要的行索引移動到頂部來操作行索引陣列
并創建一個資料視圖并使用該setRows方法來提供資料視圖應該出現的順序
var view = new google.visualization.DataView(data);
view.setRows(sortIndexes);
為了讓表格在正確的列上方顯示排序方向箭頭，我們設定了下表選項
options.sortAscending = sender.ascending;
options.sortColumn = sender.column;
然后使用新創建的資料視圖繪制表格
請參閱以下作業片段，每次排序后，
行'Michael'和'Elisa'將保留在頂部
google.charts.load('current', {
packages: ['corechart', 'table']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 1, 'Male', 12, 5],
['Elisa', 2, 'Female', 20, 7],
['Robert', 3, 'Male', 7, 3],
['John', 4, 'Male', 54, 2],
['Jessica', 5, 'Female', 22, 6],
['Aaron', 6, 'Male', 3, 1],
['Margareth', 7, 'Female', 42, 8],
['Miranda', 8, 'Female', 33, 6]
]);
var table = new google.visualization.Table(document.getElementById('table'));
var options = {
sort: 'event'
};
// table sort event
google.visualization.events.addListener(table, 'sort', function (sender) {
// get sorted rows indexes
var sortIndexes = data.getSortedRows({column: sender.column, desc: !sender.ascending});
// move values to top
moveToTop(sender, sortIndexes, 'Elisa');
moveToTop(sender, sortIndexes, 'Michael');
// set table sort arrow
options.sortAscending = sender.ascending;
options.sortColumn = sender.column;
// build table view with custom sort
var view = new google.visualization.DataView(data);
view.setRows(sortIndexes);
// draw table with view
table.draw(view, options);
});
// move value to top of sort
function moveToTop(sender, sortIndexes, value) {
// find value in current sort
var fixedRows = data.getFilteredRows([{
column: 0,
value: value
}]);
if (fixedRows.length > 0) {
// move value to top
sortIndexes.splice(sortIndexes.indexOf(fixedRows[0]), 1);
sortIndexes.unshift(fixedRows[0]);
}
}
// first draw
table.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427492.html
標籤：javascript 排序 图表 谷歌可视化
上一篇：按一列排序行，然后按IP地址列