easyui增删改查

最新推荐文章于 2019-07-30 20:47:06 发布
最新推荐文章于 2019-07-30 20:47:06 发布
阅读量1.1k 收藏
点赞数
分类专栏： easyui例子 文章标签： easyui easyui增删改查
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu1765686161/article/details/49947319
版权


1.html页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="novatar" uri="/novatar-tags"%><%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<novatar:head title="workDate.name"></novatar:head>
<novatar:easyui />
<link href="${styles}/workDate.css?v=${version}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${scripts}/workDate.js?v=${version}"></script>
<script type="text/javascript">
    window.contextPath = "${contextPath}";
</script>
</head>

<body class="easyui-layout">
            <div id="conditionDiv" class="easyui-panel"
            data-options="region:'north',split: false, collapsible:false, minHeight:48">
            <div id="searchCondition">
                <form id="datequeryForm" method="post" action="${contextPath}/sample/findPageByWorkDate.pvt">
                    <div>
                        <span >日期</span>
                        <input class="easyui-datebox" name="startTime" >
                        <span >至</span>
                        <input class="easyui-datebox" name="endTime" >
                         <span>状态</span>
                            <select class="easyui-combobox" style="width:100px;"
                            name="workState" data-options="panelHeight:'auto'">
                                <option value="">--请选择--</option>
                                <option value="Y">工作日</option>
                                <option value="N">非工作日</option>
                            </select>
                        <a href="javascript:void(0)" auth="${queryUrl}" class="easyui-linkbutton"
                            iconCls="icon-search" plain="true" onClick="onSearchWorkDate()">
                            <span i18n="search">查询</span>
                        </a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-revert"
                            plain="true" onClick="$('#datequeryForm').form('reset')">
                            <span i18n="reset">重置</span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
       
    <div data-options="region:'center'">
         <table id="workDateGrid" style="width: 100%;height: 100%;"></table>
    </div>  
         
        <div id="dialog-toolbar" style="text-align: center;">
            <a href="javascript:void(0)" class="easyui-linkbutton" onClick="doSaveWorkDate()"
                data-options="iconCls:'icon-save',plain:true">
                <span i18n="save">保存</span>
            </a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onClick="onResetWorkDate()"
                data-options="iconCls:'icon-revert',plain:true">
                <span i18n="reset">重置</span>
            </a>
        </div>
        
   <div id="addWorkDateDialog" class="easyui-dialog"
            style="text-align: center; width: 420px; height: auto" modal="true"
            maximizable="false" data-options="buttons: '#dialog-toolbar',closed:true">
            <form id="workDateForm" method="post">
            <input type="hidden" id="ids" name="ids">
                <table style="width:100%;margin-top:5px;">
                    <tr>
                        <td><span>日期</span></td>
                        <td align="left">
                            <input type="text" name="date" class="easyui-datebox"  style="width: 250px">
                        </td>
                    </tr>
                    <tr>
                        <td><span>状态</span></td>
                        <td align="left" >
                            <select class="easyui-combobox" style="width:250px;"
                            name="state" data-options="panelHeight:'auto'">
                                <option value="Y">工作日</option>
                                <option value="N">非工作日</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        
        
       
    <div class="hidden">
        <div id="dategrid-toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton"
                data-options="iconCls:'icon-add',plain:true," onClick="addWorkDate()">
                <span>添加</span>
            </a>
            <a href="javascript:void(0)" class="easyui-linkbutton"
                data-options="iconCls:'icon-save',plain:true," onClick="updateWorkDate('Y')">
                <span>工作日</span>
            </a>
            <a href="javascript:void(0)" class="easyui-linkbutton"
                data-options="iconCls:'icon-save',plain:true," onClick="updateWorkDate('N')">
                <span>非工作日</span>
            </a>
            <a href="javascript:void(0)" class="easyui-linkbutton"
                data-options="iconCls:'icon-remove',plain:true," onClick="delWorkDate()">
                <span>删除</span>
            </a>
        </div>
    </div>
</body>
</html>


2.js


$(function() {
    loadWorkDateGrid();
})

 function loadWorkDateGrid(){
     $('#workDateGrid').datagrid({
     url : contextPath + '/storageDistributionPlan/queryPageWorkDate.pvt',
     toolbar : '#dategrid-toolbar',
     pagination : true,
     pageSize : 10,
     rownumbers : true,
     striped : true,
     singleSelect : false,
     idField : 'id',
     fitColumns : true,
     nowrap : false,
     pagePosition : 'bottom',
     totalProperty : "total",
     rowsProperty : "workDates",
     frozenColumns : [[{
         field : 'id',
         checkbox : true
     }]],
     columns : [[{
         field : 'date',
         title : "日期",
         width : 100,
         sortable : true,
         formatter : formatStringDate
     }, {
         field : 'state',
         align : 'center',
         width : 100,
         title : "状态",
         formatter : function(value, row, index) {
            if (value == 'N') {
                 return '<span style="color:blue">非工作日</span>';
             }else {
                 return '<span style="color:black">工作日</span>';
             }
         }
     }, {
         field : 'userName',
         align : 'center',
         width : 80,
         title : "操作人"
     }, {
         field : 'createTime',
         align : 'center',
         width : 200,
         title : "创建时间",
         formatter : formatStringDateTime
     }, {
         field : 'updateTime',
         align : 'center',
         width : 200,
         title : "更新时间",
         formatter : formatStringDateTime
     }]],
    onBeforeLoad : function(param) {
        if (!$("#datequeryForm").form('validate')) {
            return false;
        }
        $.extend(param, $('#datequeryForm').serializeJson());
        return true;
    }
 });
}

function onSearchWorkDate(){
    $('#workDateGrid').datagrid('clearSelections').datagrid('load', {})
}

function onResetWorkDate(){
    $('#workDateForm').form('reset');
}

function addWorkDate(){
     $("#addWorkDateDialog").dialog({
        title : "添加日期"
    }).dialog('open');
}


function onLoadWorkDateGrid(){
    $('#workDateGrid').datagrid('clearSelections').datagrid('load', {})
}

function doSaveWorkDate() {
    if ($("#workDateForm").form("validate")) {
        var workDate = $("#workDateForm").serializeJson();
        doSave({
            workDate : workDate
        });
        return false;
    }
    return false;
}

function doSave(paramData) {
    $.messager.progress({
        title : $.i18n.get('prompt'),
        msg : $.i18n.get('waitingMessage')
    });
    $.ajax({
        type : 'post',
        url : contextPath + "/storageDistributionPlan/addDate.pvt",
        data : JSON.stringify(paramData),
        contentType : 'application/json; charset=UTF-8',
        processData : false,
        dataType : 'json',
        success : function(resp, status, xhr) {
            $.messager.progress('close');
            if (resp.success) {
                $("#addWorkDateDialog").dialog('close');
                $.messager.alert($.i18n.get('prompt'), $.i18n.get('saveSuccess'), 'info', function(){
                    onLoadWorkDateGrid();
                });
            } else {
                $.messager.alert($.i18n.get('error'), resp.msg || $.i18n.get("prompt.exception"), 'error');
            }
        },
        error : function(xhr, status, error) {
            $.messager.progress('close');
            $.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
        }
    });
}

function updateWorkDate(state){
    var selectedRow = getSelectedRow('#workDateGrid', true);
    if (selectedRow) {
        $.messager.confirm($.i18n.get('prompt'), "确定操作所选择的数据？", function(result) {
            if (result) {
                var ids = [];
                $(selectedRow).each(function() {
                    ids.push(this.id);
                });
                $.messager.progress({
                    title : $.i18n.get('prompt'),
                    msg : $.i18n.get('waitingMessage')
                });
                $.ajax({
                    url : contextPath + '/storageDistributionPlan/updateWorkDate.pvt',
                    data : {
                        ids : ids.join(","),
                        "flag": state
                    },
                    type : "post",
                    success : function(resp) {
                        $.messager.progress('close');
                        if (resp.success == true) {
                            onLoadWorkDateGrid();
                        } else {
                            $.messager.alert($.i18n.get('error'), resp.msg, 'error');
                        }
                    },
                    error : function(xhr, status, error) {
                        $.messager.progress('close');
                        $.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
                    }
                });
            }
        });
    }
}


function delWorkDate(){
    var selectedRow = getSelectedRow('#workDateGrid', true);
    if (selectedRow) {
        $.messager.confirm($.i18n.get('prompt'), $.i18n.get('confirmDeleteData'), function(result) {
            if (result) {
                var ids = [];
                $(selectedRow).each(function() {
                    ids.push(this.id);
                });
                $.messager.progress({
                    title : $.i18n.get('prompt'),
                    msg : $.i18n.get('waitingMessage')
                });
                $.ajax({
                    url : contextPath + '/storageDistributionPlan/deleteWorkDate.pvt',
                    data : {
                        ids : ids.join(",")
                    },
                    type : "post",
                    success : function(resp) {
                        $.messager.progress('close');
                        if (resp.success == true) {
                            onLoadWorkDateGrid();
                        } else {
                            $.messager.alert($.i18n.get('error'), resp.msg, 'error');
                        }
                    },
                    error : function(xhr, status, error) {
                        $.messager.progress('close');
                        $.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
                    }
                });
            }
        });
    }

}


    
    //选择行数
function getSelectedRow(selector, multiple) {
    var selectedRows = $(selector).datagrid('getSelections');
    if (selectedRows.length == 0) {
        showPromptMsg($.i18n.get('selectMinOneRecord'));
        return false;
    } else if (!multiple && selectedRows.length > 1) {
        showPromptMsg($.i18n.get('selectOneRecord'));
        return false;
    } else {
        return multiple ? selectedRows : selectedRows[0];
    }
}

//显示提示信息
function showPromptMsg(msg) {
    $.messager.alert($.i18n.get('prompt'), msg, 'warning');
}

//格式化日期  yyyy-MM-dd hh:mm:ss
function formatStringDateTime(value) {
  if(value==""||value==null||value=="undefined"){
      return "";
  }else{
      return value.substr(0, 10)+" "+value.substr(11, 8);
  }
}

//格式化日期  yyyy-MM-dd
function formatStringDate(value) {
if(value==""||value==null||value=="undefined"){
      return "";
}else{
      return value.substr(0, 10);
}
}

3.css

.panel-body-noheader {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

#conditionDiv {
    height: auto !important;
}

#conditionDiv div {
    display: block;
    height: auto !important;
}

#searchCondition, #query-toolbar, #datagrid-toolbar {
    padding: 5px 5px 5px 10px;
}

#queryForm div {
    padding-left: 10px;
    padding-bottom:6px;
}

#queryForm div, #queryForm span {
    display: inline-block;
}

.lable_algin{
    text-align: right;
}

其修远兮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Easyui的增删改查
weixin_45174624的博客
07-05 255
重点： 我们今天用easyui来实现增删改查 我们今天要用到的布局有datagrid,dialog,form布局，用这几个控件完成一个简单的布局 第二个重点： 1.实现前后端的分离 我们要如何实现呢，接下来 思路： 首先利用form 和dialog进行布局,然后利用datadrid进行数据的回显以及传递数据操作所需要的值，然后我们利用修改传递过来的值进行增删改查。 UserDao package...
easyui简单的增删改查范例
12-15
简单的easyui范例，其中很多属性使用的默认设置，所以没有那么多属性，实现了简单的布局，组件使用。以及增删该查功能
EsayUi 增删改查
^.^的博客
07-30 141
前后端分离带来的好处 陈旧的开发模式 美工（ui工程师：出一个项目模型） java工程师：将原有的html转成jsp，动态展示数据 缺点： 客户需要调节前端的展示效果 解决：由美工去重新排版，重新选色。 Vs 前后端分离 美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。 在开发前约定数据交互的格式。 java工程师的工作：写方法返回数据如tree_data1.json 美工...
easyui的增删改查
weixin_43934140的博客
06-14 204
easyui增删改查 今天我们要实现用easyui来做增删改查： 其中代码如下： 我以前写过通用的增删改查：不知道的可以去看看我以前的博客 现在直接调用方法就好，非常的方便，相比以前的代码量没有这么多 /** * 通过中间表查询登录用户所对应的权限 * @param paMap * @param pb * @return * @throws InstantiationExcep...
easyui增删改查案例
03-24
在这个"easyui增删改查案例"中，我们将深入探讨如何利用 EasyUI 实现数据的添加（Add）、删除（Delete）、修改（Modify）和查询（Query）功能，这些都是Web应用程序中最基础且重要的操作。 1. **EasyUI 的基本概念*...
EasyUI 增删改查的简单实现
06-22
它提供了丰富的组件，如表格、下拉菜单、按钮、对话框等，使得开发者能够快速构建用户界面，尤其是对于增删改查（CRUD）操作的页面。在这个项目中，我们看到使用了 Maven 作为构建工具，SpringMVC 作为后端 MVC 框架...
ssm、easyui的增删改查
06-14
总结来说，"ssm、easyui的增删改查"项目是一个基础的Java Web教程，它涵盖了Spring、SpringMVC、MyBatis三大框架的整合应用，以及EasyUI的前端展示。这个项目可以帮助开发者掌握后端数据处理和前端界面设计的基本...
MVC+EasyUI增删改查
07-24
在" MVC+EasyUI 增删改查"的应用中，我们通常会遇到以下几个核心知识点： 1. **MVC 模式**：Model 负责处理业务逻辑和数据管理，View 负责展示数据，Controller 处理用户请求并协调 Model 和 View 的交互。在实际...
easyUI增删改查
01-07
在“easyUI 增删改查”的主题中，我们将深入探讨如何利用EasyUI实现数据管理的核心功能：增加、删除、修改和查询。 1. **增加（Add）** 在EasyUI中，增加数据通常涉及到表格和表单的交互。首先，你需要创建一个...
基于SSH的EasyUI的数据增删改查
03-18
基于SSH的EasyUI的数据增删改查
EasyUi框架，增删改查例子（保证完整）
12-09
EasyUi框架，增删改查例子（保证完整）。直接导入eclipse即可。保证最新。
ssm easyUI-datagrid增删改查jsp网页
12-08
用于myeclipse软件下ssm框架 easyUIdatagrid增删改查
EasyUi 增删改查
XIAYICHEN1102的博客
12-27 474
一、弹出对话框就行操作： index.xml: 先引用一些css和js： [html] view plain copy link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css" />       link 
easyui之增删改查
weixin_43977846的博客
06-14 173
easyui之增删改查 今天，我又在之前的基础上给easyui添加了增删改方法（采用前后端分离的格式） 还是我上次发的基础上添加的方法，所以直接发代码了， 首先，写dao方法 public class UserDao extends JsonBaseDao { /** * 登录 * @param paMap * @param pageBean * @return * @th...
easyui 增删改查实现js以及html代码
最新发布
04-07
我可以回答这个问题。以下是一个简单的 easyui 增删改查实现的示例代码： HTML 代码： ``` <div class="easyui-layout" style="width:100%;height:100%;"> <div region="west" split="true" title="菜单" style="width:200px;"> <ul id="menu"></ul> </div> <div region="center" title="内容"> <table id="dg"></table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a> </div> </div> </div> ``` JS 代码： ``` $(function(){ $('#menu').tree({ url:'menu.json', onClick:function(node){ $('#dg').datagrid({ url:'get_users.php?menu='+node.id, fit:true, fitColumns:true, singleSelect:true, rownumbers:true, pagination:true, toolbar:'#toolbar', columns:[[ {field:'id',title:'编号',width:50}, {field:'name',title:'姓名',width:100}, {field:'sex',title:'性别',width:50}, {field:'age',title:'年龄',width:50}, {field:'phone',title:'电话',width:100}, {field:'email',title:'邮箱',width:150}, {field:'address',title:'地址',width:200}, {field:'remark',title:'备注',width:200} ]] }); } }); }); function newUser(){ $('#dlg').dialog('open').dialog('setTitle','新增'); $('#fm').form('clear'); url = 'save_user.php'; } function editUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','编辑'); $('#fm').form('load',row); url = 'update_user.php?id='+row.id; } } function saveUser(){ $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.errorMsg){ $.messager.show({ title: 'Error', msg: result.errorMsg }); } else { $('#dlg').dialog('close'); $('#dg').datagrid('reload'); } } }); } function destroyUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('Confirm','Are you sure you want to delete this user?',function(r){ if (r){ $.post('destroy_user.php',{id:row.id},function(result){ if (result.success){ $('#dg').datagrid('reload'); } else { $.messager.show({ title: 'Error', msg: result.errorMsg }); } },'json'); } }); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值