Python3,在Django中使用easyui

来源：互联网发布：淘宝指数数据分析编辑：程序博客网时间：2024/05/22 15:57

Python3,在Django中使用easyui

1.新建easyui目录，
并将easyui的有关支持（locale包、themes包、jquery.easyui.min.js、jquery.min.js）放该目录下

2.修改goods.html

先引用easyui目录下所需的js、css
（注意！jquery.min.js需在jquery.easyui.min.js的上面，因为easyui的实现需要jquery的支持）

<link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
<link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

然后打开easyui中文帮助文档中的layout布局，选择一种方式进行页面布局，我这里选择方式2

<body class="easyui-layout">
<div data-options="region:'north',split:false" style="height:100px;"><h1 style="text-align: center">悠悠商品管理系统</h1></div>
<div data-options="region:'west',title:'商品分类',split:true" style="width:200px;">
<ul id="categoryTree" >
</ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

{#弹出的dialog中的内容#}
<div id="category-form-dialog"> form</div>
</body>
easyui的布局效果为"上北下南，左西右东，中间中"
若访问http://127.0.0.1:8000/static/goods.html出现布局效果，
我们就成功的实现了Django中easyui的简单使用

我们接下来操作下easyui的tree
业务为：West布局中出现树状结构分支，可以通过添加、刷新按钮对该tree的节点进行新增、刷新
点击新增时弹出一个对话框，点击对话框的确定或取消按钮，关闭对话框

因为我们希望只刷新West布局，而非整个页面。因此我们需要使用Ajax进行操作
在页面中添加如下代码

<script>
$(function () {
//create tree
$('#categoryTree').tree({
url:'/goods/categoryTree'
});
//add button to west panel
$('body').layout("panel","west").panel({
tools:[
{
iconCls:"icon-reload",
handler:function(){
$('#categoryTree').tree('reload')
}
},{
iconCls:"icon-add",
handler:function(){
$('#category-form-dialog').dialog("open")
}
}
]
})
//create category form dialog
$('#category-form-dialog').dialog({
title:'商品类别表单',
width:400,
height:200,
closed:true,
model:true,
buttons:[
{
text:'保存',
iconCls:'icon-save',
handler:function () {
$('#category-form-dialog').dialog('close')
}
},{
text:'取消',
iconCls:'icon-cancel',
handler:function () {
$('#category-form-dialog').dialog('close')
}
}
]
})
})
</script>

页面部分完成，我们需要将Ajax请求的路径通过urls.py进行解析，并调用对应的方法

shopsys中的urls.py代码：

from django.conf.urls import url,include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^goods/', include('goods.urls')),
]+static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS)

goods中的urls.py代码：

from django.conf.urls import url
from goods.views import *

urlpatterns = [
url(r'^categoryTree$', categoryTree),
]

goods中的views.py代码：
（思路：第一次访问页面时，AjaxPost所发送的id为空报错，使用try：except：进行处理。
此时查询数据库的条件为：没有父节点id的data数据。
我们需要将data数据转化为json格式并返还给前端页面。
故导入
from django.core import serializers
import json
因为我们不希望west布局被csrf保护，故导入
from django.views.decorators.csrf import csrf_exempt

并在调用的categoryTree方法上进行装饰
@csrf_exempt
def categoryTree(request):

结果我们发现
serializers无法将我们得到的data数据转化为我们需要的格式
故我们手动进行创建一个字典，通过循环遍历data，将其append到treeDict字典中
再调用
json.dumps( treeDict)#将treeDict字典转化为json格式，返还前端页面
）

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
from goods.models import Category
from django.core import serializers
import json

# Create your views here.
@csrf_exempt
def categoryTree(request):

try :
id=int(request.POST["id"])
treeDict =[]
data = Category.objects.filter(parent=Category.objects.get(pk=id))
for en in data:
d = {}
d["id"] = en.id
d["text"] = en.name
d["state"] = "closed"
treeDict.append(d)
except:
data = Category.objects.filter(parent=None)#查询数据库,没有父目录的数据
treeDict =[]
for en in data:
d = {}
d["id"]=en.id
d["text"]=en.name
d["state"]="closed"
treeDict.append(d)
return HttpResponse(json.dumps( treeDict),"application/json") #dump 将字典->json

阅读全文

0 0