Este artículo combina Bootstrap para crear una aplicación relativamente completa para administrar listas de productos, incluida la adición de productos, eliminación y modificación.
Citas requeridas
<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.2.min.js' </script '</script href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "Stylesheet">
Código HTML
<Body> <!-Genere dinámicamente la lista de productos-> <table> <thead> <tr> <th> id </th> <th> nombre del producto </th> <th> precio original </th> <th> precio de promoción </th> <th> operación </th> </tr> </thead> <tbody data-bind = "foreach: productos"> <td> <td> <tr span data bind = "" data. </td> <td> <input type = "text" data-bind = "value: $ data.name"/> </td> <td> <input type = "text" data-bind = "valor: $ data.price"/> </td> <td> <input type = "text" button de datos de datos = "valiente" data-bind = "clic: $ root.update"/> <input type = "button" value = "eliminar" data-bind = "haga clic: $ root.remove"/> </td> </tbody> </table> <!-Product ADD FORM-> <Form-Bind = "Subt: $ root.create"> <EnlEnset> <legend> ADD Product </LEGEND> <DIVEND> <LATTABET para el producto. nombre </label> <div> <input type = "text" name = "name"> </div> </div> <div> <label for = "input01"> precio original </sel etiqueta> <div> <input type = "text" name = "precio"> </div> </div> <div> <button type = "enviar"> Guardar </botón> <botón> Cancelar </botón> </div> </fieldset> </form> </body>
código JS
<script type = "text/javaScript"> Función ProductsViewModel () {var baseUri = 'http: // localhost: 8080/knockout/'; var self = this; //self.products = ko.observableArray ([{{'id': '111', 'name': 'lenovo k900', 'precio': '3299', 'realcost': '3000'}, {'id': '222', 'nombre': 'htc one', 'precio': '4850', 'Realcost': '4500' 4500 '. self.products = ko.observableArray (); $ .getjson (baseuri + "list", self.products); // cargar lista de productos // Agregar producto self.create = function (formelement) {$ .post (baseuri + "agregar", $ (formelement) .serialize (), function (data) {si (data.success) {// cuando la adición de servidor es exitosa, el ui actualizado es actualizado synchonly synchonlyysyplyly {}; } // modifica el producto self.update = function (producto) {$ .post (baseuri + "actualización", producto, function (data) {if (data.success) {alert ("modificar con éxito");}}, "json"); } // Eliminar el producto self.remove = function (producto) {$ .post (baseuri + "delete", "productID =" + producto.id, function (data) {if (data.success) {// cuando la deleción del lado del servidor es exitosa, self.products.remove (producto);}, "json"); }}}} ko.applyBindings (New ProductsViewModel ()); </script>Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.