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


Posted in Javascript onSeptember 14, 2016

本篇文章结合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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
vue中的scope使用详解
Oct 29 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
js注入 黑客之路必备!
Sep 14 #Javascript
AngularJS 模块化详解及实例代码
Sep 14 #Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 #Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 #Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 #Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
javascript hashtable实现代码
2009/10/13 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
django的ORM模型的实现原理
2019/03/04 Python
python库matplotlib绘制坐标图
2019/10/18 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
售后专员岗位职责
2013/12/08 职场文书
私人委托书格式
2014/09/10 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
初中差生评语
2014/12/29 职场文书