Javascript 如何在Oracle表格中选择行？

在oracle jet quick basic示例中，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>

我想要的是，当我选择一行时，会显示所选行数的警报。这是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();  
}  
 );  

define（['ojs/ojcore'、'knockout'、'jquery'、'ojs/ojknockout'，
“ojs/OjarayTableDataSource”，
“ojs/ojoffcanvas”、“ojs/ojtable”]，
函数（oj，ko，$）{
函数DashboardViewModel（）{
var self=这个；
self.data=ko.observearray（）；
$.ajax（{
“全局”：错误，
“url”：“aaaa”，
“数据类型”：“json”，
'beforeSend'：函数（xhr）{xhr.setRequestHeader（“授权”、“基本”+btoa（“aaaa:aaaa”）；}，
“成功”：功能（环节）{
$.each（taches.tasks，function（）{
self.data.push（{
标题：这个，
号码：这个号码，
优先权：这个优先权，
转让日期：这个，转让日期，
creatorName:this.creatorName，
fromUserName:this.fromUserName，
createdDate:this.createdDate，
processName:this.processName，
链接：this.href
});  
});  
}  
});  
self.dataSource=新的oj.ArrayTableDataSource（
自我数据，
{idAttribute:'number'}
);  
$（'#table'）。on（“ojbeforecurrentrow”，currentRowListener）；
}  
函数任务流（url）
{  
var myjson=null；
$.ajax（{
“异步”：false，
“全局”：错误，
“url”：url，
“数据类型”：“json”，
'beforeSend'：函数（xhr）{xhr.setRequestHeader（“授权”、“基本”+btoa（“aaaa:aaaa”）；}，
“成功”：函数（数据）{myjson=data.detailsURL.href；}
});  
返回myjson；
};  
函数currentRowListener（事件、数据）
{  
如果（数据['option']=='selection'）
{  
var selectionObj=数据['value']；
var i=0；
对于（i=0；i

我发现了这个，但不起作用。我应该在main.js中添加一些东西吗？ 有关详细信息，请参见文件的外观：

---

感谢您的帮助。

这是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>

如果有用的话，请告诉我。

Ameur

将Om提供的HTML放入应用程序的视图中。ie.dashboard.html

从Om的解决方案中获取viewmodel的“内容”，并将其放入dashboard.js（或您正在使用的任何viewmodel）中

然后使用Om在$document.ready调用中的ojoptionchange处理程序行，并将其放置在应位于dashboard.js模板中的HandleBinding应用生命周期方法中

最后，在define块中，在参数末尾添加对这两个模块的引用：

“ojs/ojtable”、“ojs/OjarayTableDataSource”

---

保存view和viewModel，让我们知道它的外观。

我可以实现它，但需要一些时间进行测试。。想知道你是否真的需要帮助吗？当然，非常感谢@om Saoplese看到我的答案。如果有帮助，请接受答案，这样其他人可能会受益，我们可以结束问题。这是一个需要的例子，但我寻找的是在定义区，你可以在这里找到问题的确切描述伟大！！指那不能解决我的问题。如果您可以看一看oracle jet quick basic示例并尝试一下，您就会理解这个问题，链接不可访问OK，不用担心。那么现在你的问题已经解决了，或者你正在努力解决什么具体问题呢？我应该补充一点，Om的答案是正确的，这只是一个让它适合ojModule（AMD模块）方法的问题，而不是一个HTML和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);
    };
});