This article combines Bootstrap to create a relatively complete application to manage product lists, including product addition, deletion, and modification.
Required quotes
<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><link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
Html code
<body><!-- Dynamically generate product list--><table> <thead> <tr> <th>ID</th> <th>Product name</th> <th>Original price</th> <th>Promotion price</th> <th>Operation</th> </tr> </thead> <tbody data-bind="foreach: products"> <tr > <td> <span data-bind="text: $data.Id"></span> </td> <td> <input type="text" data-bind="value: $data.Name"/> </td> <td> <input type="text" data-bind="value: $data.Price"/> </td> <td> <input type="text" data-bind="value: $data.ActualCost"/> </td> <td> <input type="button" value="Modify" 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="submit">Save</button> <button>Cancel</button> </div> </fieldset></form></body>
js code
<script type="text/javascript">function ProductsViewModel() { var baseUri = 'http://localhost:8080/knockout/'; var self = this; //self.products = ko.observableArray([{'Id':'111','Name':'Lenovo K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTC one','Price':'4850','ActualCost':'4500'}]); self.products = ko.observableArray(); $.getJSON(baseUri + "list", self.products);//Load product list//Add product self.create = function (formElement) { $.post(baseUri + "add", $(formElement).serialize(), function(data) { if(data.success){// When the server-side addition is successful, the UI is updated synchronously var newProduct = {}; newProduct.Id = data.ID; newProduct.Name = formElement.Name.value; newProduct.Price = formElement.Price.value; newProduct.ActualCost = formElement.ActualCost.value; self.products.push(newProduct); } },"json"); } //Modify the product self.update = function (product) { $.post(baseUri + "update", product, function(data) { if(data.success){ alert("Modify successfully"); } },"json"); } //Delete the product self.remove = function (product) { $.post(baseUri + "delete", "productID="+product.Id, function(data) { if(data.success){ //When the server-side deletion is successful, self.products.remove(product); } },"json"); } } } }ko.applyBindings(new ProductsViewModel());</script>If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.