在onclick事件

Question

我在同一目录/文件夹中有两个javscript文件f1.js和f2.js，它们是Web应用程序的一部分。 f1负责显示 具有多个行和列的jqxdatagrid。

我的目标：

我基本上试图找出一种方法来在用户点击jqxdatagrid的一行时调用函数f2。与抓取行数据相关的所有逻辑都在此行f1.js

内的$("#dataDocumentPanel").on('rowclick',function(event){中定义

我的尝试：

我正在看这篇文章Call variables from one javascript file to another所以我宣布了var SUBTYPE

将初始化mySubtype。

为了访问上述值，我在f2.js

中执行了以下操作

var forf1 = new Object;

alert(forf1.mySubtype);

所以，在做任何事情之前，我想通过提醒检查我是否在mySubtype中获得f2.js的价值。

如果我错了，请纠正我，但原因是因为f2.js中的警报不起作用是因为我觉得我需要调用f2文件 当用户点击jqxdatagrid的特定行时。我的意思是需要在这一行$("#dataDocumentPanel").on('rowclick',function(event){上发生一些事情？

以下是我的两个javascript文件：

f1.js

function f1() {

    var self = this;


    this.urlKey = "showIDNumber";

    this.getData = function (IDNumber_) {

        //Some code related to ajax reques
        .done(function (data_, textStatus_, jqXHR_) {

             self.processdataDocuments(data_.data_document_list);
          })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code here
        });
    };


    // Initialize the page
    this.initialize = function () {

        self.getData(IDNumber);
    };



    this.processdataDocuments = function (collection_) {
        var source =
        {
           localdata: collection_,
           datatype: "array"
         };
     var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
     $("#dataDocumentPanel").jqxGrid(
            // some code here to populate jqxgrid
             });
      // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
      //    http://www.jqwidgets.com/getting-the-clicked-grid-row/           

      $("#dataDocumentPanel").on('rowclick',function(event){

           var row = event.args.rowindex;

           var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
           var jsonStringify = JSON.stringify(datarow,null,10);
           alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
           var obj = jQuery.parseJSON(response);
           //alert("display Subtype "+obj.nc_subtype)  // Works fine

           var SUBTYPE = {

             mySubtype : obj.nc_subtype
          };


         });

    };
};

f2.js

function f2() {


     var self = this;

     var forf1 = new Object;

    alert(forf1.mySubtype); // Trying to display obj.nc_subtype value from f1

     this.getData = function (IDNumber_) {

        // some code will be here      

        var ajaxRequest = jQuery.ajax({
            // some code will be here
        })
        .done(function (data_, textStatus_, jqXHR_) {
            // some code will be here
         })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code will be here
        });
    };

}

Answer 1

来自Properties of Javascript function objects

你可以将f1变成一个类（F1，因为类是大写的）

var F1 = (function() {
    var cls = function() { }

    var self = cls.prototype;

    self.foo = "Foo";
    self.bar = funciton() { ... },
    ...

    return cls;
})();

从那里开始，只要您在HTML页面中引用f1和f2，就可以使用

创建F1对象

var f1 = new F1();

然后只需执行

即可访问其属性

f1.property

并指定

f1.property = ...

设置mySubType的{​​{1}}，而不是

f1

DO

var SUBTYPE = {
    mySubtype : obj.nc_subtype
};

将分配self.mySubtype = ... 。

以下是将f1.mySubtype和f1转换为类（f2和F1）的示例代码段，其中F2个对象创建了F2对象并访问其F1。在演示中，我将mySubtype设置为字符串F1.mySubtype，并创建了Foo，因此当代码段运行时，它应该打印“Foo”;但是，在真正的程序中，这两件事应该被删除：

f2

//f1.js ---

var F1 = (function() {
    var cls = function() { }

    var self = cls.prototype;
  
    self.urlKey = "showIDNumber";

    self.getData = function (IDNumber_) {

        //Some code related to ajax reques
        this.done(function (data_, textStatus_, jqXHR_) {

             self.processdataDocuments(data_.data_document_list);
        });
        this.fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code here
        });
    };

    // Initialize the page
    self.initialize = function () {

        self.getData(IDNumber);
    };

    self.processdataDocuments = function (collection_) {
        var source =
        {
           localdata: collection_,
           datatype: "array"
         };
     var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
      $("#dataDocumentPanel").jqxGrid({
            // some code here to populate jqxgrid
      });
      // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
      //    http://www.jqwidgets.com/getting-the-clicked-grid-row/           

      $("#dataDocumentPanel").on('rowclick',function(event){

           var row = event.args.rowindex;

           var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
           var jsonStringify = JSON.stringify(datarow,null,10);
           alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
           var obj = jQuery.parseJSON(response);
           //alert("display Subtype "+obj.nc_subtype)  // Works fine
        
           self.mySubtype = obj.nc_subtype;
         });

    };
  
    //I added this line for the demo to show 'f2' accessing this property from 'f1'. You should remove it if copying this code into your application
    self.mySubtype = "Foo";

    return cls;
})();

var f1 = new F1();

//f2.js ---

var F2 = (function() {
     var cls = function() { }

     var self = cls.prototype;

     alert(f1.mySubtype);

     self.getData = function (IDNumber_) {

        // some code will be here      

        var ajaxRequest = jQuery.ajax({
            // some code will be here
        })
        .done(function (data_, textStatus_, jqXHR_) {
            // some code will be here
         })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code will be here
        });
    };

    return cls;
})();

var f2 = new F2();