jQuery UI Widgets Forums Navigation Tree jqxTree data from,mysql can not work,pls help me!!

This topic contains 4 replies, has 3 voices, and was last updated by  Dimitar 8 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • Ray
    Participant

    Hi bro.
    I want to using jqxTree shown menu,I can get data from mysql,but can not work in jqxTree.pls help!!!
    *************
    php code:
    public function treedata(){
    $menu=D(‘menu’);
    $list=$menu->select();
    echo json_encode($list);
    }
    result is:
    [{“id”:”1″,”parentid”:”0″,”name”:”Foods”},{“id”:”2″,”parentid”:”1″,”name”:”Fruits”},{“id”:”3″,”parentid”:”1″,”name”:”Vegetables”},{“id”:”4″,”parentid”:”2″,”name”:”apple”}]
    *************
    html code:
    $(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;
    $(“#splitter”).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: 250}] });
    $(‘#jqxTree’).jqxTree({ height: ‘100%’, width: ‘100%’,theme:’bootstrap’ });
    $(‘#jqxTree’).css(‘visibility’, ‘visible’);
    //get data
    $(‘#jqxTree’).jqxTree({ source: source, width: ‘100%’, height: ‘100%’});
    $(‘#jqxTree’).jqxTree(‘selectItem’, null);

    });
    $.ajax({
    type:’POST’,
    url:’http://localhost/phperp/index.php/Home/Index/treedata’,
    alert(data);
    }
    });
    the question is:
    var source =[];
    source=data??? can not work!!!


    Ray
    Participant

    here is my code:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
    <html lang=”en”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
    <title>tree</title>
    <link rel=”stylesheet” href=”<?php echo ADMIN_CSS_URL;?>jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”<?php echo ADMIN_CSS_URL;?>jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>scripts/demos.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>qwidgets/jqxexpander.js”></script>
    <script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxsplitter.js”></script>
    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    <script type=”text/javascript”>
    $(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;
    $(“#splitter”).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: 250}] });
    $(‘#jqxTree’).jqxTree({ height: ‘100%’, width: ‘100%’,theme:’bootstrap’ });
    $(‘#jqxTree’).css(‘visibility’, ‘visible’);
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘id’ },
    { name: ‘parentid’ },
    { name: ‘name’ }
    ],
    url: ‘http://localhost/phperp/Home/Index/treedata’,
    id: ‘id’,
    async: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘name’, map: ‘label’}]);
    $(‘#jqxTree’).jqxTree({ source: records, width: ‘100%’, height: ‘100%’});
    $(‘#jqxTree’).on(‘select’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
    $(“#ContentPanel”).html(“<div style=’margin: 10px;’>” + item.id + “</div>”);
    });
    });
    </script>

    </head>
    <body class=’default’>
    <div id=”splitter”>
    <div>
    <div style=”visibility: hidden; border: none;” id=’jqxTree’>
    </div>

    </div>
    <div id=”ContentPanel”>
    </div>
    </div>
    </body>
    </html>


    Dimitar
    Participant

    Hi Ray,

    Could you, please, remove the following line:
    $(‘#jqxTree’).jqxTree({ height: ’100%’, width: ’100%’,theme:’bootstrap’ });
    and leave only this one:
    $(‘#jqxTree’).jqxTree({ source: records, width: ’100%’, height: ’100%’});
    Does the issue occur afterwards?

    If it has not been resolved, please make sure you are using the latest version of jQWidgets (4.1.2) and share if any errors are thrown in your browser’s console.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    mohammadTaghy
    Participant

    Hi guys.I have a problem.I want to use of jqxtree with checkBox.I want to bind data with ajax,but in edit mode some checkbox have true value.
    I dont know how I can set value to checkbox.pleas help me.`
    $.ajax({
    url: url,
    data: “”,
    type: ‘POST’,
    contentType: “application/json; charset=utf-8”,
    dataType: “json”,
    success: function (json) {
    var result = $.parseJSON(json.d);
    var source =
    {
    datatype: “json”,
    localdata: result
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy(‘Id’, ‘ParentId’, ‘items’, [{ name: ‘Text’, map: ‘label’ }]);
    $(element).jqxTree({ source: records, hasThreeStates: true, checkboxes: true });
    $(element).on(‘change’, function (event) {
    var checked = event.args.checked;
    $(element).jqxTree({ hasThreeStates: checked });
    });
    $(element).jqxTree(‘selectItem’, $(“#home”)[0]);
    }
    });


    Dimitar
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.