Knockout结合Bootstrap创建动态UI实现产品列表管理
更新时间：2016年09月14日 16:33:36 作者：巴别通天塔
这篇文章主要为大家详细介绍了Knockout结合Bootstrap创建动态UI实现产品列表管理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本篇文章结合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个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。2010-04-04
这篇文章主要为大家详细总结了JavaScript面试开发常用的知识点，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JS实现的表头列头固定页面功能,涉及javascript针对页面元素及表格样式动态操作相关技巧,需要的朋友可以参考下2017-01-01
Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担2015-08-08
这篇文章主要为大家详细介绍了JS实现使用POST方式发送请求，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
CommonJS是Node中的一种模块化规范，本文主要介绍了Webpack是如何打包CJS的，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这段时间接了一个微信小程序项目,从此打开小程序的新世界大门,下面这篇文章主要给大家介绍了关于小程序中监听页面滚动的几种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
下面小编就为大家带来一篇无阻塞加载js,防止因js加载不了影响页面显示的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来2016-12-12
使用webpack打包后,图片没有加载出来,页面空白,报错图片引用的路径不对,本文给大家介绍webpack 打包后图片加载报错的解决办法,感兴趣的朋友一起看看吧2024-03-03
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法2014-01-01
最新评论