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

2024-05-06 16:31:59

字体：大中小

来源：转载

供稿：网友

本篇文章结合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>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：再谈javascript注入黑客必备！

下一篇：js注入黑客之路必备！