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的设计模式
Nov 22 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
document.write的几点使用心得
May 14 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
js创建数组的简单方法
Jul 27 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
微信小程序模版渲染详解
Jan 26 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 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
php过滤危险html代码
2008/08/18 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP检测用户语言的方法
2015/06/15 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python文字转语音实现过程解析
2019/11/12 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
详解python对象之间的交互
2020/09/29 Python
python 实现波浪滤镜特效
2020/12/02 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
劳动竞赛口号
2014/06/16 职场文书
材料化学专业求职信
2014/07/15 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
毕业证代领委托书
2014/09/26 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS