EasyUI的使用

网页布局(easyui-layout)

网页布局的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body class="easyui-layout">
	<!-- 网站头部 -->
	<div data-options="region:'north',border:false" style="background:#006092;text-align:left;height:49px;padding-right:15px;">
      <h1 class="nav-title left">统一登录平台</h1>
      <ul class="nav-group left">
          <li id="nav-home">
              <i class="nav-icon iconfont ic-shouye"></i>
              <p class="nav-name">首页</p>
          </li>
          <li id="nav-empower">
              <i class="nav-icon iconfont ic-xitongquanxian" style="font-size:26px;"></i>
              <p class="nav-name">授权管理</p>
          </li>
          <li id="nav-platform">
              <i class="nav-icon iconfont ic-pingtaiapicanshu2" style="font-size:26px;"></i>
              <p class="nav-name">平台管理</p>
          </li>
      </ul>        
 	</div>
 	<!-- 网站左边伸缩面板 -->
 	<div data-options="region:'west',split:true,title:'West'" style="width:250px">west content</div>
 	<!-- 网站中心 -->
 	<div id="main" data-options="region:'center',title:'用户平台列表'">
 	</div>
</body>
属性名称 类型 描述 默认值
fit boolean 当设置为true时，就设置布局（layout）的尺寸适应它的父容器。当在’body’标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。 false
title string 布局面板（layout panel）的标题文本。 null
region string 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 true
split boolean 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 false
iconCls string 在面板（panel）头部显示一个图标的 CSS class。 null
href string 从远程站点加载数据的URL 。
collapsible boolean 定义是否显示可折叠按钮。 true

标签页或选项卡(easyui-tabs),放入网站中心布局

标签页或选项卡的html代码

1
2
3
4
5
<div id="maintab" class="easyui-tabs" data-options="fit:true,border:false,showHeader:false">
	<div title="用户平台列表" data-options="selected:true"></div>
	<div title="授权管理"></div>
	<div title="平台管理"></div>
</div>

js代码中是网页头的功能切换

1
2
3
4
5
6
7
8
9
10
11
12
$('#nav-home').on('click', function() {
  $('#maintab').tabs('select', '用户平台列表');
  $('#main').layout('panel', 'center').panel('setTitle', '用户平台列表');
});
$('#nav-empower').on('click', function() {
    $('#maintab').tabs('select', '授权管理');
    $('#main').layout('panel', 'center').panel('setTitle', '授权管理');
})
$('#nav-platform').click(function() {
    $('#maintab').tabs('select', '平台管理');
    $('#main').layout('panel', 'center').panel('setTitle', '平台管理');
})

部分属性的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
通过数组定义工具。
$('#tt').tabs({
	tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('add')
		}
	},{
		iconCls:'icon-save',
		handler:function(){
			alert('save')
		}
	}]
});

通过已有的 DOM 容器定义工具。
$('#tt').tabs({
	tools:'#tab-tools'
});
<div id="tab-tools">
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
属性名称 类型 描述 默认值
width number 标签页（Tabs）容器的宽度。 auto
height number 标签页（Tabs）容器的高度。 auto
tools array,selector 放置在头部的左侧或右侧的工具栏，可能的值：1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。2、选择器，指示包含工具的
。
 null
toolPosition string 工具栏位置。可能的值：‘left’、‘right’。该属性自版本 1.3.2 起可用。 right
tabPosition string 标签页（tab）位置。可能的值：‘top’、‘bottom’、‘left’、‘right’。该属性自版本 1.3.2 起可用。 top
headerWidth number 标签页（tab）头部宽度，只有当 tabPosition 设置为 ‘left’ 或 ‘right’ 时才有效。该属性自版本 1.3.2 起可用。 150
tabWidth number tab 条的宽度。该属性自版本 1.3.4 起可用。 auto
tabHeight number tab 条的高度。该属性自版本 1.3.4 起可用。 27
selected number 初始化选定的标签页索引。该属性自版本 1.3.5 起可用。 0
showHeader boolean 当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。 true
方法名称 类型 描述
select which 选择一个标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。

数据网格(easyui-datagrid),放入授权管理标签页

数据网格的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="logupMsg" class="easyui-datagrid" data-options="fit:true,striped:true,rownumbers:true,singleSelect:true,toolbar:'#toolbar',border:false,fitColumns:true,pagination:true">
    <thead>
        <tr>
            <th data-options="field:'userName',width:100,halign:'center',align:'center'">用户姓名</th>
            <th data-options="field:'userPhone',width:100,halign:'center',align:'center'">注册电话</th>
            <th data-options="field:'userPassword',width:100,align:'left',halign:'center'">注册密码</th>
            <th data-options="field:'userCompany',width:200,halign:'center',align:'left'">注册单位</th>
            <th data-options="field:'platformName',width:100,align:'left',halign:'center'">平台名称</th>
            <th data-options="field:'uloginName',width:100,align:'left',halign:'center'">平台登录账号</th>
            <th data-options="field:'uloginPassword',width:100,halign:'center'">平台登录密码</th>
            <th data-options="field:'userCreateTime',width:120,align:'center',halign:'center',align:'center'">注册时间</th>
            <th data-options="field:'userStatus',width:100,align:'left',halign:'center',align:'center',formatter:denglushouquan">授权状态</th>
            <th data-options="field:'userRemark',width:200,align:'left',halign:'center'">备注信息</th>
        </tr>
    </thead>
</table>

部分属性的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 	在 <div> 标签内定义工具栏：
$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
</div>
通过数组定义工具栏：
$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   代码实例：
$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
表属性名称 类型 描述 默认值
fitColumns boolean 设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。 false
toolbar array,selector 数据网格（datagrid）面板的头部工具栏。可能的值：1、数组，每个工具选项与链接按钮（linkbutton）一样。2、选择器，只是工具栏。 null
striped boolean 设置为 true，则把行条纹化。（即奇偶行使用不同背景色） false
method string 请求远程数据的方法（method）类型。 post
url string 从远程站点请求数据的 URL。 null
pagination boolean 设置为 true，则在数据网格（datagrid）底部显示分页工具栏。 false
rownumbers boolean 设置为 true，则显示带有行号的列。 false
singleSelect boolean 设置为 true，则只允许选中一行。 false
sortName string 定义可以排序的列。 null
sortOrder string 定义列的排序顺序，只能用 ‘asc’ 或 ‘desc’。 asc
列属性名称 类型 描述 默认值
field string 列的字段名。 undefined
rowspan number 指示一个单元格占据多少行。 undefined
colspan number 指示一个单元格占据多少列。 undefined
align string 指示如何对齐该列的数据，可以用 ‘left’、‘right’、‘center’。 undefined
halign string 指示如何对齐该列的头部，可能的值：‘left’、‘right’、‘center’。如果没有分配值，则头部对齐方式将与通过’align’属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。 undefined
sortable boolean 设置为 true，则允许该列被排序。 undefined
order string 默认的排序顺序，只能用 ‘asc’ 或 ‘desc’。该属性自版本 1.3.2 起可用。 undefined
resizable boolean 设置为 true，则允许该列可调整尺寸。 undefined
formatter function 单元格的格式化函数，需要三个参数：value：字段的值。rowData：行的记录数据。rowIndex：行的索引。 undefined
事件名称 参数 描述
onSelect rowIndex, rowData 当用户选中一行时触发，参数包括：rowIndex：选中行的索引，从 0 开始,rowData：选中行对应的记录
onSortColumn sort, order 当用户对一列进行排序时触发，参数包括：sort：排序的列的字段名,order：排序的列的顺序
onCheck rowIndex,rowData 当用户勾选一行时触发，参数包括：rowIndex：勾选行的索引，从 0 开始,rowData：勾选行对应的记录
方法名称 参数 描述
loadData data 加载本地数据，旧的行会被移除。
reload param 重新加载行，就像 load 方法一样，但是保持在当前页。
loading none 显示正在加载状态。
loaded none 隐藏正在加载状态。
getSelected none 返回第一个选中的行或者 null。
getSelections none 返回所有选中的行，当没有选中的记录时，将返回空数组。