一、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路径注意顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
</html>写入index函数
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'manager.html')写入总路径
from django.contrib import admin
from django.urls import path
from wd_user.views import index
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
]
配置静态资源路径
进入浏览器后显示效果展示
区域面板属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 布局面板标题文本。 | null |
| region | string | 定义布局面板位置，可用的值有：north, south, east, west, center。 | |
| border | boolean | 为true时显示布局面板边框。 | true |
| split | boolean | 为true时用户可以通过分割栏改变面板大小。 | false |
| iconCls | string | 一个包含图标的CSS类ID，该图标将会显示到面板标题上。 | null |
| href | string | 用于读取远程站点数据的URL链接 | null |
| collapsible | boolean | 定义是否显示折叠按钮。（该属性自1.3.3版开始可用） | true |
| minWidth | number | 最小面板宽度。（该属性自1.3.3版开始可用） | 10 |
| minHeight | number | 最小面板高度。（该属性自1.3.3版开始可用） | 10 |
| maxWidth | number | 最大面板宽度。（该属性自1.3.3版开始可用） | 10000 |
| maxHeight | number | 最大面板高度。（该属性自1.3.3版开始可用） | 10000 |
创建数据库表模板
from django.db import models
# Create your models here.
class Category(models.Model):
#类别模型
name=models.CharField(max_length=10,null=False)
parent=models.ForeignKey('Category',on_delete=None,null=True)
class Produce(models.Model):
#产品
name=models.CharField(max_length=20)
price=models.FloatField()
create_date=models.DateTimeField()
category=models.ForeignKey('Category',on_delete=None,null=True)
执行shell命令创建表然后在表中添加数据
接下来为页面嘴边创建一个树状菜单
修改html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
//创建一个树状菜单
$('#tt').tree({
url:'catetree'
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'',split:true,collapsible:false" style="height:100px;">
<h1 STYLE="text-align: center">欢迎访问jQuery easyUI</h1>
</div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;">
<ul id="tt">
</ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
</html>填写树状函数
from django.http import HttpResponse
from django.shortcuts import render
# Create your views here.
from django.views.decorators.csrf import csrf_exempt
import json
from wd_user.models import Category
def index(request):
return render(request,'manager.html')
#获取类别表 组装成一个tree结构
@csrf_exempt
def catetree(request):
#每次请求都是某一个类别下的分类
tree=[]
#获取请求id,如果没有默认为none
id=request.POST.get('id',None)
#查询
#查询所有parent_id等于父集id的所有产品
category=Category.objects.filter(parent_id=id).all()
for cate in category:
#每一个类别都是一个字典
ca={}
ca['id']=cate.id
ca['text']=cate.name
ca['state']='closed'
tree.append(ca)
#将返回数据改成json格式
return HttpResponse(json.dumps(tree))填写路径urls.py
进入浏览器效果显示
2.获取各类名下的产品
更改html
添加函数
from wd_user.models import Category, Produce
@csrf_exempt
def ProduceList(request):
#请求获取某个类别下的所有产品
proSet=Produce.objects.all()
tree=[]
for pro in proSet:
p={}
p['id']=pro.id
p['name']=pro.name
p['price']=pro.price
p['create_date']=pro.create_date.strftime('%Y-%m-%d')
tree.append(p)
return HttpResponse(json.dumps(tree))配置路径
from django.contrib import admin
from django.urls import path
from wd_user.views import *
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
path('catetree',catetree),
path('ProduceList',ProduceList)
]
浏览器效果
二、分页
1.全部产品分页
步骤:<1>获取第几页多少条 <2>做分页 <3>获取第几页 <4>设置一个total 和rows
更改html
更改函数
from django.core.paginator import Paginator
@csrf_exempt
def ProduceList(request):
page=request.POST.get('page',1)#默认第一页
rows=request.POST.get('rows',10)#默认每页十条
#请求获取某个类别下的所有产品
proSet=Produce.objects.all().order_by()
#1创建一个分页器 1被分页的集合 2每页多少条数据
paginator=Paginator(proSet,rows)
#2.获取第几页的数据
pages=paginator.get_page(page)
tree=[]
#返回值中必须有total(总页数) rows(当前页的数据集)
for pro in pages:
p={}
p['id']=pro.id
p['name']=pro.name
p['price']=pro.price
p['create_date']=pro.create_date.strftime('%Y-%m-%d')
tree.append(p)
grid = {'total': paginator.count,
'rows':tree}
return HttpResponse(json.dumps(grid))
实现效果
2.添加点击事件出来相应的产品
更改html
更改函数
效果展示
三、排序
| sort | param | 排序datagrid表格。（该方法自1.3.6版开始可用） 代码示例： |
| sortable | boolean | 如果为true，则允许列使用排序。 |
让价格和名字可以排序
更改html
更改函数
实现效果 点击价格 名字 即可排序
四、按钮
| toolbar | array,selector | 顶部工具栏的DataGrid面板。可能的值： 1) 一个数组，每个工具属性都和linkbutton一样。 2) 选择器指定的工具栏。 在<div>标签上定义工具栏：
通过数组定义工具栏： |
更改html下的datagrid
添加按钮
五、form表单
点击添加出现窗口
$().datagrid.('reload’)重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。
data函数
pid
eval
success
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
//创建一个树状菜单
$('#tt').tree({
url:'catetree',
onClick:function(node){
//点击后重新加载构造datagrid
$('#dg').datagrid({
queryParams:{
'category_id':node.id
}
})
}
});
$('#dg').datagrid({
url:'ProduceList',
//确认启动分页
pagination:true,
//分页单
pageList:[5,10,15],
columns:[[
{field:'id',title:'编号',width:100},
{field:'name',title:'名字',width:100,sortable:true},
{field:'price',title:'价格',width:100,align:'right',sortable:true} ,
{field:'create_date',title:'发布时间',width:100,align:'right'}
]],
toolbar: [
{
iconCls: 'icon-add',
text:'添加',
handler: function(){
var node=$("#tt").tree("getSelected");
if(node){
//取消异步请求
{# $.ajaxSetup({#}
{# async:false#}
{# });#}
$('#Category').combotree("tree").tree({
onLoadSuccess:function(node,date){
$('#Category').combotree("tree").tree("expandAll")
}
});
//开启异步请求
{# $.ajaxSetup({#}
{# async:true#}
{# });#}
//将选中的类别的ID绑定到下拉列表中
$('#ff').form("load",{"categoryid":node.id})
}
$('#newPro').dialog('open');
}
},'-',{
iconCls: 'icon-edit',
text:'编辑',
handler: function(){}
},'-',{
iconCls: 'icon-help',
text:'帮助',
handler: function(){}
},'-',{
iconCls: 'icon-remove',
text:'删除',
handler: function(){
var row=$('#dg').datagrid("getSelected");
//alert(row.id);
$.get('delete','pid='+row.id,function (data) {
data=eval('('+data+')');
$.messager.show({
msg:data.msg
});
$('#dg').datagrid('reload')
})
}
}],
//只能选中一行
singleSelect:true
});
//窗口设置
$('#newPro').dialog({
title: '添加产品',
width: 400,
height: 200,
closed: true,
cache: false,
modal: true,
//为窗口添加保存和取消按钮
buttons:[
{
text:'保存',
iconCls:'icon-save',
handler:function(){
$('#ff').submit();//执行submit事件
$('#dg').datagrid("reload")//重载表单dg
}
},{
text:'取消',
iconCls:'icon-cancel',
handler:function(){
$('#newPro').window('close')
}}]
});
//定义下拉列表框在什么时候加载
$('#Category').combotree({
url: '/catetree',
required: true
});
$('#ff').form({
url:'addProduce',
success:function (add) {
add=eval('('+add+')');
$.messager.show({
title:'商品保存信息',
msg:add.msg,
timeout:5000,
showType:'slide'
})
}
})
});
//设置时间格式
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;
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'',split:true,collapsible:false" style="height:100px;">
<h1 STYLE="text-align: center">欢迎访问jQuery easyUI</h1>
</div>
<div data-options="region:'west',title:'菜单',split:true" style="width:100px;">
<ul id="tt">
</ul>
</div>
<div data-options="region:'center',title:'产品列表'" style="padding:5px;background:#eee;">
<table id="dg"></table>
</div>
<div id="newPro">
<form id="ff" method="post" action="/addProduce">
<div>
<label for="name">产品名称:</label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</div>
<div>
<label >价格:</label>
<input name="price" type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
</div>
<div>
<label >类别:</label>
<select name="cata" id="Category" class="easyui-combotree" style="width:200px;"data-options="required:true"></select>
</div>
<div>
<label>发布时间:</label>
<input name="createDate" class="easyui-datetimebox" data-options="formatter:myformatter ,required:true,showSeconds:false" style="width:150px">
</div>
</form>
</div>
</body>
</html>import datetime
from django.http import HttpResponse
from django.shortcuts import render
from django.core.paginator import Paginator
# Create your views here.
from django.views.decorators.csrf import csrf_exempt
import json
from wd_user.models import Category, Produce
def index(request):
return render(request,'manager.html')
#获取类别表 组装成一个tree结构
@csrf_exempt
def catetree(request):
#每次请求都是某一个类别下的分类
tree=[]
#获取请求id,如果没有默认为none
id=request.POST.get('id',None)
#查询
#查询所有parent_id等于父集id的所有产品
category=Category.objects.filter(parent_id=id).all()
for cate in category:
#每一个类别都是一个字典
ca={}
ca['id']=cate.id
ca['text']=cate.name
ca['state']='closed'
tree.append(ca)
#将返回数据改成json格式
return HttpResponse(json.dumps(tree))
@csrf_exempt
def ProduceList(request):
cate_id = request.POST.get('category_id', None)
#获取排序的列和排序方式
sort=request.POST.get('sort', 'id')#排序的列默认是id
order=request.POST.get('order', 'asc')
page=request.POST.get('page',1)#默认第一页
rows=request.POST.get('rows',10)#默认每页十条
proSet=Produce.objects.all()
if cate_id is not None:
proSet=proSet.filter(category_id=cate_id)
if order != 'asc':
sort='-'+sort
proSet=proSet.order_by(sort)
paginator=Paginator(proSet,rows)
pages=paginator.get_page(page)
tree=[]
#返回值中必须有total(总页数) rows(当前页的数据集)
for pro in pages:
p={}
p['id']=pro.id
p['name']=pro.name
p['price']=pro.price
p['create_date']=pro.create_date.strftime('%Y-%m-%d')
tree.append(p)
grid = {'total': paginator.count,
'rows':tree}
return HttpResponse(json.dumps(grid))
@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))
@csrf_exempt
def delete(request):
pid=request.GET.get('pid')
Produce.objects.filter(pk=pid).delete()
data={'msg':'删除成功'}
return HttpResponse(json.dumps(data))
扫一扫
1809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
