1. 技术文章
  2. EasyUI加强

EasyUI加强

由 那年仲夏 提交于 2019-11-30 06:49:50

常用组件

layout（布局）

通过样式对页面经行简单的布局

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
        <script>
            $(function() {
                $("#EasyUItree").tree({
                    url: 'datatree.json',
                    method: 'get',
                    //添加事件
                    'onClick': function(node) {
                        //判断是否有子节点
                        if(!node.children){
                            //判断我们是否已经有了该text
                            if($("#EasyUItabs").tabs("exists",node.text)){
                                $("#EasyUItabs").tabs("select",node.text);
                            }
                            else{
                                $("#EasyUItabs").tabs("add",{
                                title: node.text,
                                closable:true,
                                content:'<iframe src="'+ node.url+'" frameborder="0" width="100%" height="100%"></iframe>'
                                });
                            }
                            
                        }
                    }
                })
            })
        </script>
    </head>
    <!--只用完整布局-->

    <body class="easyui-layout">
        <!--上布局-->
        <div data-options="region:'north',title:'超级管理系统'" style="height:100px;">
            XXXX超级管理系统
        </div>
    
        <div data-options="region:'west',title:'菜单',split:true" style="width:100px;">
            <!--引入树结构-->
            <ul id="EasyUItree"></ul>
        </div>
        <div id="EasyUItabs" data-options="region:'center',title:'center title'" class="easyui-tabs" style="padding:5px;background:#eee;">
            <!--添加tabs-->
            <!--data-options="closable:true"選擇是否能夠點擊刪除'-->
                 <div title="主页" data-options="closable:true" style="padding:20px;display:none;">   
                        <h2>欢迎来到 超级NB的 0704 Xxx 管理系统   </h2>
                </div> 
        </div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
            杰大大的超级管理系统
        </div>
    </body>

</html>

然后在上下左右中加入我们需要的内容

tabs

 

 这就是tabs,选择的时候会弹出来，做一个点击事件，如果没有子元素我们就需要点击的时候显示头部，并且跳转到页面

'onClick': function(node) {
                        //判断是否有子节点
                        if(!node.children){
                            //判断我们是否已经有了该text
                            if($("#EasyUItabs").tabs("exists",node.text)){
                                $("#EasyUItabs").tabs("select",node.text);
                            }
                            else{
                                $("#EasyUItabs").tabs("add",{
                                title: node.text,
                                closable:true,
                                content:'<iframe src="'+ node.url+'" frameborder="0" width="100%" height="100%"></iframe>'
                                });
                            }
                           
                        }

 

From

这里我们直接引入，但是可以通过使用EasyUI扩展库的功能完成我们对密码的验证以及前台东西的相应展示

EasyUI扩展库的使用：

在百度上搜索我们就会有演示和列子，以及对应引入的文件

DataGrid

把我们json的东西对应的显示到我们的页面中，能过做一些非常好的东西

整体的html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--默认样式-->
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <!--图标样式-->
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
        <!--   插入其中的css     -->
        <link rel="stylesheet" type="text/css" href="validatebox/jeasyui.extensions.validatebox.css">
        <!-- jquery 脚本-->
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <!-- easyui 核心插件-->
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <!-- 中文插件 -->
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
        <!-- 扩展插件 -->
        <script type="text/javascript" src="js/jquery.jdirk.js"></script>
        <script type="text/javascript" src="validatebox/jeasyui.extensions.validatebox.rules.js"></script>
        <script type="text/javascript" src="js/crud.js"></script>
    </head>

    <body>
        <!--data-options="closed:true"隐藏菜单属性-->
     <div  class="easyui-dialog" id="edialog" title="添加/修改" style="width:400px;padding:10px;" data-options="closed:true">
    <form id="eform" method="post">
        
            <table cellpadding="5">
                <tr>
                    <td>用户名:</td>
                    <td><input class="easyui-textbox" type="text" name="username" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input id='v16' class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input id="v17" class="easyui-validatebox" type="password" name="qrpassword" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input class="easyui-textbox" name="email" data-options="validType:'email'"></input></td>
                </tr>
                <tr>
                    <!-- 扩展 easyUI 约束为数字 -->
                    <td>年龄:</td>
                    <td><input class="easyui-validatebox" name="age" data-options="validType:['integer']"></input></td>
                </tr>
                <tr>
                    <!--下拉框 --内容动态获取  -->
                    <td>部门:</td>
                    <td>
                        <select id="ecombox" class="easyui-combobox"  name="department.id"></select>
                    </td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" data-method="submitForm" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        </div>
        </div>
</div>
    <!--toolbar:'#ft'"工具箱栏位url:'empldata.json'发送一个请求获得json-->
    <table id="edatagrid" class="easyui-datagrid" fit=true title="DataGrid Complex Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:'empldata.json',fitColumns:true,method:'get',toolbar:'#ft'">
        <thead>
            <tr>
                <!--通过field找到相应的json对象中的数据-->
                <th data-options="field:'id',width:20">编号</th>
                <th data-options="field:'username',width:20">姓名</th>
                <th data-options="field:'password',width:100,align:'right'">密码</th>
                <th data-options="field:'email',width:80,align:'right'">邮箱</th>
                <th data-options="field:'age',width:20" >年龄</th>
                <th data-options="field:'headImage',width:40,align:'center',formatter:showImg">图片</th>
                <th data-options="field:'department',width:20,align:'center',formatter:showEmpl">部门</th>
            </tr>
        </thead>
    </table>
     <div id="ft" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" data-method="add" iconCls="icon-add" plain="true">添加</a>
        <a href="#" class="easyui-linkbutton" data-method="update" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" class="easyui-linkbutton" data-method="remove" iconCls="icon-remove" plain="true">删除</a>
    </div>
     
    </body>

</html>
View Code

 

增删改查JQ

我们动态的添加并且实现crud操作

//图片展示
function showImg(value, row, index) {
    //图片展示
    return '<img src="' + value + '" alt="没有头像" style="width: 50px;height: 50px;" />'
};

function showEmpl(value, row, index) {
    //vaule的值自己打印出来看
    if(value) {
        //返回值为图片的位置    
        return value.name;
    } else {
        return "没有部门";
    }
};

$(function() {

    var edatagrid = $("#edatagrid");
    var edialog = $("#edialog");
    var eform = $("#eform");
    var ecombox = $("#ecombox");

    // 动态值 标签事件,绑定onClick,调用jiedada里的方法
    // 绑定on事件
    $("a[data-method]").on("click", function() {
        var method = $(this).data("method");
        jiedada[method]();
    })

    // 加载 部门的数据 
    $('#ecombox').combobox({
        url: 'department.json',
        method: 'get',
        width: '100px',
        panelHeight: 'auto',
        valueField: 'id',
        textField: 'text',
    });

    // 两次密码一致的验证        
    $("#v17").validatebox({
        validType: ['equals["#v16","jquery"]']
    });

    var jiedada = {
        "add": function() {
            // 点击按钮 显示对话框
            eform.form("clear"); // 清除之前的数据
            jiedada.show(); // 显示密码框
            edialog.dialog("open"); // 显示对话框
        },
        "update": function() {
            //判断是否选中
            var row = edatagrid.datagrid("getSelected");
            if(row) {

                // 因为和 添加共用一个form ,数据会冲突,提交时清空了数据
                // 加载数据 -- load
                eform.form("load", row);
                // 隐藏 密码框: 
                jiedada.hidden();

                // 部门的数据没有回显 
                if(row.department) {
                    ecombox.combobox("select", row.department.name);
                }

                // 打开对话框,回显数据
                edialog.dialog("open");
                // 
            } else {
                // alert() //不使用原始的alert 太丑了,不同浏览器的区别
                $.messager.alert('警告', "<h1 style='color:red'>哈b</h1>请先选择,在进行修改的!", 'warning');
            };
        },
        "remove": function() {
            // 判断是否选中:
            var row = edatagrid.datagrid("getSelected");
            if(row) {
                $.messager.confirm('确认对话框', '您确定要删除我吗?', function(r) {
                    if(r) {
                        // 删除 发生后台请求!
                        $.messager.alert('提示', "<h1 >删除完成!</h1>", 'info');
                    } else {
                        // 取消删除
                    }
                });
            } else {
                // alert() //不使用原始的alert 太丑了,不同浏览器的区别
                $.messager.alert('警告', "<h1 style='color:red'>哈b</h1>请先选择,在删除的!", 'warning');
            };
        },
        'submitForm': function() {
            // 数据是否复合验证
            if(eform.form("validate")) {
                // 提交表单数据
                // 关闭窗口 -- 清空表单中的数据
                eform.form("clear");
                edialog.dialog("close");
            } else {
                $.messager.alert("", "数据有误,验证后在提交!")
            }
        },
        "hidden": function() {
            //修改数据时 隐藏 密码框
            $("#v16").closest("tr").hide();
            $("#v17").closest("tr").hide();
        },
        "show": function() {
            //添加数据时 显示 密码框
            $("#v16").closest("tr").show();
            $("#v17").closest("tr").show();
        }
    };

});

对饮的json

[{
  "id": 1,
  "text": "系统管理",
  "state": "open",
  "children": [{
    "id": 12,
    "text": "部门管理",
    "iconCls":"icon-lock",
    "url":"/department/index"
  },{
    "id": 11,
    "text": "员工管理",
    "iconCls":"icon-man",
    "url":"empldataprid.html"
  }]
},{
  "id": 1,
  "text": "基本信息",
  "state": "open",
  "children": [{
    "id": 11,
    "text": "菜单管理",
    "iconCls":"icon-man",
    "url":"/user.action"
  },{
    "id": 12,
    "text": "角色管理",
    "iconCls":"icon-man",
    "url":"/customer/index"
  },{
    "id": 12,
    "text": "资源管理",
    "iconCls":"icon-man",
    "url":"/06_panel.jsp"
  }
  ]
}]
View Code 
[{    
    "id":1,    
    "text":"IT部",
    "selected":true   
},{    
    "id":2,    
    "text":"采购部"   
},{    
    "id":3,    
    "text":"销售部" 
}]
View Code 
{
  "total": 139,
  "rows": [
    {
      "id": 1,
      "username": "admin",
      "password": "48d05cc43f3bfe2510394e8dfcef919a",
      "email": "admin@itsource.com",
      "age": 34,
      "headImage": "img/1.png",
      "department": {
        "id": 1,
        "name": "IT部"
      }
    },
    {
      "id": 2,
      "username": "roleAdmin",
      "password": "d563ad18fb8e2067eaee76ca27f3e8a3",
      "email": "roleAdmin@itsource.cn",
      "age": 25,
      "headImage": "img/1.png",
      "department": {
        "id": 1,
        "name": "IT部"
      }
    },
    {
      "id": 3,
      "username": "admin1",
      "password": "6a4876827226fb87ffeb78edb2b1e7ad",
      "email": "amdin1@itsource.cn",
      "age": 25,
      "headImage": "img/1.png",
      "department": {
        "id": 1,
        "name": "IT部"
      }
    },
    {
      "id": 4,
      "username": "admin2",
      "password": "d157d747dc2f6740e81ca9d84b669272",
      "email": "amdin2@itsource.cn",
      "age": 25,
      "department": {
        "id": 2,
        "name": "采购部"
      }
    },
    {
      "id": 5,
      "username": "admin3",
      "password": "89335a5f0fdd015113e9acf90727cdce",
      "email": "amdin3@itsource.cn",
      "age": 25,
      "headImage": "img/1.png",
      "department": {
        "id": 1,
        "name": "IT部"
      }
    },
    {
      "id": 6,
      "username": "admin4",
      "password": "12e4dc60e1813184b3e4552dedd7bf9b",
      "email": "amdin4@itsource.cn",
      "age": 25,
      "headImage": "img/1.png",
      "department": {
        "id": 3,
        "name": "销售部"
      }
    },
    {
      "id": 7,
      "username": "admin5",
      "password": "02f9b7f759b5654d421c0ce458d16c28",
      "email": "amdin5@itsource.cn",
      "age": 25,
      "headImage": "img/1.png",
      "department": {
        "id": 1,
        "name": "IT部"
      }
    },
    {
      "id": 8,
      "username": "admin6",
      "password": "138e943e0987d1fff7a4c367deedd4e3",
      "email": "amdin6@itsource.cn",
      "age": 25,
      "headImage": "",
      "department": {
        "id": 2,
        "name": "采购部"
      }
    },
    {
      "id": 9,
      "username": "admin7",
      "password": "53bf9cd2cb250a9d82c3260b6d398d73",
      "email": "amdin7@itsource.cn",
      "age": 25,
      "department": {
        "id": 2,
        "name": "采购部"
      }
    },
    {
      "id": 10,
      "username": "admin8",
      "password": "f6bd6e8ca007216fef1ddd9652e5d42f",
      "email": "amdin8@itsource.cn",
      "age": 25,
      "headImage": ""
    }
  ]
}
View Code

 

 

 

标签
input
data-options
email
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!