我正在使用带有大量行和列的制表符。垂直滚动在任何浏览器中都很慢，并且：在Chrome中，它非常生涩 - 即停下来移动，停下来移动。在Firefox中，它会闪烁 - 即全表视图闪烁白色 - 灰色，然后填充内容。我无法在屏幕截图中观看这种行为，但这是表承包商：
var table = new Tabulator("#report-table", {
ajaxURL:"getReportsFromDB.jsp", // ajax URL
ajaxParams:{'<%= DEVICE_ID_PARAM %>' : '<%= device_id %>',
'<%= DEVICE_ID_ARRAY_PARAM %>' : '<%= idArrayJSON %>',
'<%= DEVICE_NAME_PARAM %>' : '<%= device_name %>',
'<%= NUM_RECORDS_PARAM %>' : '<%= num_records %>',
'<%= WINDOW_NAME_PARAM %>' : '<%= window_name %>',
'<%= FROM_SELECT_REPORT_PARAM %>' : '<%= from_select_report %>',
'<%= START_DATE_PARAM %>' : '<%= start_date %>',
'<%= START_TIME_PARAM %>' : '<%= start_time %>',
'<%= STOP_DATE_PARAM %>' : '<%= stop_date %>',
'<%= STOP_TIME_PARAM %>' : '<%= stop_time %>',
'<%= NUM_WEEKS_PARAM %>' : '<%= num_weeks %>',
'<%= NUM_DAYS_PARAM %>' : '<%= num_days %>',
'<%= NUM_HOURS_PARAM %>' : '<%= num_hours %>',
'<%= EVENT_ARRAY_PARAM %>' : '<%= eventArrayJSON %>',
'<%= REPORTS_FROM_FILE_PARAM %>' : '<%= reports_from_file %>',
'<%= INSTALLER_PARAM %>' : '<%= installer %>',
'hiddenSelectDevice' : '<%= hiddenSelectDevice %>',
'<%= MODEL_PARAM %>' : '<%= device_model %>',
'<%= PREDEFINED_REPORT_INDEX_PARAM %>' : <%= predefined_report_index %>,
'first_report' : '<%= first_report %>',
'<%= ORDER_ID_PARAM %>' : '<%= order_id %>'}, //ajax parameters
ajaxResponse:function(url, params, response){
if (response.ERROR != null) {
var messageDiv = document.getElementById("messageModalBody");
messageDiv.innerHTML = "<p><mark class="red">" + response.ERROR + "</mark></p>";
message_modal.style.display = "block";
console.log("response = " + response.ERROR);
}
return response; //return the tableData property of a response json object
},
ajaxError:function(xhr, textStatus, errorThrown){
var messageDiv = document.getElementById("messageModalBody");
messageDiv.innerHTML = "<p><mark class="red">" + errorThrown + "</mark></p>";
message_modal.style.display = "block";
},
// height:"100%",
height:"800px",
layout:"fitDataFill", //"fitColumns",
selectable:true, //make rows selectable
selectableRangeMode:"click", // for multiple rows selection via shift button
//selectableRollingSelection:true, // enable rolling selection for rows (default)
selectablePersistence:true, // enable persistence of selection when view changes (Scroll) (default)
persistentLayout: true, // Enable layout persistence
persistentSort: true, // Enable sort persistence
persistentFilter:true, //Enable filter persistence
persistenceID:"examplePersistence",
persistenceMode:"cookie", //store persistence information in a cookie
tooltips:true,
progressiveRender: true,
progressiveRenderSize: 5,
progressiveRenderMargin: 100,
rowSelectionChanged:function(data, rows){
selectedRows = rows;
if ((rows !== undefined) && (rows !== null) && (rows.length > 0)) {
console.log("rowSelectionChanged: Selected " + rows.length + " rows");
}
},
columns:[
{title:"<%= COUNTER %>", field:"id", sortable:false, /*cellClick:counterClick,*/ tooltip:"Click for selecting row for map"},
{title:"<%= ID %>", field:"deviceID", sorter:"alphanum", width:"100", headerFilter:"input", cellClick:deviceIDClick, tooltip:"Click for further Device Options"},
{title:"<%= EVENT %>", field:"eventType", sorter:"alphanum", headerFilter:"input", tooltip:false},
{title:"<%= RECEIVE_TIME %>", field:"dateReceived", formatter:"datetime",
formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date", tooltip:false}, /*headerFilter:dateFilterEditor, headerFilterFunc:dateFilterFunction*/},
{title:"<%= SEQ %>", field:"sequenceNumStr", sorter:"number", headerFilter:"input", formatter:sqlNumberFormatter, tooltip:false},
{title:"<%= RTC_TIME %>", field:"dateRT", formatter:"datetime", formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date"}, tooltip:false},
{title:"<%= GPS_TIME %>", field:"dateGPS", formatter:gpsDateFormatter, tooltip:false},
{title:"<%= GPS_STATUS %>", field:"gpsStatus", sorter:"string", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
{title:"<%= LAT %>", field:"latitudeStr", sorter:"number", headerFilter:"input", formatter:latitudeFormatter, cellClick:latLonClick, tooltip:"Click for highlighting the corresponding marker on the Map"},
{title:"<%= LON %>", field:"longitudeStr", sorter:"number", headerFilter:"input", formatter:longitudeFormatter, cellClick:latLonClick, tooltip:"Click for highlighting the corresponding marker on the Map"},
{title:"<%= MAIN_V %>", field:"mainPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= AUX_V %>", field:"auxPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= BACKUP_V %>", field:"backupPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= CHARGING_V %>", field:"chargingPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= DEVICE_STATUS %>", field:"deviceStatusStr", sortable:false, tooltip:false},
{title:"<%= ALT %>", field:"altitudeStr", sorter:"number", headerFilter:"input", formatter:altitudeFormatter, tooltip:false},
{title:"<%= SPEED %>", field:"speedMPHStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
{title:"<%= HEADING %>", field:"headingStr", sorter:"number", headerFilter:"input", formatter:headingFormatter, tooltip:false},
{title:"<%= NUM_SATS %>", field:"numSatsStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
{title:"<%= HDOP %>", field:"hdopStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
{title:"<%= ODOMETER %>", field:"odometerMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ENG_HOURS %>", field:"engineHoursStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= FUEL_LEVEL %>", field:"fuelLevelPercentStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ODT_SINCE_MIL %>", field:"odtSinceMILMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ODT_SINCE_DTC_CLEAR %>", field:"odtSinceDTCClearMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_INFO %>", field:"accelerometerInfo", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ACC_X %>", field:"accelerometerXmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_Y %>", field:"accelerometerYmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_Z %>", field:"accelerometerZmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_CALIB_X %>", field:"accelerometerXCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_CALIB_Y %>", field:"accelerometerYCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ACC_CALIB_Z %>", field:"accelerometerZCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ORIENT_INFO %>", field:"orientInfo", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ORIENT_X %>", field:"orientXStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ORIENT_Y %>", field:"orientYStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= ORIENT_Z %>", field:"orientZStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= INTERN_TEMP %>", field:"internalTemperatureStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= AMBIENT_TEMP %>", field:"ambientTemperatureStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= RSSI %>", field:"RSSIStr", sorter:"number", headerFilter:"input", formatter:RSSIFormatter, tooltip:false},
{title:"<%= SERVICE_TYPE %>", field:"serviceType", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ROAMING %>", field:"roaming", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= COUNTRY %>", field:"country", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= NETWORK %>", field:"network", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= TOWER_ID %>", field:"towerID", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= CENTROID_LAT %>", field:"centroidLatStr", sorter:"number", headerFilter:"input", formatter:centroidLatFormatter, tooltip:false},
{title:"<%= CENTROID_LON %>", field:"centroidLonStr", sorter:"number", headerFilter:"input", formatter:centroidLonFormatter, tooltip:false},
{title:"<%= CELLULAT_BAND %>", field:"band", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= RXTXEC %>", field:"RxTxEc", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= VIN %>", field:"vinStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ENG_LIGHT %>", field:"engLightStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ENG_CODES %>", field:"engCodesStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= APP_VER %>", field:"appVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= OS_VER %>", field:"osVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= HW_VER %>", field:"hwVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= HW_REV %>", field:"hwRevisionStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= IO_VER %>", field:"ioVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= EXTENDER_VER %>", field:"extenderVersionStr", sorter:"string", headerFilter:"input"},
{title:"<%= CONFIG_CHANGED %>", field:"deviceConfigChangedStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= CONFIG %>", field:"deviceConfigStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= CONFIG_DESC %>", field:"configurationDescStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= CARGO_TIME %>", field:"cargoTimeStr", formatter:"datetime", formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date"}, tooltip:false},
{title:"<%= CARGO_INFO %>", field:"cargoSensorInfoStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_PORT_TYPE %>", field:"peripheralPortTypeStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_PORT_NUM %>", field:"peripheralPortNumStr", sorter:"number", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_DRIVER %>", field:"peripheralDriverStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_DESC %>", field:"peripheralDescStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_MODEL %>", field:"peripheralModelStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= PERIPH_REV %>", field:"peripheralRevStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= GPIO %>", field:"GPIOInfoStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= TFTP_STATUS %>", field:"TFTPStatusStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= LIGHT_SENTRY %>", field:"lightSentry", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ABS_INFO %>", field:"ABS", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= ABS_ODOMETER %>", field:"ABSOdometerStr", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= BRAKE_STROKE %>", field:"brakeStroke", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= DOOR %>", field:"door", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= CHASSIS_MATING %>", field:"chassisMating", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= TIRES %>", field:"tires", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= TIRES_INFLATOR %>", field:"tiresInflator", sorter:"string", headerFilter:"input", tooltip:false},
{title:"<%= TAG %>", field:"ACKRetriesNum", sorter:"number", headerFilter:"input", formatter:ACKFormatter, tooltip:"Number of device message send retries"},
{title:"<%= IP %>", field:"deviceIP", sorter:"string", headerFilter:"input", tooltip:deviceIPTooltip},
{title:"<%= RAW %>", field:"rawReport", sortable:false}
],
});我能做什么？
作为制表符4.8 （今天发布）您现在可以启用一个水平虚拟DOM来处理具有大量列的表：
var table = new Tabulator("#example-table", {
virtualDomHoz:true, //enable horizontal virtual DOM
});
有关如何使用该功能的完整详细信息，以及在水平虚拟DOM文档中找到500列的示例
我在37列x 7000行的数据表中遇到了相同的问题，只有字符串。我还没有（尚未）自定义格式化器，但使用多（3） - 级分组。
我使用的是最新的制表仪版本4.2和Chrome 72.0（64bit）。
我使用了Chrome Profiler：为了管理滚动条的大跳跃，需要超过2秒的时间才能完成大部分时间的渲染时间，以深入递归召集。
我尝试在数字字段上设置分组，但没有任何区别。