javascript - How to create a enhanced grid -
i new dojo. using 1.10 version. want create standalone example of enhanced grid.
i using below code has plugin filter in use.
<!doctype html> <html > <head> <style type="text/css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css"/> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="grid/enhanced/resources/enhancedgrid.css" media="screen"> <link rel="stylesheet" href="grid/enhanced/resources/enhancedgrid_rtl.css" /> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/clarogrid.css" /> /*grid need explicit width/height default*/ #grid { width: 45em; height: 20em; } </style> <script>dojoconfig = {parseonload: true}</script> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script> <script> dojo.require("dojox.grid.enhancedgrid"); dojo.require("dojo.data.itemfilewritestore"); dojo.require("dojox.grid.enhanced.plugins.filter"); dojo.ready(function(){ /*set data store*/ var data = { identifier: 'id', label: 'id', items: [] }; var data_list = [ {"heard": true, "checked": "true", "genre":"easy listening", "artist":"bette midler", "year":2003, "album":"bette midler sings rosemary clooney songbook", "name":"hey there", "length":"03:31", "track":4, "composer":"ross, jerry 1926-1956 -w adler, richard 1921-", "download date":"1923/4/9", "last played":"04:32:49"}, {"heard": true, "checked": "true", "genre":"classic rock", "artist":"jimi hendrix", "year":1993, "album":"are experienced", "name":"love or confusion", "length":"03:15", "track":4, "composer":"jimi hendrix", "download date":"1947/12/6", "last played":"03:47:49"}, {"heard": true, "checked": "true", "genre":"jazz", "artist":"andy narell", "year":1992, "album":"down road", "name":"sugar street", "length":"07:00", "track":8, "composer":"andy narell", "download date":"1906/3/22", "last played":"21:56:15"}, {"heard": true, "checked": "true", "genre":"progressive rock", "artist":"emerson, lake & palmer", "year":1992, "album":"the atlantic years", "name":"tarkus", "length":"20:40", "track":5, "composer":"greg lake/keith emerson", "download date":"1994/11/29", "last played":"03:25:19"}, {"heard": true, "checked": "true", "genre":"rock", "artist":"blood, sweat & tears", "year":1968, "album":"child father man", "name":"somethin' goin' on", "length":"08:00", "track":9, "composer":"", "download date":"1973/9/11", "last played":"19:49:41"}, {"heard": true, "checked": "true", "genre":"jazz", "artist":"andy narell", "year":1989, "album":"little secrets", "name":"armchair psychology", "length":"08:20", "track":5, "composer":"andy narell", "download date":"2010/4/15", "last played":"01:13:08"}, {"heard": true, "checked": "true", "genre":"easy listening", "artist":"frank sinatra", "year":1991, "album":"sinatra reprise: years", "name":"luck lady", "length":"05:16", "track":4, "composer":"f. loesser", "download date":"2035/4/12", "last played":"06:16:53"}, {"heard": true, "checked": "true", "genre":"progressive rock", "artist":"dixie dregs", "year":1977, "album":"free fall", "name":"sleep", "length":"01:58", "track":6, "composer":"steve morse", "download date":"2032/11/21", "last played":"08:23:26"}, {"heard": true, "checked": "true", "genre":"classic rock", "artist":"black sabbath", "year":2004, "album":"master of reality", "name":"sweet leaf", "length":"05:04", "track":1, "composer":"bill ward/geezer butler/ozzy osbourne/tony iommi", "download date":"2036/5/26", "last played":"22:10:19"}, {"heard": true, "checked": "true", "genre":"blues", "artist":"buddy guy", "year":1991, "album":"damn right, i've got blues", "name":"five long years", "length":"08:27", "track":3, "composer":"eddie boyd/john lee hooker", "download date":"1904/4/4", "last played":"18:28:08"}, {"heard": true, "checked": "true", "genre":"easy listening", "artist":"frank sinatra", "year":1991, "album":"sinatra reprise: years", "name":"the way tonight", "length":"03:23", "track":5, "composer":"d. fields/j. kern", "download date":"1902/10/12", "last played":"23:09:23"}, {"heard": true, "checked": "true", "genre":"world", "artist":"andy statman & david grisman", "year":1995, "album":"songs of our fathers", "name":"chassidic medley: adir hu / moshe emes", "length":"04:14", "track":2, "composer":"shlomo carlebach; trad.", "download date":"2035/2/9", "last played":"00:11:15"}, {"heard": true, "checked": "true", "genre":"classic rock", "artist":"jimi hendrix", "year":1968, "album":"electric ladyland", "name":"long hot summer night", "length":"03:27", "track":6, "composer":"jimi hendrix", "download date":"1902/4/7", "last played":"16:58:08"}, {"heard": true, "checked": "true", "genre":"progressive rock", "artist":"dixie dregs", "year":1978, "album":"what if", "name":"what if", "length":"05:02", "track":3, "composer":"steve morse", "download date":"1992/3/28", "last played":"00:22:30"} ]; var i, len; for(i=0, len = data_list.length; < len; ++i){ data.items.push(dojo.mixin({'id': + 1 }, data_list[i % len])); } var layout = [ { field: "id", datatype:"number"}, { field: "genre", datatype:"string"}, { field: "artist", datatype:"string", // declare need combobox suggestions (autocomplete default) autocomplete: true }, { field: "album", datatype:"string", // declare need combobox suggestions autocomplete: true, // configure combobox, not auto-complete our input datatypeargs: { autocomplete: false } }, { field: "name", datatype:"string", // declare not need following conditions column disabledconditions: ["contains", "notcontains"] }, { field: "track", datatype:"number"}, { field: "download date", datatype:"date", // declare how data in store should parsed date object. datatypeargs: { datepattern: "yyyy/m/d" } }, { field: "last played", datatype:"time", // declare how data in store should parsed date object. datatypeargs: { timepattern: "hh:mm:ss" } } ]; // in case you've close filter bar, here's way bring up. function showfilterbar(){ dijit.byid('grid').showfilterbar(true); } dojo.ready(function(){ var store = new dojo.data.itemfilewritestore({data: data}); var grid = new dojox.grid.enhancedgrid({ id: 'grid', store: store, structure: layout, plugins: { filter: { // show closefilterbarbutton @ filter bar closefilterbarbutton: true, // set maximum rule count 5 rulecount: 5, // set name of items itemsname: "songs" } } }); grid.placeat('gridcontainer'); grid.startup(); }); }); </script> </head> <body class="claro"> <div id="gridcontainer" style="width: 100%; height: 400px;"></div> <button onclick='showfilterbar()'>show filter bar</button> </body> </html> there 2 problem here
1) css not applying.
2) filter not working. if click on button error coming showfilterbar not defined.
i have copied code here here. not getting error. can please tell doing wrong.
Comments
Post a Comment