Buildv1.7.150
FancyGrid-JavaScriptgridlibrarywithchartsintegrationandservercommunication.
InstallbowerbowerinstallfancygridnpmnpminstallfancygridCDNhttps://cdn.fancygrid.com/fancy.min.jshttps://cdn.fancygrid.com/fancy.min.cssQuickStartIncludeareferencetotheFancyGridlibrary
<linkhref="https://cdn.fancygrid.com/fancy.min.css"rel="stylesheet"><scriptsrc="https://cdn.fancygrid.com/fancy.min.js"></script>TheFancyGridobjectisnowaccessible.Happygriding!
<divid="grid"></div><script>document.addEventListener("DOMContentLoaded",function(){newFancyGrid({renderTo:'grid',width:300,height:200,data:[{name:'Nick',age:30},{name:'Fred',age:25},{name:'Mike',age:35}],columns:[{index:'name',title:'Name',type:'string'},{type:'number',index:'age',title:'Age'}]});});</script>LoadFancyGridasaCommonJSmoduleFancyGridisusinganUMDmodulepattern,asaresultithassupportforCommonJS.ThefollowingexamplepresumesyouareusingnpmtoinstallFancyGridovernpm/bower.
//LoadFancyGridvarFancy=require('fancygrid');//GeneratethegridnewFancy.Grid({//config});//GeneratetheformnewFancy.Form({//config});//GeneratethetabsnewFancy.Tab({//config});LoadFancyGridasanES6moduleSinceFancyGridsupportsCommonJS,itcanbeloadedasanES6modulewiththeuseoftranspilers.TwocommontranspilersareBabelandTypeScript.ThesehavedifferentinterpretationsofaCommonJSmodule,whichaffectsyoursyntax.ThefollowingexamplespresumesyouareusingnpmtoinstallFancyGrid.
BabelimportFancyfrom'fancygrid';//GeneratethegridFancy.Grid({//config});//GeneratetheformnewFancy.Form({//config});//GeneratethetabsnewFancy.Tab({//config});TypeScriptimport*asFancyfrom'fancygrid';//GeneratethegridFancy.Grid({//config});//GeneratetheformnewFancy.Form({//config});//GeneratethetabsnewFancy.Tab({//config});PackageDirectoryThepackageincludesthefollowing:
|README.md├──client│├──fancy.full.min.js│├──fancy.min.js│├──fancy.min.css│├──modules├──src│├──js│├──less│...DebugIncaseyouwanttodebugFancyGridthereareseveralapproaches.
DebugfilesIncludecssfile/client/fancy.cssIncludejsfile/src/js/load-all.jsAfterthatset
Fancy.MODULESLOAD=false;DebugfullbuildIncludecssfile/client/fancy.cssIncludejsfile/src/js/fancy.full.js
Debugwithauto-loadingmodulesIncludecssfile/client/fancy.cssIncludejsfile/src/js/fancy.jsSetmodulespath
Fancy.MODULESDIR='/client/modules/';Fancy.DEBUG=true;CustombuildDebugbuildgruntdebugReleasebuildgruntreleaseSupportIfyouneedanyassistanceorwouldliketoreportanybugsfoundinFancyGrid,pleasecontactusatsupport@fancygrid.com
评论