关闭

easyui增删改查

标签: easyuieasyui增删改查
677人阅读 评论(0) 收藏 举报
分类:


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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36630次
    • 积分:642
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:6篇
    • 译文:0篇
    • 评论:13条
    最新评论