django 10
上节我们只是制作了对话窗,并没有将写上的数据添加到数据库中,现在我们来解决这个问题。
首先在$('#newPro')添加两个按钮,保存和取消:
$('#newPro').dialog({
title: '添加产品',
width: 400,
height: 200,
closed: true,
cache: false,
modal: true,
buttons: [
{
text:'保存',
iconCls:'icon-save',
handler:function () {
$('#ff').submit();
$('#dg').datagrid('reload');
}
},
{
text:'取消',
iconCls:'icon-cancel',
handler:function () {
$('#newPro').window('close')
}
}
]
});
iconCls为图标,在保存中,首先执行ff 的form表单提交,然后刷新表格dg。在删除按钮中则是关闭newPro对话窗。
然后在ff的form 中添加action:action="addProduce"
接着在urls中添加addProduce路径:path('addProduce',addProduce),
最后在views中添加方法addProduce:
@csrf_exempt
def addProduce(request):
name = request.POST.get('name')
price = request.POST.get('price')
category = request.POST.get('cata')
create_date = request.POST.get('createDate')
pro = Produce()
pro.name = name
pro.price = price
pro.category_id = category
pro.create_date = create_date
pro.save()
data = {'msg':'添加成功','state':'true'}
return HttpResponse(json.dumps(data))
将获取到的值存入到继承Produce类的pro中,并提交,然后json格式的data传回到网页。
但是现在还不能存入到数据库中,因为我们在newPro中添加的时间格式与数据库中的时间格式不符,现在我们回到manager网页中修改时间格式。
首先在newPro中的时间input中添加formatter:
<div>
<label>时间:</label>
<input class="easyui-datetimebox" name="createDate"
data-options="formatter:myformatter,required:true,showSeconds:false" value="" style="width:150px">
</div>
然后再在js中新写一个函数myformatter:
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h=date.getHours();
var M=date.getMinutes();
var s=date.getSeconds();
return y+'-'+(m<10?('0'+m):m)+'-'+
(d<10?('0'+d):d)+' '+h+':'+M+':'+s;
}
这是将时间date转换为年-月-日 时:分:秒的格式,现在与数据库中时间格式相同,即可将新添加的产品数据保存到数据库中了。
下面我们制作一个弹窗,用于提醒我们保存成功。
在$(function(){})中继续新写一个当ff form表单提交成功后的事件:
$('#ff').form({
success:function (data) {
data=eval('('+data+')');
$.messager.show({
title:'保存成功',
msg:data.msg,
timeout:1000,
showType:'slide'
})
}
})
data = eval('(' +data+ ')')
data是返回来的json对象。
json是以"{}"开始以及结束的,如果不添加 '(' 与 ')',在js中,它会被当做语句块来处理。
$.messager.show() 是一个弹窗,里面的msg为文本内容,显示的为从addProduce中返回的data.msg值;
里面还可以添加style:{left:0, // 与左边界的距离top:0 // 与顶部的距离 } 用啦调整弹窗显示的位置。
现在保存成功一个产品信息会显示:
现在添加功能以及完成,下面我们来制作删除按钮的功能。
首先在manager的js的$('#dg')中添加:singleSelect:true 意为如果为true,则只会选中一行。
然后在删除按钮中添加:
{
iconCls: 'icon-remove',
text:'删除',
handler: function(){
var row=$('#dg').datagrid('getSelected');
//ajax
$.get('delete','pid='+row.id,function (data) {
data=eval('('+data+')');
$.messager.show({
title:'窗口,为了好看',
msg:data.msg
});
$('#dg').datagrid('reload')
})
}
}
row为获取的某一行的值;然后执行ajax异步请求,三个三参数为路径、id(此处的pid为views中传回的值)、函数。
函数中的事件为当删除成功之后会有一个弹窗来提醒,同时刷新dg表格。
现在来在urls中添加路径:path('delete',delete),
然后在views中添加方法delete:
@csrf_exempt
def delete(request):
pid = request.GET.get('pid')
Produce.objects.filter(pk=pid).delete()
data={'msg':'删除成功'}
return HttpResponse(json.dumps(data))
注意不要忘记装饰器,pid为GRT获取的值,然后筛选出主键为pid的值,将其删除,最后将json格式的data返回到页面中。
现在当我们删除一个产品:
现在我们来做最后一个按钮--->修改。
首先在js中的修改按钮中添加:
{
iconCls: 'icon-edit',
text:'编辑',
handler: function(){
//加载整个商品
var row=$('#dg').datagrid('getSelected');
//? 为url请求 GET请求
$('#ff').form('load','getProduce?pid='+row.id);
$('#newPro').dialog('open');
}
}
首先定义一个参数row为我们点击修改的行的所有数据,接着打开newPro对话框,然后将ff form表单回显数据,回显的数据为views中getProduce中获取的pid与row.id 相同的一行数据,即将我们选中的修改数据的信息显示到newPro 对话框上。
然后在ff form表单提交成功之后添加一条刷新ff form表单:
('#ff').form({
success:function (data) {
data=eval('('+data+')');
$.messager.show({
title:'保存成功',
msg:data.msg,
timeout:1000,
showType:'slide'
});
$('#dg').datagrid('reload');
}
});
接着我们在urls中添加getProduce 路径:path('getProduce',getProduce),
然后在views中添加getProduce 方法:
def getProduce(request):
pid = request.GET.get('pid')
produce = Produce.objects.get(pk=pid)
pjson = {'id':produce.id,
'username':produce.name,
'price':produce.price,
'create_date':produce.create_date.strftime('%Y-%m-%d %H:%M:%S'),
}
return HttpResponse(json.dumps(pjson))
由于js中为url请求,需要传回参数,所有这里pid为get请求获取,这里需注意时间格式的修改。
由于我们修改和添加用的同一个newPro ,所以我们需要修改addProduce这个方法,使其判断一下是修改还是添加:
@csrf_exempt
def addProduce(request):
name = request.POST.get('username')
price = request.POST.get('price')
category = request.POST.get('cata')
create_date = request.POST.get('createDate')
id = request.POST.get('id',None)
if id is None:
pro = Produce()
pro.name = name
pro.price = price
pro.category_id = category
pro.create_date = create_date
pro.save()
else:
Produce.objects.filter(id=id).update(
name=name,
price=price,
category_id=category,
create_date=str(create_date),
)
data = {'msg':'操作成功','state':'true'}
return HttpResponse(json.dumps(data))
这里我们只需新加一个id,id为当前获取的产品id,如果存在,则执行修改,如果不存在,则执行添加,需注意,这里参数获取的‘username’,‘price’等为manager中对应的各个input标签name。