easyui的简单控件使用

来源：互联网发布：dnf战斗力查询软件编辑：程序博客网时间：2024/05/18 03:46

使用前，需要先导入必要的样式库和函数库

<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>

三、tabs选项卡面板的使用

选项卡面板一般放在中部区域，进行点击某个菜单后的内容显示，点击一次，弹出一个选项卡面板。

<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>

四、messager的使用

使用之前为了让弹窗出现中文效果，需要先将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>

六、datagird的使用

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>

3、将datagrid表格中的数据动态修改，不好解释，直接上代码模板

<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];//获取当前行的下标赋给myIndexmyIndex = $("#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>

阅读全文

0 0