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

2017-06-07 1203

版权

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

简介：

系列目录

前言

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

自由桌面：用户可以随意增删改桌面的布局、个数（只留自己需要看到的数据），这次纯属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，如需转载请自行联系原作者