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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
react 组件传值的三种方法
Jun 03 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 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中几种常见安全设置详解
2010/04/06 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python库安装速度过慢解决方案
2020/07/14 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
新闻编辑求职信
2014/04/09 职场文书
学习演讲稿范文
2014/05/10 职场文书
2014年冬季防火方案
2014/05/21 职场文书
六一儿童节活动总结
2014/08/27 职场文书
个人年终总结怎么写
2015/03/09 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers