ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: