Same table two actions.

Same table two actions.

bake09bake09 Posts: 3Questions: 1Answers: 0

Link to test case:

Hi,

I'm using a In my laravel(with Jquery) Project a table inside an Bootstrap Modal.
This Modal and the used table can be triggered in two states "show" and "edit".

I'm using some editor functions and option.

My Question:

How can i change the editors editable fields from 3 columns two 1 column,
and hide one custom Button "Auftrag".

In my Code i have a varibale which saves the action of the modal when opening.

How can i conditional use an if else statment for hide some editable columns and buttons?

Can someno please give me an instruction?

Thank you!

Answers

  • bake09bake09 Posts: 3Questions: 1Answers: 0

    <table id="teileliste" class="table table-hover table-bordered table-striped" width="100%">
    <thead>
    <tr>
    <th width="15%">Teilenummer</th>
    <th width="15%">Bezeichnung</th>
    <th width="5%">Menge</th>
    <th width="5%">Geliefert</th>
    <th width="10%">Lagerort</th>
    <th width="15%">Status</th>
    <th width="15%">Ext. Auftragsnr.</th>
    <th width="5%">Code</th>
    <th width="15%">Bemerkung</th>
    </tr>
    </thead>
    </table>

    <script>
    /* OpenModal Action*/

    var action = button.data('action');
    var editor = new $.fn.dataTable.Editor({ table: "#teileliste", fields: [{ label: "Menge", name: "menge" }, { label: "Code", name: "code" }, { label: "Lieferdatum", name: "lieferdatum", type: 'datetime', def: function() { return new Date(); } }, { label: "Bemerkung", name: "bemerkung" }], i18n: {```

    remove: {
    title: "Löschen",
    submit: "Löschen",
    confirm: {
    _: "Möchtest du die %d Positionen löschen?",
    1: "Möchtest du die Position löschen?"
    }
    }
    }
    });

    var table = $("#teileliste").DataTable({
    "language": {
    url: "{{ asset('js/dataTables.german.json') }}"
    },
    "dom": 'Bt',
    "scrollY": "30vh",
    "scrollCollapse": false,
    "paging": false,
    "info": false,
    "autoWidth": false,
    "orderable": true,
    "bSort": true,
    columns: [{
    data: "teilenummer"
    }, {
    data: "bezeichnung"
    }, {
    data: "menge"
    }, {
    data: "ausgeliefert"
    }, {
    data: "warehouse"
    }, {
    data: "status"
    }, {
    data: "customer_ref"
    }, {
    data: "code"
    }, {
    data: "bemerkung"
    }, {
    data: "lieferdatum"
    }, ],
    select: {
    style: 'os',
    selector: 'td:first-child'
    },
    buttons: [{
    text: 'Auftrag',
    action: function(e, dt, node, config) {
    $("#modal_auftragsdaten").modal('show');
    }
    }, {
    extend: "remove",
    text: 'Löschen',
    editor: editor
    }],
    });
    </script>

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You could add some logic into preOpen to do that - calling field().hide() to remove the field.

    Colin

  • bake09bake09 Posts: 3Questions: 1Answers: 0

    Hi Colin,

    Tank you for this tipp...

    Can you please give me an example snippet?

    here is my if-statement:

    if(action == "view"){
    
        editor.on( 'preOpen', function ( e )  {
    
          //How to disable/hide the editable-functionality 
          // of the 3rd Field "Menge" 
    
        }
    }else if (action == "edit"){
        editor.on( 'preOpen', function ( e )  {
    
        // How to hide my custom button "Auftrag"
    
        }
    }
    

    Thank you!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You can do something like this : http://live.datatables.net/darelazo/1/edit . It's making the 'Age' field read-only on the edit form, but writable on the create form.

    Colin

This discussion has been closed.