The scripts in a jQWidgets project have dependencies to jQuery, jqxcore.js
and often other jQWidgets scripts. In this tutorial you will learn how to resolve
jQWidgets script dependencies with RequireJS. Before you proceed further, make sure
you are familiar with the basic jQWidgets
Integration with RequireJS tutorial. The example that will be showcased
here is based on the jqxGrid demo Spreadsheet.
As with the basic tutorial,
we will create a "project", consisting of an .html
page (index.html
)
and required CSS and JavaScript files (require.js
, jquery.js
,
the necessary jQWidgets scripts, main.js
and app.js
).
Here is the folder structure of our project:
index.html
Here is the code of the file index.html
:
<!DOCTYPE html><html lang="en"><head> <title>Example of Resolving jQWidgets Script Dependencies with RequireJS</title> <link rel="Stylesheet" href="css/jqx.base.css" type="text/css" /> <script type="text/javascript" data-main="js/main" src="js/require.js"></script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style='margin-top: 20px;'> <div style='float: left;'> <input type="button" value="Export to Excel" id='excelExport' /> </div> </div> </div></body></html>
The code includes a reference to the file require.js
, whose data-main
attribute points to main.js
and the required data-bound HTML structure.
More on main.js
in Step 3.
main.js
and app.js
Here is the code of the script main.js
:
require.config({ paths: { "jquery": "jquery", "jqxcore": "jqxcore", "jqxdata": "jqxdata", "jqxdata.export": "jqxdata.export", "jqxgrid": "jqxgrid", "jqxgrid.columnsresize": "jqxgrid.columnsresize", "jqxgrid.edit": "jqxgrid.edit", "jqxgrid.export": "jqxgrid.export", "jqxgrid.selection": "jqxgrid.selection", "jqxbuttons": "jqxbuttons", "jqxscrollbar": "jqxscrollbar", "jqxmenu": "jqxmenu" }, shim: { "jqxcore": { export: "$", deps: ["jquery"] }, "jqxdata": { export: "$", deps: ["jquery", "jqxcore"] }, "jqxdata.export": { export: "$", deps: ["jquery", "jqxcore", "jqxdata"] }, "jqxgrid": { export: "$", deps: ["jquery", "jqxcore", "jqxdata"] }, "jqxgrid.columnsresize": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] }, "jqxgrid.edit": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] }, "jqxgrid.export": { export: "$", deps: ["jquery", "jqxcore", "jqxdata.export", "jqxgrid"] }, "jqxgrid.selection": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] }, "jqxbuttons": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] }, "jqxscrollbar": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] }, "jqxmenu": { export: "$", deps: ["jquery", "jqxcore", "jqxgrid"] } }});require(["app"], function (App) { App.initialize();});
The shim
configuration object is essential for the correct loading
order of the scripts (modules). Each script in shim
has the the scripts
it depends on defined in the deps
array. The script main.js
also loads the application module (the web page functionality, located in app.js
):
And here is the code of app.js
:
define(["jquery", "jqxcore", "jqxdata", "jqxdata.export", "jqxgrid", "jqxgrid.columnsresize", "jqxgrid.edit", "jqxgrid.export", "jqxgrid.selection", "jqxbuttons", "jqxscrollbar", "jqxmenu"], function () { var initialize = function () { $(document).ready(function () { // renderer for grid cells. var numberrenderer = function (row, column, value) { return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>'; } // create Grid datafields and columns arrays. var datafields = []; var columns = []; for (var i = 0; i < 26; i++) { var text = String.fromCharCode(65 + i); if (i == 0) { var cssclass = 'jqx-widget-header'; columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer }; } datafields[datafields.length] = { name: text }; columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' }; } var source = { unboundmode: true, totalrecords: 100, datafields: datafields, updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, columnsresize: true, selectionmode: 'multiplecellsadvanced', columns: columns }); $("#excelExport").jqxButton(); $("#excelExport").click(function () { $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false); }); }); }; return { initialize: initialize };});
All jQWidgets scripts and jQuery should be included in an array, which is passed
as the first argument of the RequireJS define
function. The second
argument is a callback function. Its code is based on the aforementioned demo Spreadsheet.
You can download the complete example from here or check it online from here: Example of Resolving jQWidgets Script Dependencies with RequireJS.