加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Knockout结合Bootstrap创建动态UI实现产品列表管理

发布时间:2020-12-18 00:49:45 所属栏目:安全 来源:网络整理
导读:本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加、删除、修改。 需要的 引用 Html代码 ID 产品名称 原价 促销价 操作 添加产品 div class="form-actions" button type="submit" class="btn btn-primary"保存 button class

本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加、删除、修改。

需要的

引用

Html代码

ID 添加产品

<div class="form-actions">
<button type="submit" class="btn btn-primary">保存
<button class="btn">取消

js代码

$.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());

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

产品名称 原价 促销价 操作