2015年5月14日木曜日

kendo ui treeview html5で表示

html側
        <script>
            $(document).ready(function () {

                function onSelect(e) {
                    //alert("Selecting: " + this.text(e.node));
                }

                //
                function processTable(data, idField, foreignKey, rootLevel) {
                    var hash = {};

                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var id = item[idField];
                        var parentId = item[foreignKey];

                        hash[id] = hash[id] || [];
                        hash[parentId] = hash[parentId] || [];

                        item.items = hash[id];
                        hash[parentId].push(item);
                    }

                    return hash[rootLevel];
                }

                //
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: { url: "./data/get_data.php", type:"GET", datatype: "json" }
                    },
                    batch: false,
                    schema: {
                        data: 'data'
                    }
                });

                dataSource.fetch(function () {
                    var data = this.data();
                    // tree for visualizing data                    $("#treeview").kendoTreeView({
                        dataSource: processTable(data, "id", "parent_id", 0),
                        loadOnDemand: false,
                        select: onSelect
                    });
                });

            });


        </script>

php側
if ($verb == 'GET') {

    $result = new DataSourceResult(DB_STRING, DB_USER, DB_PASSWORD);

    $columns = array('id', 'parent_id', 'text');

    $result = $result->read('テーブル名', $columns, null);

    header('Content-Type: application/json');
    echo json_encode($result, JSON_NUMERIC_CHECK);
}

remote data表示がうまく動作しなかったので
datasourceから、javascriptで、tree構成を作ってから、データを流し込んだ

0 件のコメント:

コメントを投稿