Knockout结合Bootstrap创建动态UI实现产品列表管理
本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加、删除、修改。
需要的引用
<scripttype='text/javascript'src='http://www.see-source.com/js/knockout-2.2.0.js'></script> <scripttype='text/javascript'src='http://www.see-source.com/js/jquery-1.6.2.min.js'></script> <linkhref="http://www.see-source.com/bootstrap/css/bootstrap.css"rel="stylesheet">
Html代码
<body> <!--动态生成产品列表--> <tableclass="tabletable-bordered"> <thead> <tr> <th>ID</th> <th>产品名称</th> <th>原价</th> <th>促销价</th> <th>操作</th> </tr> </thead> <tbodydata-bind="foreach:products"> <tr> <td> <spandata-bind="text:$data.Id"></span> </td> <td> <inputtype="text"data-bind="value:$data.Name"/> </td> <td> <inputtype="text"data-bind="value:$data.Price"/> </td> <td> <inputtype="text"data-bind="value:$data.ActualCost"/> </td> <td> <inputtype="button"class="btn"value="修改"data-bind="click:$root.update"/> <inputtype="button"class="btn"value="删除"data-bind="click:$root.remove"/> </td> </tr> </tbody> </table> <!--产品添加form--> <formclass="form-horizontal"data-bind="submit:$root.create"> <fieldset> <legend>添加产品</legend> <divclass="control-group"> <labelclass="control-label"for="input01">产品名称</label> <divclass="controls"> <inputtype="text"name="Name"class="input-xlarge"> </div> </div> <divclass="control-group"> <labelclass="control-label"for="input01">原价</label> <divclass="controls"> <inputtype="text"name="Price"class="input-xlarge"> </div> </div> <divclass="control-group"> <labelclass="control-label"for="input01">促销价</label> <divclass="controls"> <inputtype="text"name="ActualCost"class="input-xlarge"> </div> </div> <divclass="form-actions"> <buttontype="submit"class="btnbtn-primary">保存</button> <buttonclass="btn">取消</button> </div> </fieldset> </form> </body>
js代码
<scripttype="text/javascript"> functionProductsViewModel(){ varbaseUri='http://localhost:8080/knockout/'; varself=this; //self.products=ko.observableArray([{'Id':'111','Name':'联想K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTCone','Price':'4850','ActualCost':'4500'}]); self.products=ko.observableArray(); $.getJSON(baseUri+"list",self.products);//加载产品列表 //添加产品 self.create=function(formElement){ $.post(baseUri+"add",$(formElement).serialize(),function(data){ if(data.success){//服务器端添加成功时,同步更新UI varnewProduct={}; newProduct.Id=data.ID; newProduct.Name=formElement.Name.value; newProduct.Price=formElement.Price.value; newProduct.ActualCost=formElement.ActualCost.value; self.products.push(newProduct); } },"json"); } //修改产品 self.update=function(product){ $.post(baseUri+"update",product,function(data){ if(data.success){ alert("修改成功"); } },"json"); } //删除产品 self.remove=function(product){ $.post(baseUri+"delete","productID="+product.Id,function(data){ if(data.success){ //服务器端删除成功时,UI中也删除 self.products.remove(product); } },"json"); } } ko.applyBindings(newProductsViewModel()); </script>
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。