Dieser Artikel kombiniert Bootstrap, um eine relativ vollständige Anwendung zur Verwaltung von Produktlisten zu erstellen, einschließlich Produktzusatz, Löschung und Änderung.
Erforderliche Zitate
<script type = 'text/javaScript' src = 'http: //www.see-source.com/js/knockout-2.2.0.js'> </script> <script type = 'text/javascript' src = 'http: //www.see-source.com/js/jquery-1.6.6.6.6.6. href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "stylesheet">
HTML -Code
<body> <!-Produktliste dynamisch generieren-> <table> <Thead> <TR> <TH> ID </th> <Th> Produktname </th> <Th> Originalpreis </th> <th> Werbepreis </th> <Th> Operation </th> </tr> </thead> <tbody-daten-bind = "data-bind =" foreach: products "> <tr> <td> <Td> </<Td> <d. </td> <td> <Eingabe type = "text" data-bind = "Wert: $ data.name"/> </td> <td> <Eingabe type = "text" data-bind = "Wert: $ data.price"/> </td> <td> <Eingabe type = "text" data-bind = "value: $ data" dataual-type ". data-bind="click: $root.update"/> <input type="button" value="Delete" data-bind="click: $root.remove"/> </td> </tbody></table><!-- Product Add form --><form data-bind="submit:$root.create"> <fieldset> <legend>Add product</legend> <div> <label for="input01">Product name</label> <div> <input type="text" name="Name"> </div> </div> <div> <label for="input01">Original price</label> <div> <input type="text" name="Price"> </div> </div> <div> <label for="input01">Promotional price</label> <div> <input type="text" name="ActualCost"> </div> </div> <div> <button type = "senden"> speichern </button> <taste> abbrechen </button> </div> </fieldset> </form> </body>
JS -Code
<script type = "text/javaScript"> Funktion productsViewModel () {var baseuri = 'http: // localhost: 8080/knockout/'; var self = this; //self.Products = Ko.observablearray ([{'id': '111', 'name': 'lenovo k900', 'price': '3299', 'tructCost': '3000'}, {'id': '222', 'name': htc eins ',' ’: '4850', '4850', '“,' “, '': '4850', '“. self.Products = ko.observablearray (); $ .getJson (Basisuri + "Liste", self.products); // Produktliste laden // Produkt self.create = Funktion (Formelement) {$ .post (Basisuri + "add", $ (Formelement) .Serialize (), Funktion (Data) {if (Data.success) {//. {}; } // Das Produkt self.update = function (product) {$ .post (Basisuri + "Update", Produkt, Funktion (Daten) {if (data.success) {alert ("erfolgreich ändern");}}, "JSON"); } // Löschen Sie das Produkt self.remove = function (product) {$ .post (Basisuri + "delete", "productId =" + product.id, function (data) {if (data.success) {// wenn der serverseitige Deletion erfolgreich ist, self.products.Remove (Produkt);}}}}, "jon"); }}}} ko.applybindings (new ProductsViewModel ()); </script>Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.