• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bootstrap Table: Zeile Editieren

Jok3r89

New member
Hallo und Servus,
ich schreibe aktuelle an meiner ersten wirklichen Web-App in Node.js und scheitere gerade an einem wohl einfachen Problem.

Ich nutze für meine Tabellen Bootstrap-Table und würde gerne eine Zeile editierbar machen.
Ich hätte das gerne auch via js umgesetzt.

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <%- include ('../partials/head') %>
    <style>
        .Icon {
            width: 25px;
            height: 25px;
            margin-left: 20px;
            border: none;

        }
    </style>
    <!--script src="/script/setting.js" type="text/javascript" charset="utf-8"></script-->
</head>
<body>
    <%- include ('../partials/navigation') %>
    <div id = "container" class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="#">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <!--input type="image" src="./images/save.svg" class="Icon" form="tableForm"/--> 
                        <input id="btn_saveTable" type="image" src="./images/save.svg" class="Icon" >          
                    </li>
                    <li class="nav-item">
                        <input type="image" src="./images/import.svg" class="Icon"/>      
                    </li>
                    <li class="nav-item">
                        <input type="image" src="./images/export.svg" class="Icon"/>      
                    </li>
                </ul>
            </div>
        </nav> 

        <table 
            id="table"
            data-search="true">
        </table>
        
        <script>
            var $table = $('#table')
            //var data = [{ "id": 123,"enable": , "tag": "mytag" ,"route": "testRoute", "value": false}];
            var data = [{"id": 12, "enable": true , "tag": "myTag", "route": "myRoute", "value" : "true" }];
            $table.bootstrapTable({
                data : data,
                idField: 'id',
                showColumns: true,
                columns: [
                { field: 'enable', sortable: true, align: 'center', checkbox: true},
                { field: 'tag', title: 'tag' , sortable: true, align: 'center', editable: true},
                // {field: 'id', title: 'number', sortable: true, align: 'center'},
                // {field: 'pid', title: 'belonging to the superior'},
                { field: 'value', title: 'value', sortable: true, align: 'center' },
                { field: 'route', title: 'route', sortable: true, align: 'center' },
            ],
            });

        </script>
        </div>
    </div>
</body>
</html>

Für die Zeile in HTML gibt es Eigenschaften aber in JS habe ich es bisher nich nicht hinbekommen mit der Erweiterung zu arbeiten. Egal was ich versuche es kommt immer die selbe Fehlermeldung. Ist diese Extension nicht via JS ansprechbar ?
Schon mal vielen Danke, und seit bitte nachsichtig ich bezeichne mich jetzt selber mal als nooby ;-).
Grüße
 

Anhänge

  • Bildschirmfoto 2020-10-04 um 21.08.45.png
    Bildschirmfoto 2020-10-04 um 21.08.45.png
    455,6 KB · Aufrufe: 5
Du musst die zu nutzende extension bootstrap-table-editable.js auch laden wie es in der Doku ganz oben steht.
 
HTML:
<meta charset="UTF-8">
<title>Webapp</title>

<script src="/script/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/script/jquery-ui-1.12.1.min.js" type="text/javascript" charset="utf-8"></script> 

<script src="/lib/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/bootstrap-table/extensions/editable/bootstrap-table-editable.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/lib/bootstrap-table/bootstrap-table.css" rel="stylesheet">
Das wurde hier im partials/head vorgenommen....leider ohne Erfolg. Grüße
 
Hast du mal die Reihenfolge innerhalb des partials/head kontrolliert/geändert?
Und ansonsten kann ich nur sagen, was ich machen würde: ich würde den Code reduzieren auf das eine gewünschte Kommando. Also nur eine Tabelle statt mehrere, ein Feld statt mehrere, keinen dynamischen Code (partials/head) sondern alles statisch, nur die genau dafür nötigen Lib's, keine CDN's sondern nur lokal speichern usw. Also alle beliebten Fallen entfernen.
Nach der Fehlermeldung schon gegurgelt ob die Lib einen Bug hat?
Kann man das gewünschte Ziel testweise ganz ohne Lib erreichen?
 
Zurück
Oben