easyui实例案例介绍

超、凢脫俗 2022-04-14 07:13 240阅读 0赞

> 本篇主要例举easyui的实例如下：博主这里也只是简单的介绍了一些easyui常用的，建议学习的话，可以参考easyui的学习文档api学习，可能要更加好，更加全面，博主这里可能介绍的并不全面。希望对你有点帮助 ，加油!

easyui datagrid数据表格一：

运行项目：输入：[http://localhost:8080/easyuiDemo1/easyui/12-datagrid.jsp][http_localhost_8080_easyuiDemo1_easyui_12-datagrid.jsp]

效果图如下：

![20181125215624258.png][]

easyui datagrid数据表格二：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>easyui数据表格</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>
     <table id="mytb" style="width:200px;height:300px">
    
          </table>
          <script type="text/javascript">
          $('#mytb').datagrid({
              title: '中国感动人物',  //表格名称
              iconCls: 'icon-edit',  //图标
              width:800,   //表格宽度
              height:'auto',   //表格高度，可指定高度，可自动
              border:true,  //表格是否显示边框
              url:'datagrid.php',   //获取表格数据时请求的地址
              columns:[[
                {field:'id',title:'编号',width:100,hidden:false},
                {field:'name',title:'姓名',width:100},
                {field:'age',title:'年龄',width:100},
                {field:'school',title:'人物名称',width:100}
              ]],
              pagination:true,//如果表格需要支持分页，必须设置该选项为true
              pageSize:5,   //表格中每页显示的行数
              pageList:[5,10,15],
              rownumbers:true,   //是否显示行号
              nowrap: false,   
              striped: true,  //奇偶行是否使用不同的颜色
              method:'get',   //表格数据获取方式,请求地址是上面定义的url
              sortName: 'ID',  //按照ID列的值排序
              sortOrder: 'desc',  //使用倒序排序
              idField: 'id',
              loadMsg:'数据正在努力加载，请稍后...',   //加载数据时显示提示信息
              frozenColumns: [[  //固定在表格左侧的栏
                          {field: 'ck', checkbox: true},
                        ]],
              toolbar: [{
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function() {
                            getSelectIds('mytb','没有选择');
                        }
                    }, '-', {
                        text: '删除',
                        iconCls: 'icon-cut',
                        handler: function() {
                          getSelectIds('mytb','没有选择');
                        }
                    }, '-', {
                        text: '修改',
                        iconCls: 'icon-save',
                        handler: function() {
                            getSelectIds('mytb','没有选择');
                        }
                    }]
            });
          </script>
      </body>
    </html>

效果图如下：

![20181125215818827.png][]

validatebox验证框：

效果如下：

![20181125220234944.png][]

message提示框架：

效果图如下：

![20181125220618711.png][]

easyui  lyout布局：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; 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>
    <script type="text/javascript">
    $("a[title]").click(function() {
        //获取点击的那个a标签的title
        var src = $(this).attr("title");
        var title = $(this).html();
    
        //判断选项卡有没有存在，如果存在则选中，不存在添加
        if($("#tt").tabs('exists',title)){
            $("#tt").tabs('select',title);
        }else{
            //添加选项卡
            $('#tt').tabs('add', {
                title : title,
                content : '<iframe frameborder="0" style=width:100%;height:100% src='+src+'></iframe>',
                closable : true
            });
        }
    });
    
    </script>
    <body >
    	<div id="cc" class="easyui-layout" fit=true
        style="width: 100%; height: 1000px">
    
        <div region="north" title="North Title" split="true"
            style="height: 100px;"></div>
    
        <div region="west" split="true" title="菜单" iconCls="icon-ok"
            style="width: 200px;">
            <div id="aa" class="easyui-accordion"
                style="width: 300px; height: 200px;" fit=true>
    
                <div title="用户管理" iconCls="icon-save"
                    style="overflow: auto; padding: 10px;">
                    <div>
                        <a title="001_message.jsp" style="color: #0099FF;">用户列表</a>
                    </div>
                    <div>
                        <a title="002_window.jsp" style="color: #0099FF;">功能列表</a>
                    </div>
                </div>
    
                <div title="权限管理" iconCls="icon-reload" selected="true"
                    style="padding: 10px;">content2</div>
                <div title="资源管理" iconCls="icon-reload">content3</div>
    
            </div>
        </div>
    
        <div region="center" title="center title"
            style="padding: 5px; background: #eee;">
    
            <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"
                fit=true>
            </div>
        </div>
    </div>
    </body>
    </html>

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70][]

[http_localhost_8080_easyuiDemo1_easyui_12-datagrid.jsp]: http://localhost:8080/easyuiDemo1/easyui/12-datagrid.jsp
[20181125215624258.png]: /images/20220414/7a63d8f3e69b47b99a926ee54b3cb7d5.png
[20181125215818827.png]: /images/20220414/c02184e5d6c84aab9b7d104c80ae20de.png
[20181125220234944.png]: /images/20220414/cce59c05193248e989bf7a17f47853f5.png
[20181125220618711.png]: /images/20220414/c49be30ca7154bedb14f0094d3a58b6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70]: /images/20220414/8abe8c7206e14a2c815410150fdc3944.png