Knockout结合Bootstrap创建动态UI实现产品列表管理

2019-11-20 09:00:03

字体：大中小

来源：转载

供稿：网友

本篇文章结合Bootstrap创建一个比较完整的应用，对产品列表进行管理，包括产品的增加、删除、修改。

需要的引用

<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代码

<body><!-- 动态生成产品列表 --><table class="table table-bordered"> <thead>  <tr>   <th>ID</th>   <th>产品名称</th>   <th>原价</th>   <th>促销价</th>   <th>操作</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" class="btn" value="修改" data-bind="click: $root.update"/>    <input type="button" class="btn" value="删除" data-bind="click: $root.remove"/>    </td>   </tr>  </tbody></table><!-- 产品添加form --><form class="form-horizontal" data-bind="submit:$root.create">  <fieldset>   <legend>添加产品</legend>   <div class="control-group">   <label class="control-label" for="input01">产品名称</label>   <div class="controls">    <input type="text" name="Name" class="input-xlarge">   </div>   </div>   <div class="control-group">   <label class="control-label" for="input01">原价</label>   <div class="controls">    <input type="text" name="Price" class="input-xlarge">   </div>   </div>   <div class="control-group">   <label class="control-label" for="input01">促销价</label>   <div class="controls">    <input type="text" name="ActualCost" class="input-xlarge">   </div>   </div>          <div class="form-actions">   <button type="submit" class="btn btn-primary">保存</button>   <button class="btn">取消</button>   </div>  </fieldset></form></body>

js代码

<script type="text/javascript">function ProductsViewModel() {  var baseUri = 'http://localhost:8080/knockout/';  var self = this;  //self.products = ko.observableArray([{'Id':'111','Name':'联想K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTC one','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    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");  }  //修改产品 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(new ProductsViewModel());</script>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：AngularJS 表达式详解及实例代码

下一篇：js注入，防范黑客必备！