EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展他们。
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如,对话框属性定义在jQuery.fn.dialog.defaults里面。
事件
所有的事件(回调函数)也都定义在jQuery.fn.{plugin}.defaults里面。
方法
调用方法的语法:$(‘selector’).plugin(‘method’, parameter);
layout布局
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
这只是一个实例,做了一个西,南,中,的一个布局。div标签里的属性region定义的方向,title我就不用说了,
<div data-options="region:'north',title:'工具栏',split:true" style="height:100px;"><h1 align="center">商品管理</h1></div>
<div data-options="region:'west',title:'商品分类',split:true" style="width:300px;">
<ul id="tree">
</ul>
</div>
<div data-options="region:'center',title:'显示框'" style="padding:5px;background:#eee;"></div>
当然,需要实现这个还需要,easyui的支持,这个都可以去网上下载。
导入
<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>
<script>
效果如下,整个布局为这样
树状菜单
这个是在view,py中的代码,树状菜单
from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.core import serializers
import json
from goods.models import *
# Create your views here.
@csrf_exempt
def tree(request):
try:
id = int(request.POST['id'])
treeDict = []
data = Category.objects.filter(prrent=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(prrent=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')
还能做一个这样效果的弹出框
最上面的图商品菜单右边有个刷新图标和添加图标,点击刷新,会从数据库里查询出新的菜单,树状菜单就会刷新
点击添加就会弹出上面的添加商品框
具体的注释在代码中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
$(function(){
//添加tree
$('#tree').tree({
url:'/goods/tree'
});
$('body').layout('panel','west').panel({
tools:[
{
//刷新按钮
iconCls:'icon-reload',
handler:function(){
$('#tree').tree('reload')
}
},
{
//添加弹出表单
iconCls: 'icon-add',
handler: function () {
$('#tree_dialong').dialog('open')
}
}
]
}),
$('#tree_dialong').dialog({
title:"商品类别表单",
width:400,
height:200,
closed:true,
model:true,
buttons:[
{
text:"保存",
iconCls:'icon-save',
handler:function () {
$('#tree_dialong').dialog('close')
}
},
{
text:"取消",
iconCls:'icon-cancel',
handler:function () {
$('#tree_dialong').dialog('close')
}
}
]
})
})
</script>
</head>
<body>
<div id="tree_dialong" >
<form></form>
</div>
</body>
</html>