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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
详解小程序循环require之坑
Mar 08 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
PHP实现文件下载详解
2014/11/27 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
js获取变量
2006/08/24 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
初三学生评语大全
2014/04/24 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
大一新生检讨书
2014/10/29 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL