devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django--jQuery easyUI_django+query easyui

作者：从前慢现在也慢 | 2024-03-12 13:54:19

赞

踩

django+query easyui

 一、jQuery easyUI

jQuery easyUI是建立在jQuery javaScript库上的一组用户界面交互、特效、小部件及主题.无论您是在创建高度交互的Web应用程序还是仅仅想窗口控制添加一个日期选择器,jQuery easyUI 都是一个完美的选择

1创建新的项目,导入静态资源,更改setting设置

下载下来的jQuery easyUI包找到所选文件导入静态资源static包中

2.创建新的manager.html页面 配置路径,写入函数

先找到jQuery easyUI说明文件夹如下(jquery-easyui-EDT-1.4.2-build1---->jquery-easyui-1.4.2--->docs（千万别点我）--->jQuery EasyUI 1.4.2 版 API 中文版 (Made By Richie696).chm)

将所框出的代码写入html页面并修改script路径注意顺序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
  8.  
  9.     <script type="text/javascript" src="/static/jquery.min.js"></script>
  10.     <script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
  11. </head>
  12. <body class="easyui-layout">
  13.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  14.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  15.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
  16.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  17.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  18. </body>
  19. </html>

写入index函数

  1. from django.shortcuts import render
  2.  
  3. # Create your views here.
  4. def index(request):
  5.     return render(request,'manager.html')

写入总路径

  1. from django.contrib import admin
  2. from django.urls import path
  3. from wd_user.views import index
  4.  
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path('', index),
  8.  
  9.  
  10. ]

配置静态资源路径

进入浏览器后显示效果展示

区域面板属性

属性名属性值类型描述默认值
titlestring布局面板标题文本。null
regionstring定义布局面板位置，可用的值有：north, south, east, west, center。 
borderboolean为true时显示布局面板边框。true
splitboolean为true时用户可以通过分割栏改变面板大小。false
iconClsstring一个包含图标的CSS类ID，该图标将会显示到面板标题上。null
hrefstring用于读取远程站点数据的URL链接null
collapsibleboolean定义是否显示折叠按钮。（该属性自1.3.3版开始可用）true
minWidthnumber最小面板宽度。（该属性自1.3.3版开始可用）10
minHeightnumber最小面板高度。（该属性自1.3.3版开始可用）10
maxWidthnumber最大面板宽度。（该属性自1.3.3版开始可用）10000
maxHeightnumber最大面板高度。（该属性自1.3.3版开始可用）10000

创建数据库表模板

  1. from django.db import models
  2.  
  3. # Create your models here.
  4. class Category(models.Model):
  5.     #类别模型
  6.     name=models.CharField(max_length=10,null=False)
  7.     parent=models.ForeignKey('Category',on_delete=None,null=True)
  8. class Produce(models.Model):
  9.     #产品
  10.     name=models.CharField(max_length=20)
  11.     price=models.FloatField()
  12.     create_date=models.DateTimeField()
  13.     category=models.ForeignKey('Category',on_delete=None,null=True)
  14.

执行shell命令创建表然后在表中添加数据

接下来为页面嘴边创建一个树状菜单

修改html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
  8.  
  9.     <script type="text/javascript" src="/static/jquery.min.js"></script>
  10.     <script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
  11.     <script type="text/javascript">
  12.         $(function(){
  13.             //创建一个树状菜单
  14.             $('#tt').tree({
  15.                 url:'catetree'
  16.             });
  17.         })
  18.     </script>
  19. </head>
  20.  
  21. <body class="easyui-layout">
  22.     <div data-options="region:'north',title:'',split:true,collapsible:false" style="height:100px;">
  23.         <h1 STYLE="text-align: center">欢迎访问jQuery easyUI</h1>
  24.     </div>
  25.     <div data-options="region:'west',title:'West',split:true" style="width:100px;">
  26.         <ul id="tt">
  27.  
  28.         </ul>
  29.     </div>
  30.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  31. </body>
  32.  
  33. </html>

填写树状函数

  1. from django.http import HttpResponse
  2. from django.shortcuts import render
  3.  
  4. # Create your views here.
  5. from django.views.decorators.csrf import csrf_exempt
  6. import json
  7.  
  8. from wd_user.models import Category
  9.  
  10.  
  11. def index(request):
  12.     return render(request,'manager.html')
  13. #获取类别表  组装成一个tree结构
  14. @csrf_exempt
  15. def catetree(request):
  16.     #每次请求都是某一个类别下的分类
  17.     tree=[]
  18.     #获取请求id,如果没有默认为none
  19.     id=request.POST.get('id',None)
  20.     #查询
  21.     #查询所有parent_id等于父集id的所有产品
  22.     category=Category.objects.filter(parent_id=id).all()
  23.     for cate in category:
  24.         #每一个类别都是一个字典
  25.         ca={}
  26.         ca['id']=cate.id
  27.         ca['text']=cate.name
  28.         ca['state']='closed'
  29.         tree.append(ca)
  30.     #将返回数据改成json格式
  31.     return HttpResponse(json.dumps(tree))

填写路径urls.py

进入浏览器效果显示

2.获取各类名下的产品

更改html

添加函数

  1. from wd_user.models import Category, Produce
  2. @csrf_exempt
  3. def ProduceList(request):
  4.     #请求获取某个类别下的所有产品
  5.     proSet=Produce.objects.all()
  6.     tree=[]
  7.     for pro in proSet:
  8.         p={}
  9.         p['id']=pro.id
  10.         p['name']=pro.name
  11.         p['price']=pro.price
  12.         p['create_date']=pro.create_date.strftime('%Y-%m-%d')
  13.         tree.append(p)
  14.     return HttpResponse(json.dumps(tree))

配置路径

  1. from django.contrib import admin
  2. from django.urls import path
  3. from wd_user.views import *
  4.  
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path('', index),
  8.     path('catetree',catetree),
  9.     path('ProduceList',ProduceList)
  10.  
  11. ]

浏览器效果

二、分页

1.全部产品分页

步骤:<1>获取第几页多少条   <2>做分页    <3>获取第几页 <4>设置一个total 和rows

更改html

更改函数

  1.  
  2. from django.core.paginator import  Paginator
  3. @csrf_exempt
  4. def ProduceList(request):
  5.     page=request.POST.get('page',1)#默认第一页
  6.     rows=request.POST.get('rows',10)#默认每页十条
  7.     #请求获取某个类别下的所有产品
  8.     proSet=Produce.objects.all().order_by()
  9.     #1创建一个分页器 1被分页的集合 2每页多少条数据
  10.     paginator=Paginator(proSet,rows)
  11.     #2.获取第几页的数据
  12.     pages=paginator.get_page(page)
  13.  
  14.     tree=[]
  15.     #返回值中必须有total(总页数) rows(当前页的数据集)
  16.     for pro in pages:
  17.         p={}
  18.         p['id']=pro.id
  19.         p['name']=pro.name
  20.         p['price']=pro.price
  21.         p['create_date']=pro.create_date.strftime('%Y-%m-%d')
  22.         tree.append(p)
  23.     grid = {'total': paginator.count,
  24.             'rows':tree}
  25.     return HttpResponse(json.dumps(grid))

实现效果

2.添加点击事件出来相应的产品

更改html

更改函数

效果展示

三、排序

 

sortparam

排序datagrid表格。（该方法自1.3.6版开始可用）

代码示例：

  1. $('#dg').datagrid('sort', 'itemid');    // 排序一个列
  2. $('#dg').datagrid('sort', {	        // 指定了排序顺序的列
  3. 	sortName: 'productid',
  4. 	sortOrder: 'desc'
  5. });

 

sortableboolean如果为true，则允许列使用排序。

让价格和名字可以排序

更改html

更改函数

实现效果 点击价格 名字 即可排序

四、按钮

 

toolbararray,selector顶部工具栏的DataGrid面板。可能的值：
1) 一个数组，每个工具属性都和linkbutton一样。
2) 选择器指定的工具栏。

在<div>标签上定义工具栏：

 

  1. $('#dg').datagrid({
  2. 	toolbar: '#tb'
  3. });
  4. <div id="tb">
  5. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
  6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
  7. </div>

通过数组定义工具栏：

  1. $('#dg').datagrid({
  2. 	toolbar: [{
  3. 		iconCls: 'icon-edit',
  4. 		handler: function(){alert('编辑按钮')}
  5. 	},'-',{
  6. 		iconCls: 'icon-help',
  7. 		handler: function(){alert('帮助按钮')}
  8. 	}]
  9. });

更改html下的datagrid

添加按钮

五、form表单

点击添加出现窗口

$().datagrid.('reload’)重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。

data函数

pid

eval

success

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
  8.  
  9.     <script type="text/javascript" src="/static/jquery.min.js"></script>
  10.     <script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
  11.     <script type="text/javascript">
  12.         $(function(){
  13.             //创建一个树状菜单
  14.             $('#tt').tree({
  15.                 url:'catetree',
  16.                 onClick:function(node){
  17.                     //点击后重新加载构造datagrid
  18.                     $('#dg').datagrid({
  19.                         queryParams:{
  20.                             'category_id':node.id
  21.                         }
  22.                     })
  23.  
  24.                 }
  25.                 });
  26.             $('#dg').datagrid({
  27.                 url:'ProduceList',
  28.                 //确认启动分页
  29.                 pagination:true,
  30.                 //分页单
  31.                 pageList:[5,10,15],
  32.                 columns:[[
  33.                         {field:'id',title:'编号',width:100},
  34.                         {field:'name',title:'名字',width:100,sortable:true},
  35.                         {field:'price',title:'价格',width:100,align:'right',sortable:true}  ,
  36.                         {field:'create_date',title:'发布时间',width:100,align:'right'}
  37.                     ]],
  38.                 toolbar: [
  39.                     {
  40.                         iconCls: 'icon-add',
  41.                         text:'添加',
  42.                         handler: function(){
  43.                             var node=$("#tt").tree("getSelected");
  44.                             if(node){
  45.                                 //取消异步请求
  46. {#                                $.ajaxSetup({#}
  47. {#                                    async:false#}
  48. {#                                });#}
  49.                                 $('#Category').combotree("tree").tree({
  50.                                     onLoadSuccess:function(node,date){
  51.                                         $('#Category').combotree("tree").tree("expandAll")
  52.                                     }
  53.                                 });
  54.                                 //开启异步请求
  55. {#                                $.ajaxSetup({#}
  56. {#                                    async:true#}
  57. {#                                });#}
  58.                                 //将选中的类别的ID绑定到下拉列表中
  59.                                 $('#ff').form("load",{"categoryid":node.id})
  60.                             }
  61.                             $('#newPro').dialog('open');
  62.                         }
  63.                     },'-',{
  64.                         iconCls: 'icon-edit',
  65.                         text:'编辑',
  66.                         handler: function(){}
  67.                     },'-',{
  68.                         iconCls: 'icon-help',
  69.                         text:'帮助',
  70.                         handler: function(){}
  71.                     },'-',{
  72.                         iconCls: 'icon-remove',
  73.                         text:'删除',
  74.                         handler: function(){
  75.                             var row=$('#dg').datagrid("getSelected");
  76.                             //alert(row.id);
  77.                             $.get('delete','pid='+row.id,function (data) {
  78.                                 data=eval('('+data+')');
  79.                             $.messager.show({
  80.                                  msg:data.msg
  81.                             });
  82.                             $('#dg').datagrid('reload')
  83.  
  84.                             })
  85.                         }
  86.                     }],
  87.                 //只能选中一行
  88.                 singleSelect:true
  89.             });
  90.             //窗口设置
  91.             $('#newPro').dialog({
  92.                 title: '添加产品',
  93.                 width: 400,
  94.                 height: 200,
  95.                 closed: true,
  96.                 cache: false,
  97.                 modal: true,
  98.                 //为窗口添加保存和取消按钮
  99.                 buttons:[
  100.                     {
  101.                         text:'保存',
  102.                         iconCls:'icon-save',
  103.                         handler:function(){
  104.                             $('#ff').submit();//执行submit事件
  105.                             $('#dg').datagrid("reload")//重载表单dg
  106.  
  107.                         }
  108.                     },{
  109.                         text:'取消',
  110.                         iconCls:'icon-cancel',
  111.                         handler:function(){
  112.                            $('#newPro').window('close')
  113.                     }}]
  114.                 });
  115.             //定义下拉列表框在什么时候加载
  116.             $('#Category').combotree({
  117.                 url: '/catetree',
  118.                 required: true
  119.             });
  120.             $('#ff').form({
  121.                 url:'addProduce',
  122.                 success:function (add) {
  123.                       add=eval('('+add+')');
  124.                       $.messager.show({
  125.                          title:'商品保存信息',
  126.                         msg:add.msg,
  127.                         timeout:5000,
  128.                         showType:'slide'
  129.                     })
  130.                 }
  131.             })
  132.         });
  133.         //设置时间格式
  134.         function myformatter(date){
  135.             var y=date.getFullYear();
  136.             var m=date.getMonth()+1;
  137.             var d=date.getDate();
  138.             var h=date.getHours();
  139.             var M=date.getMinutes();
  140.             var s=date.getSeconds();
  141.             return y+'-'+(m<10?('0'+m):m)+'-'+
  142.                 (d<10?('0'+d):d)+' '+h+':'+M+':'+s;
  143.         }
  144.  
  145.     </script>
  146. </head>
  147.  
  148. <body class="easyui-layout">
  149.     <div data-options="region:'north',title:'',split:true,collapsible:false" style="height:100px;">
  150.         <h1 STYLE="text-align: center">欢迎访问jQuery easyUI</h1>
  151.     </div>
  152.     <div data-options="region:'west',title:'菜单',split:true" style="width:100px;">
  153.         <ul id="tt">
  154.  
  155.         </ul>
  156.     </div>
  157.     <div data-options="region:'center',title:'产品列表'" style="padding:5px;background:#eee;">
  158.         <table id="dg"></table>
  159.     </div>
  160.     <div id="newPro">
  161.         <form id="ff" method="post" action="/addProduce">
  162.             <div>
  163.                 <label for="name">产品名称:</label>
  164.                 <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
  165.             </div>
  166.             <div>
  167.                 <label >价格:</label>
  168.                 <input name="price" type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
  169.             </div>
  170.             <div>
  171.                 <label >类别:</label>
  172.                 <select name="cata" id="Category" class="easyui-combotree" style="width:200px;"data-options="required:true"></select>
  173.             </div>
  174.             <div>
  175.                 <label>发布时间:</label>
  176.                 <input name="createDate" class="easyui-datetimebox" data-options="formatter:myformatter ,required:true,showSeconds:false" style="width:150px">
  177.             </div>
  178.         </form>
  179.     </div>
  180. </body>
  181.  
  182. </html>
  1. import datetime
  2.  
  3. from django.http import HttpResponse
  4. from django.shortcuts import render
  5. from django.core.paginator import  Paginator
  6. # Create your views here.
  7. from django.views.decorators.csrf import csrf_exempt
  8. import json
  9.  
  10. from wd_user.models import Category, Produce
  11.  
  12.  
  13. def index(request):
  14.     return render(request,'manager.html')
  15. #获取类别表  组装成一个tree结构
  16. @csrf_exempt
  17. def catetree(request):
  18.     #每次请求都是某一个类别下的分类
  19.     tree=[]
  20.     #获取请求id,如果没有默认为none
  21.     id=request.POST.get('id',None)
  22.     #查询
  23.     #查询所有parent_id等于父集id的所有产品
  24.     category=Category.objects.filter(parent_id=id).all()
  25.     for cate in category:
  26.         #每一个类别都是一个字典
  27.         ca={}
  28.         ca['id']=cate.id
  29.         ca['text']=cate.name
  30.         ca['state']='closed'
  31.         tree.append(ca)
  32.     #将返回数据改成json格式
  33.     return HttpResponse(json.dumps(tree))
  34. @csrf_exempt
  35. def ProduceList(request):
  36.     cate_id = request.POST.get('category_id', None)
  37.  
  38.     #获取排序的列和排序方式
  39.     sort=request.POST.get('sort', 'id')#排序的列默认是id
  40.     order=request.POST.get('order', 'asc')
  41.  
  42.     page=request.POST.get('page',1)#默认第一页
  43.     rows=request.POST.get('rows',10)#默认每页十条
  44.     proSet=Produce.objects.all()
  45.  
  46.     if cate_id is not None:
  47.         proSet=proSet.filter(category_id=cate_id)
  48.     if order != 'asc':
  49.         sort='-'+sort
  50.     proSet=proSet.order_by(sort)
  51.     paginator=Paginator(proSet,rows)
  52.  
  53.     pages=paginator.get_page(page)
  54.     tree=[]
  55.     #返回值中必须有total(总页数) rows(当前页的数据集)
  56.     for pro in pages:
  57.         p={}
  58.         p['id']=pro.id
  59.         p['name']=pro.name
  60.         p['price']=pro.price
  61.         p['create_date']=pro.create_date.strftime('%Y-%m-%d')
  62.         tree.append(p)
  63.     grid = {'total': paginator.count,
  64.             'rows':tree}
  65.     return HttpResponse(json.dumps(grid))
  66. @csrf_exempt
  67. def addProduce(request):
  68.     name=request.POST.get('name')
  69.     price=request.POST.get('price')
  70.     category=request.POST.get('cata')
  71.     create_date=request.POST.get('createDate')
  72.     pro=Produce()
  73.     pro.name =name
  74.     pro. price=price
  75.     pro. category_id=category
  76.     pro.create_date =create_date
  77.     pro.save()
  78.     data={'msg':'保存成功','state':'true'}
  79.     return HttpResponse(json.dumps(data))
  80. @csrf_exempt
  81. def delete(request):
  82.     pid=request.GET.get('pid')
  83.     Produce.objects.filter(pk=pid).delete()
  84.     data={'msg':'删除成功'}
  85.     return HttpResponse(json.dumps(data))

 

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号