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 = "";
    $('#datatable-ajax').dataTable({
        bProcessing: true,
        responsive: true,
        "pagingType": "full_numbers",
        "bLengthChange": true,
        "lengthMenu": [
            [7, 10, 25, -1],
            ["最小", 10, 25, "全部"]
        ],
        "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");
        }

        /*var typeNode = $(".jstree-anchor").filter(function() {
            return $(this).text() == type;
        });

        var typeId = typeNode[0].attributes.id.value;

        $(this).jstree("select_node", typeId);*/


    }).on(
        'select_node.jstree',
        function (event, data) {
            if (data.node.text.includes("-")) {
                $("#folderPath").empty();

                project_id = data.node.text.split("-")[0];
                project_name = data.node.text.split("-")[1];
                project = data.node.text;
                $("#project-id").val(project_id)
                $("#header").text(project);
                category = $('#treeAjaxHTML').jstree(true).get_node(data.node.parents[0]).text;
                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);
            }
            displayDetail(false);
        });

    $('#btn-search').click(function () {
        $("#folderPath").empty();
        $("#header").text("搜尋結果");
        $.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 () {
        $("#folderPath").empty();
        folderPath.splice(folderPath.length - 2, 1);
        if (folderPath[0] != " ") {
            $("#folderPath").text(folderPath.join(">"));
        }
        table.clear().draw();
        if (!is_blueprint2) {
            tempTable.forEach(function (data) {
                table.row.add(data).draw();
            });
        } else {
            tempTable2.forEach(function (data) {
                table.row.add(data).draw();
            });
            is_blueprint2 = false;
        }
        $("#tableDetail td").empty();
        displayDetail(false);

    });

    var is_blueprint2 = false;
    $('#datatable-ajax tbody').on('click', 'tr', function () {
        $(this).parent().find("tr").css('background-color', '');
        $(this).css("background-color", "#cccccc");
        $("#tableDetail td").empty();
        var data = table.row(this).data();
        console.log(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) {

                    table.clear().draw();

                    $("#folderPath").text($("#folderPath").text() + data[1] + " > ");
                    folderPath = $("#folderPath").text().split(">");
                    table.page.len(10).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();
                    }

                })
                .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("類別");
            table.page.len(7).draw();
        }

    }

});