JQuery EasyUI入门

最新推荐文章于 2022-05-04 20:49:06 发布

Switchvov

最新推荐文章于 2022-05-04 20:49:06 发布

阅读量1.9k

点赞数 1

分类专栏： Javascript 文章标签： jquery javascript easyui html

如需转载，请联系本人获取许可且必须注明出处，详见联系方式。

本文链接：https://blog.csdn.net/q547550831/article/details/54142385

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JQuery EasyUI入门

@(JavaScript)[jQuery, EasyUI, 入门]

基本概述

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

——参考《百度百科》

官网：Jquery EasyUI官网、Jquery EasyUI中文网

PS：可以到官网或者中文网完整的学习easyUI的组件，以下是一些自己写的小案例。

案例

Layout(布局)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>layout测试</title>
          <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>
     </head>
     <body class="easyui-layout">
          <!-- 分为五个区域 -->
          <div style="height: 100px;" data-options="region:'north'">北部区域</div>
          <div style="width: 200px;" data-options="region:'west'">西部区域</div>
          <div style="" data-options="region:'center'">中心区域</div>
          <div style="width: 100px;" data-options="region:'east'">东部区域</div>
          <div style="height: 50px;" data-options="region:'south'">南部区域</div>
     </body>
</html>

Accordion(手风琴)

  <div style="" data-options="region:'center'">
      <div class="easyui-tabs" data-options="fit:true">
           <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
           <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
      </div>
  </div>

Tab(选项卡)

  <div style="" data-options="region:'center'">
      <div class="easyui-tabs" data-options="fit:true">
           <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
           <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
      </div>
  </div>

同一选项卡只能打开一个

  <div style="width: 200px;" data-options="region:'west'">
      <div class="easyui-accordion" data-options="fit:true">
           <div data-options="iconCls:'icon-save'" title="系统菜单">
                <a id="btn" class="easyui-linkbutton">按钮</a>
           </div>
           <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
      </div>
  </div>
  <div style="" data-options="region:'center'">
      <div id="et" class="easyui-tabs" data-options="fit:true">
           <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
           <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
      </div>
  </div>

  <script type="text/javascript">
      $(function(){
           $("#btn").click(function() {
                var isExists = $("#et").tabs("exists", "标题");
                if(isExists) {
                     $("#et").tabs("select","标题");
                } else {
                     $("#et").tabs("add", {
                          title:"标题",
                          closable:true,
                          iconCls:"icon-save",
                          content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"
                     });
                }
           });
      });
  </script>

messager(消息框)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Messager的使用</title>
          <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>
          <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>

          <script type="text/javascript">
               $(function() {
                    // $.messager.alert("标题", "一条消息", "info");

                    /* $.messager.confirm("标题", "确认消息？", function(val) {
                         alert(val);
                    }); */

                    /* $.messager.prompt("标题", "请输入", function(message) {
                         alert(message);
                    }); */

                    // $.messager.progress();

                    $.messager.show({
                         title:'标题',
                         msg:'这是一条消息，五秒后会消失',
                         timeout:5000,
                         showType:'slide',
                         showSpeed:1000
                    });

               });

          </script>
     </head>
     <body>

     </body>
</html>

menubutton(菜单按钮)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>MenuButton的使用</title>
          <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>
          <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
     </head>
     <body>
          <a id="mb" class="easyui-menubutton" data-options="iconCls:'icon-help', menu:'#menudiv'">功能菜单</a>
          <div id="menudiv">
              <div data-options="iconCls:'icon-save'">保存</div>
              <div data-options="iconCls:'icon-edit'">修改</div>
              <div class="menu-sep"></div>
              <div data-options="iconCls:'icon-remove'">删除</div>
          </div>
     </body>
</html>

datagrid(数据表格)

数据表格的基本使用

json内容

{
    "total": 100,
    "rows":[
        {"id":"001","name":"王五","price":31232,"age":20},
        {"id":"002","name":"赵六","price":32132,"age":20}
    ]
}

html文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用</title>
<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>
<script type="text/javascript"
     src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
     $(function() {
          $("#dg").datagrid({
              url:'datagrid_data.json',
              columns:[[
                  {field:"id",title:"编号",checkbox:true},
                  {field:"name",title:"姓名"},
                  {field:"price",title:"价格"},
                  {field:"age",title:"年龄"}
              ]],
              rownumbers:true,
              toolbar: [
                  {text:'编辑',
                   iconCls: 'icon-edit',
                   handler: function(){
                        alert('edit');
                        }
                   },
                   {text:'帮助',
                   iconCls: 'icon-help',
                   handler: function(){
                        alert('help');
                   }}
              ],
              pagination:true,
              pageList:[10,30,50]
          });
     });
</script>


</head>
<body>
     <!-- 1.将页面中静态HTML代码渲染为datagrid样式 -->
     <table class="easyui-datagrid">
          <thead>
              <tr>
                   <th data-options="field:'id'">编号</th>
                   <th data-options="field:'name'">姓名</th>
                   <th data-options="field:'price'">价格</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                   <td>001</td>
                   <td>张三</td>
                   <td>123</td>
              </tr>
              <tr>
                   <td>002</td>
                   <td>李四</td>
                   <td>321</td>
              </tr>
          </tbody>
     </table>

     <hr/>

     <!-- 2.发送ajax请求获取动态json数据动态创建datagrid -->
     <table class="easyui-datagrid" data-options="url:'datagrid_data.json'">
          <thead>
              <tr>
                   <th data-options="field:'id'">编号</th>
                   <th data-options="field:'name'">姓名</th>
                   <th data-options="field:'price'">价格</th>
              </tr>
          </thead>
     </table>

     <hr/>

     <!-- 3.调用easyUI提供的API动态创建datagrid -->
     <table id="dg"></table>

</body>
</html>

带编辑功能的数据表格

json内容

{
    "total": 100,
    "rows":[
        {"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},
        {"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},
        {"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},
        {"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},
        {"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}
    ]
}

html文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——编辑功能</title>
<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>
<script type="text/javascript"
     src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
     // 全局变量
     // 选中行索引
     var editIndex;

     $(function() {

          $("#dg").datagrid({
              url:'datagrid_data.json',
              columns:[[
                  {field:"id",title:"编号",checkbox:true,width:100},
                  {field:"name",title:"姓名",editor:{type:'validatebox',options:{required:true}},width:100},
                  {field:"price",title:"价格",editor:{type:'numberbox',options:{precision:2,required:true}},width:100},
                  {field:"age",title:"年龄",editor:{type:'numberbox',options:{precision:0,required:true}},width:100},
                  {field:"birthday",title:"生日",editor:{type:'datebox',options:{required:true}},width:100},
              ]],
              striped : true,    // 斑马线
              rownumbers:true,   // 行号
              toolbar: [
                  {text:'添加',
                   iconCls: 'icon-add',
                   handler: function(){
                        // 如果选中行，第二次点击则保存并添加新的一行
                        if(editIndex != undefined) {
                             $("#dg").datagrid("endEdit", editIndex);
                        }
                        if(editIndex == undefined){
                             // 清除所有选择
                             $("#dg").datagrid("clearSelections");
                             $('#dg').datagrid('insertRow',{
                                  index: 0,
                                  row: {}
                             });
                             editIndex = 0;
                             $("#dg").datagrid("beginEdit", editIndex);
                        }
                   }},
                   {text:'编辑',
                   iconCls: 'icon-edit',
                   handler: function(){
                        // 如果选中行，第二次点击则保存
                        if(editIndex != undefined) {
                             $("#dg").datagrid("endEdit", editIndex);
                        } else {
                             var rows = $("#dg").datagrid('getSelections');
                             // 获取选中行
                             if(rows.length != 1) {
                                  $.messager.alert("提示消息","请选择单行!!!");
                             } else {
                                  editIndex = $("#dg").datagrid("getRowIndex", rows[0]);
                                  $("#dg").datagrid("beginEdit", editIndex);
                             }
                        }
                   }},
                   {text:'删除',
                   iconCls: 'icon-remove',
                   handler: function(){
                        var rows = $("#dg").datagrid('getSelections');
                        // 删除选中行
                        for(var i = 0; i < rows.length; i++) {
                             $("#dg").datagrid('deleteRow',$("#dg").datagrid("getRowIndex", rows[i]));
                        }
                   }},
                   {text:'保存',
                   iconCls: 'icon-save',
                   handler: function(){
                        if(editIndex != undefined) {
                             $("#dg").datagrid("endEdit", editIndex);
                        }
                   }},
                   {text:'取消',
                   iconCls: 'icon-cancel',
                   handler: function(){
                        if(editIndex != undefined) {
                             // 取消编辑
                             $("#dg").datagrid("cancelEdit", editIndex);
                             // 获取编辑行的id，如果是undefined，证明未定义，可以删除
                             if($('#dg').datagrid('getRows')[editIndex].id == undefined){
                                  $("#dg").datagrid('deleteRow',editIndex);
                             }
                             editIndex = undefined;
                        }
                   }}
              ],
              pagination:true,
              pageList:[5,10,30,50],
              onAfterEdit : function(rowIndex, rowData, changes){
                   console.info(rowData);
                   editIndex = undefined;
              },
              onDblClickRow: function(rowIndex, rowData, changes) {
                   console.info(rowIndex);
                   if(editIndex == undefined) {
                        $('#dg').datagrid('beginEdit',rowIndex);
                        editIndex = rowIndex;
                   }
              }
          });
     });
</script>
</head>
<body>
     <!-- 3.调用easyUI提供的API动态创建datagrid -->
     <table id="dg"></table>
</body>
</html>

跨行跨列的数据表格

json内容

{
    "total": 100,
    "rows":[
        {"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},
        {"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},
        {"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},
        {"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},
        {"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}
    ]
}

html文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——标题跨行跨列</title>
<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>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
     // 全局变量
     // 选中行索引
     var editIndex;

     $(function() {

          $("#dg").datagrid({
              url:'datagrid_data.json',
              columns:[[
                  {
                   field:"id",
                   title:"编号",
                   checkbox:true,
                   width:100,
                   rowspan:2
                  },{
                        field:"name",
                        title:"姓名",
                        editor:{type:'validatebox',options:{required:true}},
                        width:100,
                        rowspan:2
                  },{
                        field:"price",
                        title:"价格",
                        editor:{type:'numberbox',options:{precision:2,required:true}},
                        width:100,
                        rowspan:2
                  },{
                        title:"其他信息",
                        colspan:2
                  }
              ],
              [
                   {
                        field:"age",
                        title:"年龄",
                        editor:{type:'numberbox',options:{precision:0,required:true}},
                        width:100
                   },{
                        field:"birthday",
                        title:"生日",
                        editor:{type:'datebox',options:{required:true}},
                        width:100
                   }
              ]],
              striped : true,    // 斑马线
              rownumbers:true    // 行号
          });
     });
</script>
</head>
<body>
     <!-- 3.调用easyUI提供的API动态创建datagrid -->
     <table id="dg"></table>
</body>
</html>

datagrid处理复杂json数据

 {
      field : 'noticebill.telephone',
      title : '联系方式',
      width : 100,
      align : 'center',
      formatter: function(value,row,index) {
          return row.noticebill['telephone'];
      }
 }

datagrid使用load方法

 $(function(){
      //提供一个工具方法，作用是将表单中所有的输入项和值转换为json数据
      $.fn.serializeJson=function(){
          var serializeObj={};
          var array=this.serializeArray();
          $(array).each(function(){
              if(serializeObj[this.name]){
                  if($.isArray(serializeObj[this.name])){
                      serializeObj[this.name].push(this.value);
                  }else{
                      serializeObj[this.name]=[serializeObj[this.name],this.value];
                  }
              }else{
                  serializeObj[this.name]=this.value;
              }
          });
          return serializeObj;
      }

      $("#btn").click(function(){
          //调用上面提供的工具方法，将指定的表单输入项转为json数据，作为过滤条件
          var p = $("searchForm").serializeJson()     //{key:value,key:value}
          console.info(p);
          // 重新发送ajax，提供过滤条件
          $("#grid").datagrid('load', p);
          $("#searchForm").get(0).reset();// 重置查询表单
          $("#searchWindow").window("close"); // 关闭窗口
      });
 });

combobox(下拉列表框)

json内容

[
    {"id":"001","text":"软件部"},
    {"id":"002","text":"市场部"},
    {"id":"003","text":"人事部"}
]

html文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combobox的使用</title>
<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>
<script type="text/javascript"
     src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
</script>


</head>
<body>
     <!-- 1. 将页面静态的html代码渲染为combobox样式 -->
     <!--
     <select id="cb" class="easyui-combobox" name="dept">
          <option value="aa">研发部</option>
          <option>市场部</option>
          <option>人事部</option>
     </select>
     -->

     <!-- 2. html标签发送ajax请求获取动态json数据创建combobox -->
     <!--
     <input id="cc" class="easyui-combobox" name="dept"
          data-options="valueField:'id',textField:'text',url:'combobox_data.json'" />
     -->

     <!-- 3. JavaScript发送ajax请求获取动态json数据创建combobox -->
     <input id="cd" class="easyui-combobox" name="dept"/>
     <script type="text/javascript">
          $("#cd").combobox({
              url:'combobox_data.json',
              valueField:'id',
              textField:'text'
          });
     </script>
</body>
</html>

combotree(下拉树)

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "iconCls":"icon-save",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"help.html",
        "iconCls":"icon-help"
    }]
}]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combotree的使用</title>
<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>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
     $(function(){
          $("#ct2").combotree({
              url:'combotree_data.json',
              width:200,
              required:true
          });
     });
</script>
</head>
<body>
     <!-- 方式1：html标签 -->
     <select id="ct1" name="ct1" class="easyui-combotree" style="width:200px;" data-options="url:'combotree_data.json',required:true"></select>

     <hr/>

     <!-- 方式2：JavaScript代码 -->
     <input id="ct2" name="ct2">
</body>
</html>