我在同一目录/文件夹中有两个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
});
};
}
答案 0 :(得分: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();