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事件串连执行多个处理过程的方法
Mar 09 Javascript
用JS实现的一个include函数
Jul 21 Javascript
JavaScript表单常用验证集合
Jan 16 Javascript
javascript复制对象使用说明
Jun 28 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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读取RSS(Feed)简单实例
2014/06/12 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python获取linux系统信息的三种方法
2020/10/14 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
出生证明公证书
2014/04/09 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
如何使用python包中的sched事件调度器
2022/04/30 Python