123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- window.addEvent('domready',function(){
- Mif.Tree.Node.implement({
-
- switchSelect: function(state){
- this.tree[state ? 'select' : 'unselect'](this);
- }
-
- });
- tree = new Mif.Tree({
- id: 'tree1',
- container: $('tree_container'),// tree container
- initialize: function(){
- this.initCheckbox('simple');
- var storage = new Mif.Tree.CookieStorage(this);
- var switchStorage = new Mif.Tree.CookieStorage(this, {event: 'switch', action: 'switch'});
- var selectStorage = new Mif.Tree.CookieStorage(this, {event: 'selectChange', action: 'switchSelect'});
- this.addEvent('load', function(){
- storage.restore();
- switchStorage.restore();
- selectStorage.restore();
- }).addEvent('loadChildren', function(){
- storage.restore();
- switchStorage.restore();
- selectStorage.restore();
- });
- },
- types: {// node types
- folder: {
- openIcon: 'mif-tree-open-icon',//css class open icon
- closeIcon: 'mif-tree-close-icon'// css class close icon
- }
- },
- dfltType: 'folder',//default node type
- height: 18//node height
- });
-
- tree2 = new Mif.Tree({
- id: 'tree2',
- container: $('tree_container2'),// tree container
- initialize: function(){
- this.initCheckbox('simple');
- var storage = new Mif.Tree.CookieStorage(this);
- var switchStorage = new Mif.Tree.CookieStorage(this, {event: 'switch', action: 'switch'});
- var selectStorage = new Mif.Tree.CookieStorage(this, {event: 'selectChange', action: 'switchSelect'});
- this.addEvent('load', function(){
- storage.restore();
- switchStorage.restore();
- selectStorage.restore();
- }).addEvent('loadChildren', function(){
- storage.restore();
- switchStorage.restore();
- selectStorage.restore();
- });
- },
- types: {// node types
- folder: {
- openIcon: 'mif-tree-open-icon',//css class open icon
- closeIcon: 'mif-tree-close-icon'// css class close icon
- }
- },
- dfltType: 'folder',//default node type
- height: 18//node height
- });
-
- var children = [
- {
- "property": {
- "name": "cnode1",
- "id": "cnode1"
- }
- },
- {
- "property": {
- "name": "cnode2",
- "id": "cnode2"
- },
- "children": [
- {
- "property":{
- "name": "cnodeX",
- "id": "cnodeXXXX"
- }
- },
- {
- "property":{
- "name": "cnodeY",
- "id": "cnodeY"
- },
- "children":[
- {
- "property":{
- "name": "cnodeZ",
- "id": "cnodeZ"
- }
- },
- {
- "property":{
- "name": "cnodeL",
- "id": "cnodeL"
- }
- }
- ]
- }
- ]
- },
- {
- "property":{
- "name": "cnode3",
- "id": "cnode3"
- }
- }
- ];
- var json = [
- {
- "property": {
- "name": "root",
- "id": "root"
- },
- "children": [
- {
- "property": {
- "name": "node1",
- "id": "node1"
- }
- },
- {
- "property": {
- "name": "node2",
- "id": "node2"
- },
- "children":[
- {
- "property": {
- "name": "node2.1",
- "id": "node2.1"
- }
- },
- {
- "property": {
- "name": "node2.2",
- "id": "node2.2"
- },
- "children":[
- {
- "property": {
- "name": "node2.2.1",
- "id": "node2.2.1"
- }
- },
- {
- "property": {
- "name": "node2.2.2",
- "id": "node2.2.2"
- }
- }
- ]
- }
- ]
- },
- {
- "property": {
- "name": "node4",
- "id": "node4"
- },
- "children": [
- {
- "property":{
- "name": "nodeX",
- "id": "nodeXXXX"
- }
- },
- {
- "property":{
- "name": "nodeY",
- "id": "nodeY"
- }
- }
- ]
- },
- {
- "property": {
- "name": "node3 loadable",
- "id": "node3",
- "loadable": true,
- "loadOptions": {"json": children}
- }
- }
- ]
- }
- ];
-
- var json2 = [
- {
- "property": {
- "name": "root",
- "id": "root_2"
- },
- "children": [
- {
- "property": {
- "name": "node1",
- "id": "node1_2"
- }
- },
- {
- "property": {
- "name": "node2",
- "id": "node2_2"
- },
- "children":[
- {
- "property": {
- "name": "node2.1",
- "id": "node2.1_2"
- }
- },
- {
- "property": {
- "name": "node2.2",
- "id": "node2.2_2"
- },
- "children":[
- {
- "property": {
- "name": "node2.2.1",
- "id": "node2.2.1_2"
- }
- },
- {
- "property": {
- "name": "node2.2.2",
- "id": "node2.2.2_2"
- }
- }
- ]
- }
- ]
- },
- {
- "property": {
- "name": "node4",
- "id": "node4_2"
- },
- "children": [
- {
- "property":{
- "name": "nodeX",
- "id": "nodeXXXX_2"
- }
- },
- {
- "property":{
- "name": "nodeY",
- "id": "nodeY_2"
- }
- }
- ]
- },
- {
- "property": {
- "name": "node3 loadable",
- "id": "node3_2"
- }
- }
- ]
- }
- ];
-
- // load tree from json.
- tree.load({
- json: json
- });
-
- tree2.load({
- json: json2
- });
-
- });
|