easyui的简单控件使用

淡淡的烟草味﹌ 2022-06-10 02:47 520阅读 0赞

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

  1. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
  3. <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
  4. <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

一、layout布局的使用

easyui通过加载class的名字来进行样式的修订，layout可以将一个页面布局成五个部分—东南西北中，其中“中部”为必须，其他部分任意。

  1. <body class="easyui-layout">
  2.     <!-- 使用div元素描述每个区域 -->
  3.     <div title="xxx管理系统" style="height:100px" data-options="region:'north'">北部区域</div>
  4.     <div title="系统菜单" style="width:200px" data-options="region:'west'">西部区域</div>
  5.     <div data-options="region:'center'">中心区域</div>
  6.     <div style="width:100px" data-options="region:'east'">东部区域</div>
  7.     <div style="height: 50px" data-options="region:'south'">南部区域</div>
  8. </body>

二、accordion折叠面板的使用

折叠面板一般放在左侧分割菜单。

  1. <div title="系统菜单" style="width:200px" data-options="region:'west'">
  2.         <!-- 制作accordion折叠面板
  3.             fit:true---自适应，填充父容器
  4.          -->
  5.          <div class="easyui-accordion" data-options="fit:true">
  6.              <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
  7.              <div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
  8.              <div data-options="iconCls:'icon-save'" title="面板三">3333</div>
  9.          </div>
  10.     </div>

三、tabs选项卡面板的使用

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

  1. <div data-options="region:'center'">
  2.         <!-- 制作tabs选项卡面板 -->
  3.          <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  4.              <div data-options="closable:true" title="面板一">1111</div>
  5.              <div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
  6.              <div data-options="iconCls:'icon-save'" title="面板三">3333</div>
  7.          </div>
  8.     </div>

这时需要控制tabs选项卡，点击菜单时，如果该菜单的选项卡已经点开，则选中状态，如果没有点开，则点开一个新的tabs选项卡。

  1. <div class="easyui-accordion" data-options="fit:true">
  2.              <div data-options="iconCls:'icon-cut'" title="面板一">
  3.                  <a id="but1" class="easyui-linkbutton">打开一个新的选项卡</a>
  4.              </div>
  5.              <script type="text/javascript">
  6.                  $(function(){
  7.                      $("#but1").click(function(){
  9.                          var e = $("#mytabs").tabs("exists",'系统管理');
  10.                          if(e){
  11.                              $("#mytabs").tabs("select",'系统管理');
  12.                          }else{
  13.                              //调用tabs对象的add方法动态添加一个选项卡
  14.                              $("#mytabs").tabs("add",{
  15.                                  title:"系统管理",
  16.                                  iconCls:"icon-edit",
  17.                                  closable:true,
  18.                                  content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
  19.                              })
  20.                          }                           
  22.                      });                             
  23.                  });                                 
  24.              </script>                                                                            
  25.          </div>
  26.                </div>

四、messager的使用

使用之前为了让弹窗出现中文效果，需要先将easyui中文包导入

  1. <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

1、alert方法提示框，第一个参数是标题，第二个为内容，第三个为类型。

  1. //alert方法的提示框    
  2.     $.messager.alert("title","内容","info");

2、confirm方法确认框

  1. //confirm 方法的确认框
  2.     $.messager.confirm("提示信息","您确定要删除吗？",function(r){
  3.         alert(r); 
  4.     })

3、show右下角信息展示

  1. $.messager.show({      
  2.           title:'欢迎信息',      
  3.           msg:'欢迎您，XXX',      
  4.           timeout:5000,      
  5.           showType:'slide'  
  6.         });

五、menubutton的使用

先将元素的class写为class=”easyui-menubutton” ，然后data-options中有属性menu：#id，这个id就是该按钮的下拉按钮

  1. <body >
  2.     <a class="easyui-menubutton" data-options="iconCls:'icon-help',menu:'#mm'">控制面板</a>
  3.     <div id="mm">
  4.         <div data-options="iconCls:'icon-edit'">修改密码</div>
  5.         <div>注销用户</div>
  6.         <!-- 分割线 -->
  7.         <div class="menu-sep"></div>
  8.         <div>退出登录</div>
  9.     </div>
  10. </body>

六、datagird的使用

1、创建一个带有id值的表格

  1. <table id="mytab"></table>

2、datagrid中的属性也是json格式。使用JS动态载入表格数据，发送ajax请求，field的值就是返回json对应数据位置的名字。checkbox：true属性是将该列的数据内容显示为多选框，一般用于id列。

  1. <script type="text/javascript">
  2.         //页面加载完成后，创建数据表格datagrid
  3.         $(function(){
  4.             $("#mytab").datagrid({
  5.                 columns:[[
  6.                     {title:"编号",field:"id",checkbox:true},
  7.                     {title:"姓名",field:"name"},
  8.                     {title:"年龄",field:"age"},
  9.                     {title:"地址",field:"address"}
  10.                 ]],
  11.                 //指定数据表格发送ajax请求
  12.                 url:'${pageContext.request.contextPath }/json/datagrid_data.json',
  13.                 rownumbers:true,
  14.                 /* singleSelect:true, */
  15.                 //定义工具栏
  16.                 toolbar:[
  17.                     {text:"保存",iconCls:"icon-add",handler:function(){
  18.                         alert("123");
  19.                     }},
  20.                     {text:"查询",iconCls:"icon-search"},
  21.                     {text:"删除",iconCls:"icon-remove"},
  22.                     {text:"修改",iconCls:"icon-edit"}
  23.                 ],
  24.                 //显示分页
  25.                 pagination:true
  26.             });
  27.         });
  29.     </script>

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

  1. <script type="text/javascript">
  2.         //页面加载完成后，创建数据表格datagrid
  3.         $(function(){
  4.             var myIndex = -1; //创建一个全局索引，用来作为进行编辑行的标志
  5.             $("#mytab").datagrid({
  6.                 columns:[[
  7.                     {width:120,title:"编号",field:"id",checkbox:true},
  8.                     {width:120,title:"姓名",field:"name",editor:{
  9.                         type:"validatebox",
  10.                         option:{}
  11.                     }},
  12.                     {width:120,title:"年龄",field:"age",editor:{
  13.                         type:"numberbox",
  14.                         option:{}
  15.                     }},
  16.                     {width:120,title:"地址",field:"address",editor:{
  17.                         type:"validatebox",
  18.                         option:{}
  19.                     }}
  20.                 ]],
  21.                 //指定数据表格发送ajax请求
  22.                 url:'${pageContext.request.contextPath }/json/datagrid_data.json',
  23.                 rownumbers:true,
  24.                 /* singleSelect:true, */
  25.                 //定义工具栏
  26.                 toolbar:[
  27.                     {text:"保存",iconCls:"icon-add",handler:function(){
  28.                         $("#mytab").datagrid("endEdit",myIndex);
  29.                     }},
  30.                     {text:"新增",iconCls:"icon-search",handler:function(){
  31.                         $("#mytab").datagrid("insertRow",{
  32.                             index:0,//在第一行插入数据
  33.                             row:{}, //插入一行空的数据
  34.                         });
  35.                         $("#mytab").datagrid("beginEdit",0); //插入后就可以编辑
  36.                         myIndex = 0;
  37.                     }},
  38.                     {text:"删除",iconCls:"icon-remove",handler:function(){
  39.                         var rows = $("#mytab").datagrid("getSelections");
  40.                         if (rows.length == 1) {
  41.                             row = rows[0];
  42.                             //获取当前行的下标赋给myIndex
  43.                             myIndex = $("#mytab").datagrid("getRowIndex",row);
  44.                         }
  45.                         $("#mytab").datagrid("deleteRow",myIndex);
  47.                     }},
  48.                     {text:"修改",iconCls:"icon-edit",handler:function(){
  49.                         var rows = $("#mytab").datagrid("getSelections");
  50.                         if (rows.length == 1) {
  51.                             row = rows[0];
  52.                             myIndex = $("#mytab").datagrid("getRowIndex",row);
  53.                         }
  54.                         $("#mytab").datagrid("beginEdit",myIndex);
  55.                     }}
  56.                 ],
  57.                 //显示分页
  58.                 pagination:true,
  59.                 //监听编辑后的操作
  60.                 onAfterEdit:function(index,data,change){
  62.                 }
  63.             });
  64.         });
  66.     </script>

用到了很多datagrid的方法，方法具体的使用方法可查看文档，这里写不下去了。

这里创建一个全局变量myIndex的作用是防止每次的增删查改都在第一行数据。

七、combobox的使用

这个控件类似于select标签，valueField:’id’是实际值，而textField:’name’是显示值，editable:false是不能自己手动输入数据。

  1. <body>
  2.     <input class="easyui-combobox" 
  3.             data-options="valueField:'id',
  4.             textField:'name',
  5.             url:'${pageContext.request.contextPath }/json/combobox.json',
  6.             editable:false">
  7. </body>

发表评论

表情：
评论列表 （有 0 条评论，520人围观）

还没有评论，来说两句吧...

相关阅读