学习easyui主要是记忆属性。
引入文件
<link rel="stylesheet" type="text/css" href="<%=basePath %>/static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>/static/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath %>/static/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/static/js/easyui/jquery.easyui.min.js"></script>
Layout
东西南北四个模块要分别是一个小盒子，统一放在一个大盒子里。设置宽高使用内联样式。
<body class="easyui-layout">
<div data-options="region:'north',title:'北丐',split:true" style="height: 100px"></div>
<div data-options="region:'south',title:'南帝',noheader:true,split:true" style="height: 60px">
<div data-options="region:'west',iconCls:'icon-world',title:'菜单栏',split:true" style="width: 150px">
<div data-options="region:'east',title:'东邪',split:true" style="width: 150px"></div>
<div data-options="region:'center',title:'中神通',split:true">
</body>
属性在data-options中设置
| 属性名 |
属性类型 |
描述 |
| split |
boolean |
是否可改变局部面板的大小 |
| region |
string |
规定面板是东面板还是西面板 |
| title |
string |
局部面板的标题 |
Tab选项卡
<div id="tb" class="easyui-tabs" data-options="fit:true">
</div>
属性在data-options中设置
| 属性名 |
属性类型 |
描述 |
| fit |
boolean |
选项卡铺满它所属的容器 |
| inconCls |
string |
设置图标 |
| title |
string |
选项卡的标题 |
| href |
string |
将远程数据显示到面板（写URL） |
| 方法名 |
方法参数 |
描述 |
| add |
好多个options |
添加新的选项卡 |
| exist |
选项卡面板的标题 |
检测选项卡是否存在 |
| select |
选项卡面板的标题 |
选中该选项卡 |
var flag = $("#tb").tabs('exists',node.text);
if(!flag && node.url!=null){//选项卡不存在
$("#tb").tabs('add',{
title:node.text,
iconCls:node.iconCls,
closable:true,
href:"<%=basePath %>/pages/"+node.url
});
}else{//选项卡存在，则选中
$("#tb").tabs('select',node.text);
}
Tree 树
<ul class="easyui-tree" data-options="lines:true">
<li data-options="iconCls:'icon-system'">
<span>导航栏管理</span>
<ul>
<li data-options="iconCls:'icon-ok'"><span>横向导航栏</span></li>
</ul>
<ul>
<li data-options="iconCls:'icon-user'"><span>竖向导航栏</span></li>
</ul>
</li>
<li><span>轮播图管理</span></li>
<li><span>商品轮播管理</span></li>
<li><span>限时特卖</span></li>
</ul>
DataGrid数据表格
datagrid代表整个表格，表格里有url、columns是datagrid的属性
<table id="dg"></table>
$("#dg").datagrid({
url:"<%=basePath %>/getHxMenus.do",
columns:[
[
{checkbox:true},
{field:'id',title:'主键',width:150,align:'center',sortable:true},
{field:'title',title:'菜单名',width:150},
{field:'url',title:'跳转链接',width:150},
{field:'updateTime',title:'更新时间',width:200}
]
],
}）
| 属性名 |
属性类型 |
描述 |
| columns |
array |
列属性，里面存放表格列的子属性 |
| 【列的子属性】field |
string |
列字段名称 |
| 【列的子属性】checkbox |
boolean |
添加复选框 |
| 【列的子属性】rownumbers |
boolean |
显示行号 |
| 【☆】【列的子属性】sortable |
boolean |
是否可以排序，默认false |
| toolbar |
array |
添加工具栏，里面存放好多对象的子属性，对象和对象之间以'-添加分割线' |
| 【工具栏子属性】handler |
function |
点击工具栏发生的事件 |
| striped |
boolean |
斑马线效果 |
| rowStyler |
函数（Index,row） |
获取所有行以实现行样式（如隔行变色） |
| 【☆】sortName |
string |
按照...将数据排序 |
| 【☆】remoteSort |
boolean |
是否可以从服务器远程排序,默认true |
| pagination |
boolean |
是否显示分页工具栏 |
网友评论