search

tonytomov / jqGrid

jQuery grid plugin
www.trirand.com
2.84k stars 1.2k forks source link

Using jqGrid with ES6 import syntax #933

Open stagemteam opened 5 years ago

stagemteam commented 5 years ago

I installed jqGrid with next command npm install --save tonytomov/jqGrid#master. After that, I was trying to import jqGrid import jqGrid from 'jqGrid'; but it thrown an error Module not found: Can't resolve 'jqGrid'. This problem partially was fixed with add next import code

import '../../../../node_modules/jqGrid/css/ui.jqgrid.css';
import '../../../../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../../../../node_modules/jqGrid/js/i18n/grid.locale-en.js';

This imported jqGrid to my module but remove navGrid, navSeparatorAdd, navButtonAdd and etc. declared in jquery.jqGrid.js such as grid.locale-en.js use AMD 

if ( typeof define === "function" && define.amd ) {
    // AMD. Register as an anonymous module.
    define([
        "jquery",
        "../grid.base"
    ], factory );
} else {
    // Browser globals
    factory( jQuery );
}

When ../grid.base calling it override all with $.fn.jqGrid = function() { /* ... */} Change order of jquery.jqGrid.js and grid.locale-en.js has no an effect.

Is there a possibility to use jqGrid with ES6 syntax?

tonytomov commented 5 years ago

Hello,

This is a demo using AMD: http://guriddo.net/demo/guriddojs/integrations/amdsupport/index.html

In the main directory there is a file called jqGrid.js: https://github.com/tonytomov/jqGrid/blob/master/jqGrid.js

you may need to use them.

stagemteam commented 5 years ago

I've changed

//import '../../../../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../../../../node_modules/jqGrid/jqGrid.js';

but got next error in browser console

22:45:54.204
Error: "Cannot find module 'jqgrid/grid.base'"
    webpackMissingModule http://localhost:3000/static/js/38.chunk.js:105:45
    js http://localhost:3000/static/js/38.chunk.js:105:12
index.js:1452
22:45:54.381
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/addons/ui.multiselect' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.382
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.base' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.382
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.celledit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.common' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.filter' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.formedit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.384
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.grouping' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.384
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.import' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.385
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.inlinedit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.jqueryui' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.pivot' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.subgrid' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.treegrid' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.utils' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jqDnR' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.388
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jqModal' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.388
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jquery.fmatter' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
stagemteam commented 5 years ago

It would be great if anybody could simply use import jqGrid from 'jqGrid'; after npm install jqGrid.

tonytomov commented 5 years ago

Do you have correct config file : https://github.com/tonytomov/jqGrid/blob/master/config.js

stagemteam commented 5 years ago

Yes, it is correct. I've run jqGrid in pair with React but my solution is very bad. jqGrid isn't absolutely adapted to ES6 syntax and it causing many problems. For example, now I'm getting an error '$' is not defined no-undef when import jQuery UI Multiselect, though before that all worked correctly.