ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

简介:

系列目录

前言

这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码。

自由桌面:用户可以随意增删改桌面的布局、个数(只留自己需要看到的数据),这次纯属EasyUI前端

当然您抛弃EasyUI你同样也能为你的系统桌面定制有趣自由布局

结果预览

 

实现思路

本次实现主要用到EasyUI一个非常不常用的组件Draggable(拖拽)

虽然图显示简单,但是实际做起来非常的耗时,有兴趣的朋友在尾部下来看看拖拽和实现,下面是实现思路和功能:

  • 拖拽之后DIV中保存了DIV的位置
  • 部件筛选是以Css 的Display属性来控制的
  • 部件复位是初始化全部部件
  • 保存是保存整个范围内的Div内容来保存到数据库

实现代码

整个拖拽功能的代码如下(展开查看)

  EasyUI自由桌面

里面的代码其实很多小技巧

1.选中的将变成最顶层

复制代码
  $(".cc div").mousedown(function () {
            $(".cc div").css("z-index", "0").removeClass("alphac");
            $(this).css("z-index", "1").addClass("alphac");
        }).mouseup(function () {
            $(".cc div").removeClass("alphac");
        });
复制代码

2.初始化筛选

复制代码
for (var i = 1; i < 10; i++) {
            if ($("#dd" + i).is(":hidden")) {
                $("#cdd" + i).removeAttr("checked");
            }
            else {

                $("#cdd" + i).attr("checked", "true");
            }
        }
复制代码

3.删除部件

  $(".cc .panel-tool-close").click(function () {
            $(this).parent().parent().parent().hide();

            $.messageBox5s('@Resource.Tip', '您可以[部件筛选]中让他重新显示!');
        });

4.动态设置宽度

复制代码
  function promptValue(id) {
        $.messager.prompt('设置部件宽度', '请输入宽度,格式:<font color="red">50%</font>或<font color="red">500px</font>', function (r) {
            if (r) {
                $("#" + id).width(r);
            }
        });
    }
复制代码

5.布局

复制代码
 function SetWebpartLayout()
    {
        var _windowWidth = 1280;
        var _windowHeight = 800;
        $("#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9").width(_windowWidth / 3 - 6).height(_windowHeight / 3 - 16);
        var ddw = $("#dd1").width();
        var ddh = $("#dd1").height()
        $("#dd1,#dd4,#dd7").css("left", 0);
        $("#dd2,#dd5,#dd8").css("left", ddw + 7);
        $("#dd3,#dd6,#dd9").css("left", ddw * 2 + 14);
        $("#dd1,#dd2,#dd3").css("top", 0);
        $("#dd4,#dd5,#dd6").css("top", ddh+7);
        $("#dd7,#dd8,#dd9").css("top", ddh * 2 + 17);
        $(".ddcontent").height(ddh-40)
    }
复制代码

布局,我写了1280*800,你可以根据你系统自行计算浏览器的宽高来自适应

总结

大概说到这里,虽然是基于EasyUI的,但是其他UI组件也都有拖拽,或者自己手写拖拽,或者下载第三方的拖拽,都可以为你的系统实现自由布局的功能

下载代码一看便明白其中一些实现方式

您也可以在每个部件加点图标美化一下

示例代码下载:链接:http://pan.baidu.com/s/1pLtUUDl 密码:dlio

---------------------------------------------------------------------------------

虽然发布了代码,但是后来觉得丑丑的,最后花了一天的时间改了前端的布局方式,参考图片:

 本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/6014996.html,如需转载请自行联系原作者

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
29 7
|
1月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
40 0
|
2月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
38 0
|
2月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
2月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
96 0
|
5月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
163 0
|
5月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
72 0
|
5月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
286 5
|
5月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
157 0