FRAMEWORK

More information, option and methods https://github.com/mar10/fancytree

activeVisible: true

Make sure, active nodes are visible (expanded)

aria: true,

Enable WAI-ARIA support

autoActivate: true,

Automatically activate a node when it is focused using keyboard

autoCollapse: false,

Automatically collapse all siblings, when a node is expanded

autoScroll: false,

Automatically scroll nodes into visible area

clickFolderMode: 4,

1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)

checkbox: false,

Show check boxes

checkboxAutoHide: undefined,

Display check boxes on hover only

debugLevel: 4,

0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug

disabled: false,

Disable control

focusOnSelect: false,

Set focus when node is checked by a mouse click

escapeTitles: false,

Escape `node.title` content for display

icon: true,

Display node icons

keyboard: true,

Support keyboard navigation

keyPathSeparator: "/",

Used by node.getKeyPath() and tree.loadKeyPath()

minExpandLevel: 1,

1: root node is not collapsible

quicksearch: false,

Navigate to next node by typing the first letters

rtl: false,

Enable RTL (right-to-left) mode

selectMode: 2,

1:single, 2:multi, 3:multi-hier

tabindex: "0",

Whole tree behaves as one single control

titlesTabbable: false,

Node titles can receive keyboard focus

tooltip: false

Use title as tooltip (also a callback could be specified)

$("#foTreeTable").fancytree({
    extensions: ["glyph", "table", "wide", "filter"],
    checkbox: true,
    expanded: "true",
    icon: false,
    selectMode: 3,
    glyph: {
        preset: "material",
        map: {}
    },
    quicksearch: true,
    filter: {
        autoApply: true,
        autoExpand: false,
        counter: true,
        fuzzy: false,
        hideExpandedCounter: true,
        hideExpanders: false,
        highlight: true,
        leavesOnly: true,
        nodata: true,
        mode: "hide"
    },
    table: {
        checkboxColumnIdx: 0,
        nodeColumnIdx: 1
    },
    source: { url: "https://fof.ford.com.tr/content/json/capex-category.json", debugDelay: 1000 },
    lazyLoad: function (event, data) {
        data.result = { url: "https://fof.ford.com.tr/content/json/capex-category.json", debugDelay: 1000 };
    },
    renderColumns: function (event, data) {
        var node = data.node,
            data = node.data,
            $tdList = $(node.tr).find(">td");

        $tdList.eq(2).text(data.specialist);
        $tdList.eq(3).text(data.type);
        $tdList.eq(4).html("Düzenle");
        //$tdList.eq(4).text(data.price ? data.price.toFixed(2) : "");
    }
});

var tree = $("#foTreeTable").fancytree("getTree");

$("input[name=foTreeTableFilter]").keyup(function (e) {
    var n,
        opts = {
            autoExpand: true,
            leavesOnly: true
        },
        match = $(this).val();
    n = tree.filterNodes(match, opts);

    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("#foTreeResetFilter").click();
        return;
    }
    node.setExpanded(true);
    $("#foTreeResetFilter").attr("disabled", false);
    $("#foTreeTableMatches").text("(" + n + " Kayıt bulundu)");

});

// Button Reset
$("#foTreeResetFilter").click(function (e) {
    $("input[name=foTreeTableFilter]").val("");
    $("#foTreeTableMatches").text("");
    tree.clearFilter();
}).attr("disabled", true);

$("fieldset input:checkbox").change(function (e) {
    var id = $(this).attr("id"),
        flag = $(this).is(":checked");

    // Some options can only be set with general filter options:
    switch (id) {
        case "counter":
        case "hideExpandedCounter":
            tree.options.filter[id] = flag;
            break;
    }
    tree.clearFilter();
    $("input[name=foTreeTableFilter]").keyup();
});
 

More information, option and methods https://github.com/mar10/fancytree

activeVisible: true

Make sure, active nodes are visible (expanded)

aria: true,

Enable WAI-ARIA support

autoActivate: true,

Automatically activate a node when it is focused using keyboard

autoCollapse: false,

Automatically collapse all siblings, when a node is expanded

autoScroll: false,

Automatically scroll nodes into visible area

clickFolderMode: 4,

1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)

checkbox: false,

Show check boxes

checkboxAutoHide: undefined,

Display check boxes on hover only

debugLevel: 4,

0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug

disabled: false,

Disable control

focusOnSelect: false,

Set focus when node is checked by a mouse click

escapeTitles: false,

Escape `node.title` content for display

icon: true,

Display node icons

keyboard: true,

Support keyboard navigation

keyPathSeparator: "/",

Used by node.getKeyPath() and tree.loadKeyPath()

minExpandLevel: 1,

1: root node is not collapsible

quicksearch: false,

Navigate to next node by typing the first letters

rtl: false,

Enable RTL (right-to-left) mode

selectMode: 2,

1:single, 2:multi, 3:multi-hier

tabindex: "0",

Whole tree behaves as one single control

titlesTabbable: false,

Node titles can receive keyboard focus

tooltip: false

Use title as tooltip (also a callback could be specified)