本文详细介绍EasyUI框架的各种布局及组件使用方法，包括layout布局、accordion折叠面板、tabs选项卡、messager消息框、menubutton菜单按钮、datagrid数据网格及combobox组合框等。并提供了丰富的代码实例。
使用前，需要先导入必要的样式库和函数库
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>一、layout布局的使用
easyui通过加载class的名字来进行样式的修订，layout可以将一个页面布局成五个部分--东南西北中，其中“中部”为必须，其他部分任意。
<body class="easyui-layout">
<!-- 使用div元素描述每个区域 -->
<div title="xxx管理系统" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">西部区域</div>
<div data-options="region:'center'">中心区域</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>二、accordion折叠面板的使用
折叠面板一般放在左侧分割菜单。
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作accordion折叠面板
fit:true---自适应，填充父容器
-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
<div data-options="iconCls:'icon-save'" title="面板三">3333</div>
</div>
</div>选项卡面板一般放在中部区域，进行点击某个菜单后的内容显示，点击一次，弹出一个选项卡面板。
<div data-options="region:'center'">
<!-- 制作tabs选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<div data-options="closable:true" title="面板一">1111</div>
<div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
<div data-options="iconCls:'icon-save'" title="面板三">3333</div>
</div>
</div>这时需要控制tabs选项卡，点击菜单时，如果该菜单的选项卡已经点开，则选中状态，如果没有点开，则点开一个新的tabs选项卡。
<div class="easyui-accordion" data-options="fit:true">
<div data-options="iconCls:'icon-cut'" title="面板一">
<a id="but1" class="easyui-linkbutton">打开一个新的选项卡</a>
</div>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
var e = $("#mytabs").tabs("exists",'系统管理');
if(e){
$("#mytabs").tabs("select",'系统管理');
}else{
//调用tabs对象的add方法动态添加一个选项卡
$("#mytabs").tabs("add",{
title:"系统管理",
iconCls:"icon-edit",
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
})
}
});
});
</script>
</div>
</div>
使用之前为了让弹窗出现中文效果，需要先将easyui中文包导入
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>1、alert方法提示框，第一个参数是标题，第二个为内容，第三个为类型。
//alert方法的提示框
$.messager.alert("title","内容","info");2、confirm方法确认框
//confirm 方法的确认框
$.messager.confirm("提示信息","您确定要删除吗？",function(r){
alert(r);
}) 3、show右下角信息展示
$.messager.show({
title:'欢迎信息',
msg:'欢迎您，XXX',
timeout:5000,
showType:'slide'
}); 五、menubutton的使用
先将元素的class写为class="easyui-menubutton" ，然后data-options中有属性menu：#id，这个id就是该按钮的下拉按钮
<body >
<a class="easyui-menubutton" data-options="iconCls:'icon-help',menu:'#mm'">控制面板</a>
<div id="mm">
<div data-options="iconCls:'icon-edit'">修改密码</div>
<div>注销用户</div>
<!-- 分割线 -->
<div class="menu-sep"></div>
<div>退出登录</div>
</div>
</body>1、创建一个带有id值的表格
<table id="mytab"></table>2、datagrid中的属性也是json格式。使用JS动态载入表格数据，发送ajax请求，field的值就是返回json对应数据位置的名字。checkbox：true属性是将该列的数据内容显示为多选框，一般用于id列。
<script type="text/javascript">
//页面加载完成后，创建数据表格datagrid
$(function(){
$("#mytab").datagrid({
columns:[[
{title:"编号",field:"id",checkbox:true},
{title:"姓名",field:"name"},
{title:"年龄",field:"age"},
{title:"地址",field:"address"}
]],
//指定数据表格发送ajax请求
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
/* singleSelect:true, */
//定义工具栏
toolbar:[
{text:"保存",iconCls:"icon-add",handler:function(){
alert("123");
}},
{text:"查询",iconCls:"icon-search"},
{text:"删除",iconCls:"icon-remove"},
{text:"修改",iconCls:"icon-edit"}
],
//显示分页
pagination:true
});
});
</script> <script type="text/javascript">
//页面加载完成后，创建数据表格datagrid
$(function(){
var myIndex = -1; //创建一个全局索引，用来作为进行编辑行的标志
$("#mytab").datagrid({
columns:[[
{width:120,title:"编号",field:"id",checkbox:true},
{width:120,title:"姓名",field:"name",editor:{
type:"validatebox",
option:{}
}},
{width:120,title:"年龄",field:"age",editor:{
type:"numberbox",
option:{}
}},
{width:120,title:"地址",field:"address",editor:{
type:"validatebox",
option:{}
}}
]],
//指定数据表格发送ajax请求
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
/* singleSelect:true, */
//定义工具栏
toolbar:[
{text:"保存",iconCls:"icon-add",handler:function(){
$("#mytab").datagrid("endEdit",myIndex);
}},
{text:"新增",iconCls:"icon-search",handler:function(){
$("#mytab").datagrid("insertRow",{
index:0,//在第一行插入数据
row:{}, //插入一行空的数据
});
$("#mytab").datagrid("beginEdit",0); //插入后就可以编辑
myIndex = 0;
}},
{text:"删除",iconCls:"icon-remove",handler:function(){
var rows = $("#mytab").datagrid("getSelections");
if (rows.length == 1) {
row = rows[0];
//获取当前行的下标赋给myIndex
myIndex = $("#mytab").datagrid("getRowIndex",row);
}
$("#mytab").datagrid("deleteRow",myIndex);
}},
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows = $("#mytab").datagrid("getSelections");
if (rows.length == 1) {
row = rows[0];
myIndex = $("#mytab").datagrid("getRowIndex",row);
}
$("#mytab").datagrid("beginEdit",myIndex);
}}
],
//显示分页
pagination:true,
//监听编辑后的操作
onAfterEdit:function(index,data,change){
}
});
});
</script>用到了很多datagrid的方法，方法具体的使用方法可查看文档，这里写不下去了。
这里创建一个全局变量myIndex的作用是防止每次的增删查改都在第一行数据。
七、combobox的使用
这个控件类似于select标签，valueField:'id'是实际值，而textField:'name'是显示值，editable:false是不能自己手动输入数据。
<body>
<input class="easyui-combobox"
data-options="valueField:'id',
textField:'name',
url:'${pageContext.request.contextPath }/json/combobox.json',
editable:false">
</body>
扫一扫
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
