lundi 20 avril 2015

how groups jqGrid columns dynamically using bootstrap (expand collapse, drag and drop)?

I found an example of how to group the columns in jqGrid, in the example used jquery.ui and works well. Demo: http://ift.tt/1HNjqOZ

$('tr.ui-jqgrid-labels th div') .draggable({
    appendTo: 'body',
    helper: 'clone'
});

$('#groups ol').droppable({
    activeClass: 'ui-state-default',
    hoverClass: 'ui-state-hover',
    accept: ':not(.ui-sortable-helper)',
    drop: function(event, ui) {
        var $this = $(this);
        $this.find('.placeholder').remove();
        var groupingColumn = $('<li></li>').attr('data-column', ui.draggable.attr('id').replace('jqgh_' + gridId + '_', ''));
        $('<span title="Quitar este grupo" class="ui-icon ui-icon-close cerrargrupo"></span>').click(function() {
            $(this).parent().remove();
            $('#' + gridId).jqGrid('groupingRemove');
            $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
            if ($('#groups ol li:not(.placeholder)').length === 0) {
                $('<li class="placeholder">Arratre la columan hacia aquí</li>').appendTo($this);
            }
        }).appendTo(groupingColumn);
        groupingColumn.append(ui.draggable.text());
        groupingColumn.appendTo($this);
        $('#' + gridId).jqGrid('groupingRemove');
        $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
    }
}).sortable({
        items: 'li:not(.placeholder)',
        sort: function() {
            $( this ).removeClass('ui-state-default');
        },
        stop: function() {
            $('#' + gridId).jqGrid('groupingRemove');
            $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
        }
});

And therefore I have tried to adapt it to bootstrap. Demo: http://ift.tt/1aM2VWa

But I do not know how to make the tree type(expand collapse), since I know not how to do bootstrap.enter image description here

how I can make the effect of expanding and collapsing using bootstrap? Any ideas?

Aucun commentaire:

Enregistrer un commentaire