渲染/表加载后选择行

时间:2019-04-30 02:14:28

标签: tabulator

一旦数据或表格已被渲染/加载,我就试图在Tabulator表中选择一行。我并不特别在意使用哪个回调,但是当用户导航到此页面时,表应该加载预定的记录(我将其解析为参数)。

回调本身可以很好地工作,因为我可以显示JS警报,但是我仍然无法在Tabulator中选择一行。

DATA DX_CODES (KEEP = ID DX1 DX2 DX3 DX4 DX5 DX6 DX7 DX8 DX9 DX10 DX11);
                                    SET LIB.&SAS_FILE_N;    
                                        WHERE DX1 IN ('123', '1234', '12345', '123456') OR
                                        DX2 IN ('123', '1234', '12345', '123456') OR
                                        DX3 IN ('123', '1234', '12345', '123456') OR 
                                        DX4 IN ('123', '1234', '12345', '123456') OR
                                        DX5 IN ('123', '1234', '12345', '123456') OR
                                        DX6 IN ('123', '1234', '12345', '123456') OR
                                        DX7 IN ('123', '1234', '12345', '123456') OR
                                        DX8 IN ('123', '1234', '12345', '123456') OR
                                        DX9 IN ('123', '1234', '12345', '123456') OR
                                        DX10 IN ('123', '1234', '12345', '123456') OR
                                        DX11 IN ('123', '1234', '12345', '123456');
                                    RUN;

我希望页面一旦加载,就选择了我定义为//create Tabulator on DOM element with id "example-table" var table = new Tabulator( "#example-table", { height: (window.innerHeight), // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically headerFilterPlaceholder: '', //default place holder text for filters selectable: 1, //allows row within table to be selected and have selected state (not to be confused with row click function), can be set to have multiple selected (integer), true or false data: [ **DATA1** ], //assign data to table dataTree: true, dataTreeStartExpanded: true, dataTreeBranchElement: false, //adds or removes right angle leading from parent to child dataTreeChildIndent: 25, //changes the indent padding dataTreeCollapseElement: !1, dataTreeStartExpanded: !0, //changes whether or not the entire table begins expanded dataTreeCollapseElement: "<span>▼ </span>", dataTreeExpandElement: "<span>► </span>", layout: "fitColumns", //fit columns to width of table (optional) columns: [ **COLUMN1** ], rowClick:function(e, row) //triggered when the row is clicked { var scriptParam = **SCRIPTPARAM1**; var rowId = row.getData().id; var fieldName = **FIELDNAME1**; var theList = [scriptParam, rowId, fieldName]; var doThis = "fmp://$/**FILE**?script=**SCRIPT1**&param=" + theList; window.location.href = doThis; }, rowDblClick:function(e, row) //triggered when the row is double clicked { table.selectRow(**ROWID**); }, rowContext:function(e, row) //triggered when the row is right clicked { alert('right click'); e.preventDefault(); //overrides the browsers native right click function }, cellEdited: function(cell) { var parameter = 1.1; var distribute = cell.getColumn().getDefinition().distribute; var id = cell.getData().id; var table = cell.getColumn().getDefinition().fmTable; var field = cell.getColumn().getDefinition().fmTable + "::" + cell.getColumn().getDefinition().fmField; var table = cell.getColumn().getDefinition().fmTable; var scriptBefore = cell.getColumn().getDefinition().script_before; var scriptAfter = cell.getColumn().getDefinition().script_after; var value = cell.getValue(); var theList = [parameter, distribute, id, table, field, value]; var doThis = "fmp://$/**FileName**?script=**ScriptName**&param=" + theList; window.location.href = doThis; }, rowFormatter: function(row) { var rowColor = row.getData().color row.getElement().style.backgroundColor = rowColor; }, renderComplete:function() { table.selectRow(**ROWID**); } } ); (对于我的测试是ID 1)的行。仅供参考,双击功能(无论单击哪行)都按预期执行,选择正确的行。

为此,我希望(有时)选择数据树的子行,例如:

**ROWID**

1 个答案:

答案 0 :(得分:0)

  

table.selectRow( ROWID );在表初始化之前您将无法工作   必须这样做。selectRow

选中此jsfiddle

{{1}}