jQWidgets Forums

This topic contains 0 replies, has 1 voice, and was last updated by yonysun 12 years ago.

Viewing 1 post (of 1 total)

Author

How to get the value of the selected tree item Posts

May 15, 2013 at 10:55 am How to get the value of the selected tree item #21195

yonysun

Member

How to get the value of the selected tree item?

sometimes I want the tree to show some words as label and bind an id to the item,

but however I tried, I can’t to get the value that I selected or getted in one event function.

this is my code:

<script type="text/javascript" defer="defer">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var items = { id:1,label: "org",expanded: true, 
                    		items: [{ value: "ajax1.htm", label: 'Loading...' }] };
            var treeData = function (data) {
				this.label = ko.observable(data.label);
				this.items = ko.observableArray(data.items);	
                this.enabled = ko.observable(true);
                this.addItem = function () {
                    if (this.items().length < 4) {
                        this.items.push("New Item");
                    }
                    else if (this.items().length == 4) {
                        this.items.push("Last Item");
                        this.enabled(false);
                    }
                }
            }
            var viewModel = {
            	theme:theme,
                treeData: [
                    new treeData(items)
                ]
            };
            var tree = $('#jqxTree');
       	
            tree.jqxTree({theme: viewModel.theme,checkboxes:true,hasThreeStates: true, height: 300, width: 200 });
            tree.bind('expand', function (event) {
                tree.jqxTree('val', event.args.element);
                var label = tree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                alert(tree.jqxTree('getItem', event.args.element).value );
                var children = $element.find('ul:first').children();
                $.each(children, function () {
                    var item = tree.jqxTree('getItem', this);
                    if (item && item.label == 'Loading...') {
                        loaderItem = item;
                        loader = true;
                        return false;
                    };
                });
                if (loader) {
                    $.ajax({
                        url: loaderItem.value,
                        success: function (data, status, xhr) {
                            var items = jQuery.parseJSON(data);
                            tree.jqxTree('addTo', items, $element[0]);
                            tree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });
            tree.on('select',function(event){
            	var args = event.args;
                var item = tree.jqxTree('getItem', args.element);
                var label = item.label; 
            	alert(item.element.textContent);
            });
            ko.applyBindings(viewModel);
        });
    </script>
  </head>
  
  <body>	
  		<div id="jqxTree" data-bind="jqxTree:{source:treeData}"></div>
  </body>

Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.