/** * An easy tree view plugin for jQuery and Bootstrap * @Copyright yuez.me 2014 * @Author yuez * @Version 0.1 */ (function ($) { $.fn.EasyTree = function (options) { var defaults = { selectable: true, deletable: false, editable: false, addable: false, i18n: { deleteNull: 'Select a node to delete', deleteConfirmation: 'Delete this node?', confirmButtonLabel: 'Okay', editNull: 'Select a node to edit', editMultiple: 'Only one node can be edited at one time', addMultiple: 'Select a node to add a new node', collapseTip: 'collapse', expandTip: 'expand', selectTip: 'select', unselectTip: 'unselet', editTip: 'edit', addTip: 'add', deleteTip: 'delete', cancelButtonLabel: 'cancle' } }; var warningAlert = $('
'); var dangerAlert = $('
'); var createInput = $('
'); options = $.extend(defaults, options); this.each(function () { var easyTree = $(this); $.each($(easyTree).find('ul > li'), function() { var text; if($(this).is('li:has(ul)')) { var children = $(this).find(' > ul'); $(children).remove(); text = $(this).text(); $(this).html(' '); $(this).find(' > span > span').addClass('fa-folder-open '); $(this).find(' > span > a').text(text); $(this).append(children); } else { text = $(this).text(); $(this).html(' '); $(this).find(' > span > span').addClass('fa-file'); $(this).find(' > span > a').text(text); } }); $(easyTree).find('li:has(ul)').addClass('parent_li').find(' > span').attr('title', options.i18n.collapseTip); // add easy tree toolbar dom if (options.deletable || options.editable || options.addable) { $(easyTree).prepend('
'); } // addable if (options.addable) { $(easyTree).find('.easy-tree-toolbar').append('
'); $(easyTree).find('.easy-tree-toolbar .create > button').attr('title', options.i18n.addTip).click(function () { var createBlock = $(easyTree).find('.easy-tree-toolbar .create'); $(createBlock).append(createInput); $(createInput).find('input').focus(); $(createInput).find('.confirm').text(options.i18n.confirmButtonLabel); $(createInput).find('.confirm').click(function () { if ($(createInput).find('input').val() === '') return; var selected = getSelectedItems(); var item = $('
  • ' + $(createInput).find('input').val() + '
  • '); $(item).find(' > span > span').attr('title', options.i18n.collapseTip); $(item).find(' > span > a').attr('title', options.i18n.selectTip); if (selected.length <= 0) { $(easyTree).find(' > ul').append($(item)); } else if (selected.length > 1) { $(easyTree).prepend(warningAlert); $(easyTree).find('.alert .alert-content').text(options.i18n.addMultiple); } else { if ($(selected).hasClass('parent_li')) { $(selected).find(' > ul').append(item); } else { $(selected).addClass('parent_li').find(' > span > span').addClass('glyphicon-folder-open').removeClass('glyphicon-file'); $(selected).append($('')).find(' > ul').append(item); } } $(createInput).find('input').val(''); if (options.selectable) { $(item).find(' > span > a').attr('title', options.i18n.selectTip); $(item).find(' > span > a').click(function (e) { var li = $(this).parent().parent(); if (li.hasClass('li_selected')) { $(this).attr('title', options.i18n.selectTip); $(li).removeClass('li_selected'); } else { $(easyTree).find('li.li_selected').removeClass('li_selected'); $(this).attr('title', options.i18n.unselectTip); $(li).addClass('li_selected'); } if (options.deletable || options.editable || options.addable) { var selected = getSelectedItems(); if (options.editable) { if (selected.length <= 0 || selected.length > 1) $(easyTree).find('.easy-tree-toolbar .edit > button').addClass('disabled'); else $(easyTree).find('.easy-tree-toolbar .edit > button').removeClass('disabled'); } if (options.deletable) { if (selected.length <= 0 || selected.length > 1) $(easyTree).find('.easy-tree-toolbar .remove > button').addClass('disabled'); else $(easyTree).find('.easy-tree-toolbar .remove > button').removeClass('disabled'); } } e.stopPropagation(); }); } $(createInput).remove(); }); $(createInput).find('.cancel').text(options.i18n.cancelButtonLabel); $(createInput).find('.cancel').click(function () { $(createInput).remove(); }); }); } // editable if (options.editable) { $(easyTree).find('.easy-tree-toolbar').append('
    '); $(easyTree).find('.easy-tree-toolbar .edit > button').attr('title', options.i18n.editTip).click(function () { $(easyTree).find('input.easy-tree-editor').remove(); $(easyTree).find('li > span > a:hidden').show(); var selected = getSelectedItems(); if (selected.length <= 0) { $(easyTree).prepend(warningAlert); $(easyTree).find('.alert .alert-content').html(options.i18n.editNull); } else if (selected.length > 1) { $(easyTree).prepend(warningAlert); $(easyTree).find('.alert .alert-content').html(options.i18n.editMultiple); } else { var value = $(selected).find(' > span > a').text(); $(selected).find(' > span > a').hide(); $(selected).find(' > span').append(''); var editor = $(selected).find(' > span > input.easy-tree-editor'); $(editor).val(value); $(editor).focus(); $(editor).keydown(function (e) { if (e.which == 13) { if ($(editor).val() !== '') { $(selected).find(' > span > a').text($(editor).val()); $(editor).remove(); $(selected).find(' > span > a').show(); } } }); } }); } // deletable if (options.deletable) { $(easyTree).find('.easy-tree-toolbar').append('
    '); $(easyTree).find('.easy-tree-toolbar .remove > button').attr('title', options.i18n.deleteTip).click(function () { var selected = getSelectedItems(); if (selected.length <= 0) { $(easyTree).prepend(warningAlert); $(easyTree).find('.alert .alert-content').html(options.i18n.deleteNull); } else { $(easyTree).prepend(dangerAlert); $(easyTree).find('.alert .alert-content').html(options.i18n.deleteConfirmation) .append('') .find('.confirm').html(options.i18n.confirmButtonLabel); $(easyTree).find('.alert .alert-content .confirm').on('click', function () { $(selected).find(' ul ').remove(); if($(selected).parent('ul').find(' > li').length <= 1) { $(selected).parents('li').removeClass('parent_li').find(' > span > span').removeClass('glyphicon-folder-open').addClass('glyphicon-file'); $(selected).parent('ul').remove(); } $(selected).remove(); $(dangerAlert).remove(); }); } }); } // collapse or expand $(easyTree).delegate('li.parent_li > span', 'click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(':visible')) { children.hide('fast'); $(this).attr('title', options.i18n.expandTip) .find(' > span.fa') .addClass('fa-folder') .removeClass('fa-folder-open'); } else { children.show('fast'); $(this).attr('title', options.i18n.collapseTip) .find(' > span.fa') .addClass('fa-folder-open') .removeClass('fa-folder'); } e.stopPropagation(); }); // selectable, only single select if (options.selectable) { $(easyTree).find('li > span > a').attr('title', options.i18n.selectTip); $(easyTree).find('li > span > a').click(function (e) { var li = $(this).parent().parent(); if (li.hasClass('li_selected')) { $(this).attr('title', options.i18n.selectTip); $(li).removeClass('li_selected'); } else { $(easyTree).find('li.li_selected').removeClass('li_selected'); $(this).attr('title', options.i18n.unselectTip); $(li).addClass('li_selected'); } if (options.deletable || options.editable || options.addable) { var selected = getSelectedItems(); if (options.editable) { if (selected.length <= 0 || selected.length > 1) $(easyTree).find('.easy-tree-toolbar .edit > button').addClass('disabled'); else $(easyTree).find('.easy-tree-toolbar .edit > button').removeClass('disabled'); } if (options.deletable) { if (selected.length <= 0 || selected.length > 1) $(easyTree).find('.easy-tree-toolbar .remove > button').addClass('disabled'); else $(easyTree).find('.easy-tree-toolbar .remove > button').removeClass('disabled'); } } e.stopPropagation(); }); } // Get selected items var getSelectedItems = function () { return $(easyTree).find('li.li_selected'); }; }); }; })(jQuery);