django easyui layout布局

最新推荐文章于 2024-05-30 09:00:00 发布

威城

最新推荐文章于 2024-05-30 09:00:00 发布

阅读量796

点赞数

分类专栏： python 文章标签： django

本文链接：https://blog.csdn.net/yytewfw/article/details/78563201

版权

python 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

威城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
django easyui layout布局

EasyUI每个组件的属性，方法和事件。用户可以很容易地扩展他们。属性所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。事件所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。方法调用方法的语法：$(‘selector’).plugin(‘me
复制链接

扫一扫

专栏目录