javascript - 如何在 Oracle JET ojTable 中选择一行？

Question

在 oracle jet quick basic example 中，我在 dashboard.htm 中有这个表:

 <table id="table" data-bind="ojComponent: {component: 'ojTable', 
                                            data: dataSource,

                                            columns: [
                                                     {headerText: 'Task number', field: 'number'},
                                                     {headerText: 'Task title', field: 'title'},
                                                     {headerText: 'Task priority', field: 'priority'},
                                                     {headerText: 'Assigned Date', field: 'assignedDate'},
                                                     {headerText: 'Creator Name', field: 'creatorName'},
                                                     {headerText: 'From User Name', field: 'fromUserName'},
                                                     {headerText: 'Created Date', field: 'createdDate'},
                                                     {headerText: 'Process Name', field: 'processName'},
                                                     {headerTemplate: 'oracle_link_hdr',template: 'oracle_link'}],
                                                      rootAttributes: {'style':'width: 100%;'}}">

                            </table>

我想要的是，当我选择一行时，会出现所选行的 number 警报。这是我在 dashboard.js 文件中的内容:

define(['ojs/ojcore', 'knockout','jquery','ojs/ojknockout', 
'ojs/ojarraytabledatasource',  
'ojs/ojoffcanvas','ojs/ojtable'],  
 function (oj, ko,$) {  

function DashboardViewModel() {  
        var self = this;  
        self.data = ko.observableArray();  
        $.ajax({  
            'global': false,  
            'url': "aaaa",  
            'dataType': "json",  
            'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
            'success': function (taches) {  
                $.each(taches.tasks, function () {  
                    self.data.push({  
                        title: this.title,  
                        number: this.number,  
                        priority: this.priority,  
                        assignedDate: this.assignedDate,  
                        creatorName: this.creatorName,  
                        fromUserName: this.fromUserName,  
                        createdDate: this.createdDate,  
                        processName: this.processName,  
                        link: this.href  

                    });  
                });  

            }  
        });  


        self.dataSource = new oj.ArrayTableDataSource(  
            self.data,   
            {idAttribute: 'number'}  
        );  


        $('#table').on("ojbeforecurrentrow", currentRowListener);  


    }  



    function taskFlow (url)  
        {  
            var myjson = null;  
            $.ajax({  
                'async': false,  
                'global': false,  
                'url': url,  
                'dataType': "json",  
                'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
                'success': function (data) {myjson = data.detailsURL.href;}  
            });  
            return myjson;  
        };  


        function currentRowListener (event, data)  
        {  

            if (data['option'] == 'selection')  
        {  
            var selectionObj = data['value'];  


            var i = 0;  
            for (i = 0; i < selectionObj.length; i++)  
            {  
                var range = selectionObj[i];  


                var startKey = range.startKey;  




                if (startKey != null && startKey.row != null)  
                {  
                    alert (startKey.row );  
                    $("a[href^='aaaa']")  
                    .each(function()  
                        {   
                             this.href = this.href.replace('aaaa',   
                              taskFlow("aaaa/"+startKey.row));  
                        });  
                };                
            }        
        }  
        };  



  return new DashboardViewModel();  
}  
 );  

我找到了这个blog但是我应该向 main.js 添加一些东西还是什么？有关更多信息，这是文件的样子:

感谢您的帮助。

Answer 1

这是 html 和 js 数据模型的示例。请尝试。

HTML

<table id="table" summary="Department List" aria-label="Departments Table"
       data-bind="ojComponent: {component: 'ojTable', 
                                data: datasource, 
                                selectionMode: {row: 'single', column: 'multiple'}, 
                                columns: [{headerText: 'Department Id', 
                                           field: 'DepartmentId', 
                                           id: 'column1'},
                                          {headerText: 'Department Name', 
                                           field: 'DepartmentName', 
                                           id: 'column2'},
                                          {headerText: 'Location Id', 
                                           field: 'LocationId', 
                                           id: 'column3'},
                                          {headerText: 'Manager Id', 
                                           field: 'ManagerId', 
                                           id: 'column4'}]}">
</table>
<br><br>

JS

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
function(oj, ko, $)
{   
  function viewModel()
  {
    var self = this;
    var deptArray = [{DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 556, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
    self.datasource = new oj.ArrayTableDataSource(deptArray, {idAttribute: 'DepartmentId'});
  }
  var vm = new viewModel;

  $(document).ready
  (
    function()
    {
      ko.applyBindings(vm, document.getElementById('table'));
      $('#table').on('ojoptionchange', currentSelection);
    }
  );


    function currentSelection()
    {   
        var selectionObj = $("#table").ojTable("option", "selection");
        var selectionTxt = "";

        //console.log(selectionObj[0].startKey.row);
        alert(selectionObj[0].startKey.row);
    };
}); 

如果有用，请告诉我。