EasyUI的集成+高级查询+删除

心之所向...

于 2019-12-10 19:56:55 发布

阅读量218

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/FRMNZR/article/details/103481804

版权

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三.EasyUI的集成

3.1 准备head.jsp

我们把所有公共的引入(css,js) 都放在head.jsp中
以后要使用easyui直接引入即可

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入easyui中的基本的CSS与JS--%>
<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">
<%-- 引入jQuery --%>
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<%--jQuery的扩展包 --%>
<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>
<%--easyui的核心文件--%>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<%--引入国际化的js--%>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

3.2 employee的jsp代码

加入表格，以及工具栏。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入公共的jsp--%>
    <%@ include file="/WEB-INF/views/head.jsp" %>
    <%--引入当前模板对应的js--%>
    <script src="/js/model/employee.js"></script>
</head>
<body>
<div id="toolbar">
    <%--iconCls:图标  plain:简洁--%>
    <a href="javascript:;" data-method="add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
    <a href="javascript:;" data-method="update" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="javascript:;" data-method="delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
<%--展示数据使用datagrid组件
    url:请求路径(数据)  fit:自适应父容器
    fitColumns:列的自适应 singleSelect:是否单选
    pagination:分页工具栏
    ctrl+shift+delete
--%>

<table class="easyui-datagrid"
       data-options="url:'/employee/page',fitColumns:true,singleSelect:true,fit:true,toolbar:'#toolbar',pagination:true">
    <thead>
    <tr>
        <th data-options="field:'username',width:100">用户名</th>
        <th data-options="field:'password',width:100">密码</th>
        <th data-options="field:'age',width:100">年龄</th>
        <th data-options="field:'email',width:100">邮箱</th>
    </tr>
    </thead>
</table>
<div id="toolbar" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="#" data-method="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" data-method="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <form id="searchForm" method="post" >
        用户名: <input name="username" class="easyui-textbox" style="width:80px">
        邮件: <input name="email" class="easyui-textbox" style="width:80px">
        <a href="#"  data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </form>
</div>

</body>
</html>

3.2 employee.js

//入口函数：页面读取所有元素再执行
$(function () {

    //只要有data-method属性的元素我都要为它注册事件
    $("*[data-method]").on("click",function () {
        //谁调用，this就指向谁(这个this是普通dom对象)
        //$(dom对象) -> 变成jQuery对象，有很多jQuery特有的功能(更加强大)
        //1.拿到当前按键的属性 add,update
        //var methodName = $(this).data("method");
        //2.执行对应的方法(动态调用)
        //  itsource.say() == itsource["say"]();

        itsource[$(this).data("method")]();
    })

    //准备了相应的方法功能
    itsource = {
        add:function(){
            alert("add")
        },
        update:function () {
            alert("update")
        },
        delete:function () {
             //获取选中的行
            let row = datagrid.datagrid("getSelected");
            //没有选中时，提示
            if(!row){
                $.messager.alert('提示','亲！请选中一行再删除','info');
                return;
            }
            //让用户确认是否删除
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                if(r){
                    //要删除，发送ajax请求
                    $.get("/employee/delete",{id:row.id},function (result) {
                        if(result.success){
                            //成功，刷新页面
                            datagrid.datagrid("reload");
                        }else{
                            //失败提示
                            $.messager.alert('提示',`删除失败，原因是:${result.msg}`,"error");
                        }
                    });
                }
            });
            
        }，
        //高级查询功能
        search(){
            //1.拿到查询的值
            var params = searchForm.serializeObject();
            //2.进行查询
            datagrid.datagrid("load",params);
        }
    };
})

心之所向...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI的集成+高级查询+删除

三.EasyUI的集成3.1 准备head.jsp我们把所有公共的引入(css,js) 都放在head.jsp中以后要使用easyui直接引入即可<%@ page contentType="text/html;charset=UTF-8" language="java" %><%--引入easyui中的基本的CSS与JS--%><link rel=...
复制链接

扫一扫