python 学习 42

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。