Knockout結合Bootstrap建立動態UI--產品列表管理

時間 2019-11-17

標籤 knockout 結合 bootstrap 建立動態產品列表管理欄目 Bootstarp 简体版

原文原文鏈接

本篇文章結合Bootstrap建立一個比較完整的應用，對產品列表進行管理，包括產品的增長、刪除、修改。javascript

須要的引用css

<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代碼java

<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代碼jquery

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