整合Django和jquery-easyui
by:授客 QQ：1033553122
测试环境
win7 64
Python 3.4.0
jquery-easyui-1.5.1
下载地址1：http://www.jeasyui.com/download/index.php
下载地址2：http://pan.baidu.com/s/1i4TQK5n
jquery-1.5.1.min.js
下载地址：http://pan.baidu.com/s/1o78HO4y
环境配置
配置jquery-easyui
解压下载的jquery-easyui-1.5.1.zip，重命名解压后的文件目录为jquery-easyui，然后在放入应用的static目录下(例：F:\project\autotest\autotest\static\jquery-easyui)
把下载的jquery-1.5.1.min.js，放到jquery-easyui根目录下
测试配置是否成功
新建templates/autotest目录下分别新建testeasyui.html,index.html
testeasyui.html
<html>
<title>Accordion - jQuery EasyUI Demo</title>
{% load staticfiles %}
<script type="text/javascript" src="{% static 'jquery-easyui/jquery-1.5.1.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'jquery-easyui/themes/default/easyui.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'jquery-easyui/themes/icon.css'%}" />
<script type="text/javascript" src="{% static 'jquery-easyui/jquery.easyui.min.js'%}"></script>
<script type="text/javascript" src="{% static 'jquery-easyui/locale/easyui-lang-zh_CN.js' %}"></script>
<script type="text/javascript">
$(function(){
$.messager.confirm('标题内容' , '确认么?' ,function(r){
if(r){
alert('点击确认');
} else {
alert('点击取消');
}
});
$.messager.progress({
title: '我是进度条' ,
msg:'文本内容' ,
text: '正在加载..' ,
interval:1000
</script>
</html>
index.html
<body>
<p>home index</p>
</body>
加载静态文件夹,然后再引用完整的EasyUI引用如下:
编辑autotest/settings.py，添加带背景色内容
INSTALLED_APPS = [
'autotest.apps.AutotestConfig',
……
修改autotest/setting.py
from
django.conf.urls
import
url
from
include
django.contrib
admin
urlpatterns = [
url(r'^autotest/',
include('autotest.urls')),
url(r'^admin/',
admin.site.urls),
url(r'^$',
]
编辑autotest\urls.py
__author__
=
'shouke'
.
views
url('^testeasyui',views.testeasyui,
name='testeasyui')
编辑autotest\views.py
from django.shortcuts import render
#from
django.http import HttpResponse
def testeasyui(request):
return
render(request,'autotest/testeasyui.html')
def
index(request):
render(request,
'autotest/index.html')
浏览器访问
作者：授客
QQ：1033553122
全国软件测试QQ交流群：7156436
Git地址：https://gitee.com/ishouke
友情提示：限于时间仓促，文中可能存在错误，欢迎指正、评论！
作者五行缺钱，如果觉得文章对您有帮助，请扫描下边的二维码打赏作者，金额随意，您的支持将是我继续创作的源动力，打赏后如有任何疑问，请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群