DataBase/script/js/jstreeAJAX.js

$(document).ready(function () {
    const types = ["工程概要", "工程計算書", "設計圖", "數量計算書", "工程預算書", "施工規範及特定條款", "設計報告書"];
    var path = '';
    var category = '';
    var project_id = '';
    var project_name = '';
    var project = '';
    var blueprint_SN = '';
    var blueprint_path = '';
    var notes = [];
    var tempTable = [];
    var tempTable2 = [];
    var tree_data; //save getTree ajax data
    var start = true;
    var folderPath = "";
    var is_blueprint2 = false;
    $('#datatable-ajax').dataTable({
        bProcessing: true,
        responsive: true,
        "pagingType": "full_numbers",
        "bLengthChange": false,
        "searching": false,
        "pageLength": 7,
        "language": {
            "processing": "處理中...",
            "loadingRecords": "載入中...",
            "lengthMenu": "顯示 _MENU_ 項結果",
            "zeroRecords": "沒有符合的結果或是沒有資料",
            "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
            "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
            "infoFiltered": "(從 _MAX_ 項結果中過濾)",
            "infoPostFix": "",
            "search": "搜尋:",
            "paginate": {
                "first": '<i class="fa fa-step-backward"></i>',
                "previous": '<i class="fa fa-backward"></i>',
                "next": '<i class="fa fa-forward"></i>',
                "last": '<i class="fa fa-step-forward"></i>'
            },
            "aria": {
                "sortAscending": ": 升冪排列",
                "sortDescending": ": 降冪排列"
            }
        },
        "columns": [{
                "width": "5%"
            },
            null,
            null,
            {
                "width": "5%"
            },

        ],
        data: [
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ],
            [
                "　", "", "", "",
            ]
        ],

        drawCallback: function () {
            if (!start) {
                var api = this.api();
                var rowCount = api.rows({
                    page: 'current'
                }).count();

                for (var i = 0; i < api.page.len() - (rowCount === 0 ? 1 : rowCount); i++) {
                    $('#datatable-ajax tbody').append($("<tr ><td>&nbsp;</td><td></td><td></td><td></td></tr>"));
                }

            }
            start = false;
        }
    });

    $.ajax({
            url: "./script/php/getTree.php",
            contentType: "application/json",
            dataType: "json",
            type: "GET",
            async: false
        })
        .success(function (response) {
            tree_data = response;

        }).error(function (error) {
            console.log(error);
        });

    var table = $('#datatable-ajax').DataTable();
    displayDetail(false);



    $('#treeAjaxHTML').jstree({
        'core': {
            'themes': {
                variant: 'large'
            },
            'data': tree_data,
            'multiple': false,
            'animation': 40,
            'expand_selected_onload': true
        },
        'types': {
            'default': {
                'icon': 'fa fa-folder'
            },
            'file': {
                'icon': 'fa fa-file'
            }
        },
        'plugins': ['types', 'search', 'wholerow']
    }).bind("loaded.jstree", function (event, data) {
        var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        if (searchURL.includes("=")) {
            type = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
            $(this).jstree("open_all");
        }

    }).on(
        'select_node.jstree',
        function (event, data) {

            if (data.node.text.includes("-")) {
                $("#reset").prop("disabled", false);
                $("#header").empty();
                displayDetail(false);
                project_id = data.node.text.split("-")[0];
                project_name = data.node.text.split("-")[1];
                project = data.node.text;
                $("#project-id").val(project_id)
                $("#header").empty();
                category = $('#treeAjaxHTML').jstree(true).get_node(data.node.parents[0]).text;

                var span = $('<span>' + project + ' > </span>');
                span.on("click", function (e) {
                    displayDetail(false);
                    is_blueprint2 = false;
                    for (var k = folderPath.length - 1; k > 0; k--) {
                        $("#header").children().eq(k).remove();
                        folderPath.pop();
                    }
                    let i = 1;
                    table.clear().draw();
                    tempTable = [];
                    types.forEach(function (data) {

                        let temp = [
                            i,
                            data,
                            category,
                            '',
                            project,

                        ];
                        table.row.add(temp).draw();

                        tempTable.push(temp);
                        i++;

                    });
                    $("#tableDetail td").empty();
                });
                $("#header").append(span);
                //$("#header").append("<span>" + project + " > </span>");

                let i = 1;
                table.clear().draw();
                tempTable = [];
                types.forEach(function (data) {

                    let temp = [
                        i,
                        data,
                        category,
                        '',
                        project,

                    ];
                    table.row.add(temp).draw();

                    tempTable.push(temp);
                    i++;

                });
                $("#tableDetail td").empty();
            } else {
                data.instance.toggle_node(data.node);
            }
        });

    $('#btn-search').click(function () {

        $("#reset").prop("disabled", true);
        $("#header").empty();
        //$("#header").text("搜尋結果");
        $("#header").empty();
        $("#header").append("<span>搜尋結果</span>");
        $.ajax({
                url: "./script/php/search.php",
                data: {
                    search: $("#search").val(),
                },
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "GET",
            })
            .success(function (response) {
                displayDetail(true);
                table.clear().draw();
                $("#tableDetail td").empty();
                response.forEach(function (data) {
                    let temp = [
                        data["SN"],
                        data["original_name"].slice(6),
                        data["keyword"],
                        '1.0.0',
                        data["project_id"],
                        data["project_name"],
                        data["type_id"],
                        data["category_name"],
                        data["notes"],
                        data["filename"],
                    ];
                    table.row.add(temp).draw();
                    i++;
                });

            })
            .error(function (error) {
                console.log(error);
            })
            .complete(function () {});

    });
    $('#search').keyup(function (e) {
        if (e.keyCode == 13) {
            $('#btn-search').click();
        }
    });

    $('#reset').click(function () {
        if (folderPath.length != 1) {
            folderPath.pop();
            let index = folderPath.length;
            $("#header").children().eq(index).remove();
            table.clear().draw();
            if (is_blueprint2) {
                tempTable2.forEach(function (data) {
                    table.row.add(data).draw();
                });
                is_blueprint2 = false;
            } else {
                tempTable.forEach(function (data) {
                    table.row.add(data).draw();
                });
            }
            $("#tableDetail td").empty();
            displayDetail(false);
        }



    });

    
    $('#datatable-ajax tbody').on('click', 'tr', function () {
        $("#reset").prop("disabled", false);
        $(this).parent().find("tr").css('background-color', '');
        $(this).css("background-color", "#cccccc");
        $("#tableDetail td").empty();
        var data = table.row(this).data();
        if (data == null) {
            data = ["", "", "null", "", "", "", "", "", "", ""];
        }
        let project_id = data[4].split("-")[0];
        let SN = data[0];
        let is_blueprint = data[1] == "設計圖" ? true : false;
        let note = notes.includes(data[1]) ? data[1] : '';
        if (data[2] == 'null') {
            $("#tableDetail td").empty();
        } else if (data[3] == '') {

            path = data[1];
            $.ajax({
                    url: "./script/php/getDetail.php",
                    data: {
                        project_id: project_id,
                        type_id: SN,
                        is_blueprint: is_blueprint,
                        note: note
                    },
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    type: "GET",
                })
                .success(function (response) {
                    var span = $('<span>' + data[1] + ' > </span>');
                    span.on("click", function (e) {
                        let clicked = $(e.target).text().split(" > ")[0];
                        let index = folderPath.indexOf(clicked);
                        for (k = index + 1; k < folderPath.length; k++) {
                            $("#header").children().eq(k).remove();
                            folderPath.pop();
                        }
                        addTable(data, notes, response, SN, path);
                        is_blueprint2 = false;
                    });
                    $("#header").append(span);
                    folderPath = $("#header").text().split(" > ");
                    folderPath.pop();

                    addTable(data, notes, response, SN, path);

                })
                .error(function (error) {
                    console.log(error);
                })
                .complete(function () {});

        } else {

            let type = types[parseInt(data[6]) - 1];
            let path = '';
            //let category = data[8];
            if (data[6] == 3) {
                path = data[7] + "/" + data[4] + "-" + data[5] + "/" + data[6] + "_" + type + "/" + data[8] + "/" + data[9];
            } else {
                path = data[7] + "/" + data[4] + "-" + data[5] + "/" + data[6] + "_" + type + "/" + data[9];
            }

            $("#plan_code").text(data[4]);
            $("#plan_name").text(data[5]);
            $("#download").append('<img src="./assets/images/' + 'pdf-icon.png" style="height: 30px; display: inline-block;"> ');
            $("#download").append('<a target="_blank" href="./assets/建置資料/' + path + '">' + data[9] + '</a>');
            $("#version").text(data[3]);
            $("#fileName").text(data[1]);
        }

    });

    function displayDetail(status) {
        if (status) {
            table.column(2).visible(true);
            table.column(3).visible(true);
            $(".table-responsive").show();
            $("#SN").text("圖號");
            $("#name").text("圖名");
        } else {
            table.column(2).visible(false);
            table.column(3).visible(false);
            $(".table-responsive").hide();
            $("#SN").text("項次");
            $("#name").text("類別");
        }

    }

    function addTable(data, notes, response, SN, path) {

        table.clear().draw();
        if (data[1] != "設計圖") {
            displayDetail(true);

            if (notes.includes(data[1])) {
                is_blueprint2 = true;
            }
            for (i = 0; i < response.length; i++) {
                table.row.add([
                    response[i]["SN"],
                    response[i]["original_name"].slice(6),
                    response[i]["keyword"],
                    '1.0.0',
                    response[i]["project_id"],
                    response[i]["project_name"],
                    response[i]["type_id"],
                    response[i]["category_name"],
                    response[i]["notes"],
                    response[i]["filename"],
                ])
                table.draw();
            }

        } else {
            blueprint_SN = SN;
            blueprint_path = path;
            tempTable2 = [];

            for (i = 0; i < response.length; i++) {
                notes[i] = response[i]['notes'];
                let temp = [
                    i + 1,
                    response[i]['notes'],
                    '',
                    '',
                    data[4],
                ];
                table.row.add(temp);
                tempTable2.push(temp);
            }
            table.draw();
        }
    }


});