本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加、删除、修改。
需要的
引用
HTML代码
产品名称 | 原价 | 促销价 | 操作 | 修改" data-bind="click: $root.update"/> 删除" data-bind="click: $root.remove"/> |
---|
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个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文链接:https://www.f2er.com/bootstrap/45844.html