一个好用简单的布局空间EasyUI
时间： 18:07:57
&&&& 阅读：93
&&&& 评论：
&&&& 收藏：0
标签：之前项目中都是前端来新写的页面，对于很多后台管理系统来说，新写页面其实比较麻烦。
最近看到一款还是不错的开源页面框架EasyUi
这是他们的主页，他们的空间和Windows的操作界面很像，但是厉害的是，他们是在浏览器中实现的，很多效果都非常实用，比如树状结构，表格数据，拖拽等等
&link rel="stylesheet" type="text/css" href="&%=path%&/resources/easyui/themes/default/easyui.css"& &link rel="stylesheet" type="text/css" href="&%=path%&/resources/easyui/themes/icon.css"&
&script type="text/javascript" src="&%=path%&/resources/easyui/jquery.min.js"&&/script&
&script type="text/javascript" src="&%=path%&/resources/easyui/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="&%=path%&/resources/easyui/locale/easyui-lang-zh_CN.js"&&/script&
导入它需要的css和js文件
然后打开你需要的demo，然后把代码复制进去，主要改的是界面上面的样式，你需要怎么样的布局基本上面都能实现。
然后主要的是标签中的data数据来源，其中的数据来源都是以json格式的，所以后台代码中需要返回json格式的url路径。
网上很多搜索的资源都是可以搜到关于它的控件如何使用的，官方的API也很明确。而且json格式可以兼容很多语言写的后台。
基本上你要的功能都能实现，有一定基础的同学还可以修改里面的css换一些图片，js等。
除了难看了一些，其他都可以，如果单纯做一些小的项目还是可以的。标签：
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
代码如下：& & & & &div class="easyui-layout"data-options="fit:true"&& & & & & & &div data-options="region:'north'" style="height:100px"&& & & & & & & & &table id="part1"&&/table&& & & & & & &/div&& & & & & & &div data-options="region:'center'"&& & & & & & & & &table id="part2"&&/table&& & & & & & &/div&& & & & &/div&2：基于body标签的easyui-layout当浏览器窗口大小改变时,easyui-layout可以根据窗口的大小来调整自己的大小.基于div标签的easyui-layout如果想拥有上述功能必须设置easyui-layout的属性fit等于true.情形1：& & & & &body class="easyui-layout"&& & & & & & &div data-options="region:'north'" style="height:100px"&& & & & & & & & &table id="part1"&&/table&& & & & & & &/div&& & & & & & &div data-options="region:'center'"&& & & & & & & & &table id="part2"&&/table&& & & & & & &/div&& & & & &/div&情形2：& & & & &div class="easyui-layout"data-options="fit:true"&& & & & & & &div data-options="region:'north'" style="height:100px"&& & & & & & & & &table id="part1"&&/table&& & & & & & &/div&& & & & & & &div data-options="region:'center'"&& & & & & & & & &table id="part2"&&/table&& & & & & & &/div&& & & & &/div&3：在html中定义easyui时，下面两种写法是一样的。即easyui控件的属性可以写在dataoptions属性里，也可以把这些属性写到标签上。写法1：& & & & &div class="easyui-layout"data-options="fit:true"&& & & & & & &div data-options="region:'north'" style="height:100px"&& & & & & & & & &table id="part1"&&/table&& & & & & & &/div&& & & & & & &div data-options="region:'center'"&& & & & & & & & &table id="part2"&&/table&& & & & & & &/div&& & & & &/div&写法2：&div class="easyui-layout"fit="true"& &div region="north"style="height:100"&
&table id="part1"&&/table& &/div& &div region="center"&& & & & & & &table id="part2"&&/table& &/div&
阅读(26139)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'easyui-layout 布局自适应',
blogAbstract:'最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问。其中一个就是datagrid不能很好的布。想了好多办法都有局限。最后想到会不会是布局的问题，经过实，最后问题解。1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他div的话，datagrid就不能很好的自动适应窗体。如查datagrid有分页控件，分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好的解决自适应问题。代码如下：& & & & &div class=\"easyui-layout\"',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:8,
permalink:'blog/static/',
commentCount:3,
mainCommentCount:2,
recommendCount:3,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}其他回答(3)
还是不要用Iframe,反正我没发现他有什么优势
园豆：23610
园豆：23610
看看 jquery 的 UI插件，大部分都是用 div，样式、js效果 都好控制。
收获园豆：2
园豆：2376
园豆：2376
iframe曾经是很让人诟病的。在早期，这个是MS提出来的元素，仅在IE中提供支持，那时Netscape的Navigator浏览器是不支持的。
现在，市面上有很多浏览器，除了IE外，还有FireFox、Google&Chrome、Opera、Safari，而Netscape没落（被收购）了，Navigator也不见了，但iframe继续被IE支持，还被W3C收录，还被IE外的所有浏览器支持，这个现象，应该能给你提供参考依据。
至于frameset，这个东东倒是一直被所有浏览器支持，因为也是W3C的东东，个人以为，非必要，还是不要使用，因为FRAMESEET破坏了页面视觉的整体性，而IFRAME却在视觉角度给人是一体的。
事实上，现在很多技术都通过iframe来实现，比如某些HTML可视化编辑器，比如某些tab样式的UI设计等。
园豆：5762
&&&您需要以后才能回答，未注册用户请先。现在在做管理系统的布局想用到easyUI，还需要做出响应式，有谁能告诉我easyUI响应式怎么做？ - 知乎3被浏览1499分享邀请回答1添加评论分享收藏感谢收起样式布局分享-基于jQuery EasyUI的后台管理系统 | 劼哥舍(＞﹏＜)样式布局分享-基于jQuery EasyUI的后台管理系统Oct 27, 2014 |
Hits最近做了一个简单的后台管理系统，其中用到了 jQuery EasyUI 框架，在此把首页布局代码分享给大家，希望大家可以用得上，具体效果如下图。
本文最初发表于CSDN博客，现已迁到 ，感谢CSDN。 分类 标签}