jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Export tree data to JSON Posts

December 12, 2013 at 12:48 am Export tree data to JSON #46364

castt

Participant

There are examples in documentation where you show how to make tree out of JSON data.
After initializing tree, I’m changing this tree with jqwidgets functionality (hierarchy, check-box state etc..), how do I export it to JSON back? function $('#jqxTree').jqxTree('getCheckedItems') gives me tree objects back, but they contains a lot of parameters that I don’t need in my JSON
like:

checkBoxElement: div#jqxWidgetdb05d648.chkbox.jqx-widget.jqx-widget-arctic.jqx-checkbox.jqx-checkbox-arctic

and many other html realted things which will not let me just apply JSON.stringify(items) on jqxTree data.

So how do I export data in the same format that I input it (with standart label,value,disabled,checked,element,parentElement,isExpanded,selected fileds)?

I’ve tried $('#jqxTree').jqxTree('source') and it return the data I want, but for some reason it’s not reflecting changed state of the tree.

Is there is any way to use dataAdapter for that purposes? If so, can we provide specific example.
Second question: how to display only tree elements witch checked state equals to “true”

December 12, 2013 at 6:41 am Export tree data to JSON #46380

Dimitar

Participant

Hello castt,

Here is an example, based on the demo JSON Tree. The data is exported to exportArray in the same format as the source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";

                var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano",
                    "value": "$2.3"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12",
                    "value": "$2.3"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12",
                    "value": "$2.3"
                }]

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: data
                };

                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme, allowDrag: true, allowDrop: true });
                $("#export").click(function () {
                    var items = $('#jqxWidget').jqxTree('getItems');
                    var exportArray = new Array();
                    for (var i = 0; i < items.length; i++) {
                        var currentItem = items[i];
                        var currentParentId = currentItem.parentId;
                        if (currentParentId == 0) {
                            currentParentId = "-1";
                        }
                        exportArray.push({ "id": currentItem.id, "text": currentItem.label, "parentid": currentParentId, "value": currentItem.value });
                    };
                });
            });
        </script>
        <button id="export">
            Export to array
        </button>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.