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 相关文章推荐
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
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
dedecms模板标签代码官方参考
2007/03/17 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python散点图实例之随机漫步
2018/08/27 Python
Python提取频域特征知识点浅析
2019/03/04 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
一道Delphi面试题
2016/10/28 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
品质主管岗位职责
2014/03/16 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang