easyui页面上的增删改功能

<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../jquery/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/themes/icon.css">
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../jquery/validateForm.js"></script>
<script type="text/javascript">
$(function(){
    //查询
    $("#btn-serch").click(function(){
        $("#dg").datagrid('load',{
            bNum:$("#bNum").val(),
            bName:$("#bName").val()
        })
    })
    //图书信息刷新
    $("#btn-refresh").click(function(){
        $("#btn-serch").form('clear');
        $("#dg").datagrid('load',{
            bNum:$("#bNum").val(),
            bName:$("#bName").val()
        });
    })
    //图书信息修改
    $("#btn-upt").click(function(){
        if($("#dg").datagrid('getSelections').length==0){
            $.messager.alert('提示消息','请选中一行','warning');
        }else if($("#dg").datagrid('getSelections').length>1){
            $.messager.alert('提示消息','每次只能选中一行','info');
            $("#dg").datagrid('reload');
        }else{
            $("#btn-upt-form").form('load','../getBookInfo?bId='+$("#dg").datagrid('getSelected').bId);
            $("#bt-upt").dialog({
                closed:false,
                buttons:[{
                    text:'保存',
                    iconCls:'icon-save',
                    handler:function(){
                        $('#btn-upt-form').form('submit', {    
                            url:'../uptdateBook',    
                            onSubmit: function(){    
                                return $('#btn-upt-form').form('validate');  
                            },    
                            success:function(data){    
                                if(data==1){
                                    $("#bt-upt").dialog({closed:true});
                                    $('#btn-upt-form').form('clear');
                                    $("#dg").datagrid('load');
                                    $.messager.show({
                                        title:'消息提示',
                                        msg:'修改成功',
                                        showType:'show',
                                    });

                                }else{
                                    $.messager.alert('消息提示','修改失败','error');
                                }    
                            }    
                        });  
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $("#bt-upt").dialog({closed:true});        
                        $("#dg").datagrid('load');
                    }
                }]
            })
        }
    })
    //图书信息添加
    $("#btn-save").click(function(){
        $("#bt-save").dialog({
            closed:false,
            buttons:[{
                text:'保存',
                handler:function(){
                    $('#btn-save-form').form('submit', {    
                        url:'../saveBook',    
                        onSubmit: function(){    
                            return $('#btn-save-form').form('validate');  
                        },    
                        success:function(data){    
                            if(data==1){
                                $("#dg").datagrid('reload');
                                $("#bt-save").dialog({closed:true});
                                $('#btn-save-form').form('clear');
                                $.messager.show({
                                    title:'消息提示',
                                    msg:'添加成功',
                                    showType:'show',
                                });

                            }else{
                                alert("添加失败");
                            }    
                        }    
                    });  
                }
            },{
                text:'关闭',
                handler:function(){
                    $("#bt-save").dialog({closed:true});        
                }
            }]
        })
    })
    //图书信息删除
    $("#btn-del").click(function(){
        if($("#dg").datagrid('getSelections').length==0){
            $.messager.alert('提示消息','最少选中一行','info');
        }else{
            var bIds=[];
            var array = $("#dg").datagrid('getSelections');
            for(var i in array){
                var a = bIds.push(array[i].bId);
            }
            $.post('../delBook',{'BookId[]':bIds},function(data){
                if(data==1){
                    $("#dg").datagrid('reload');
                    $('#btn-save-form').form('clear');
                    $.messager.show({
                        title:'消息提示',
                        msg:'删除成功',
                        showType:'show',
                    });
                }else{
                    alert('删除失败');
                }
            })
        }
    })
    $("#dg").datagrid({
        url:'../findBookPageWith',
        fit:true,
        fitColumns:true,
        toolbar:"#btn",
        pagination:true,
        pagePosition:'top',
        columns:[[{
            field:'bId',
            title:'图书ID',
            100,
            checkbox:true
        },{
            field:'bNum',
            title:'图书编号',
            100
        },{
            field:'bName',
            title:'图书名称',
            100
        },{
            field:'bPrice',
            title:'图书单价',
            100
        },{
            field:'publish',
            title:'出版社',
            100
        },{
            field:'publishDate',
            title:'出版时间',
            100
        },{
            field:'author',
            title:'作者',
            100
        },{
            field:'instroduction',
            title:'简介',
            100
        },{
            field:'quantity',
            title:'数量',
            100
        },{
            field:'categoryName',
            title:'类型',
            100
        }]]
    })
})
</script>
</head>
<body>
<div id="btn">
    <form id="btn-serch">
        <table>
            <tr>
                <td>根据编号查:</td><td><input id="bNum" class="easyui-textbox"  style="150px"></td>
                <td>根据书名查:</td><td><input id="bName" class="easyui-textbox"  style="150px">
                <a id="btn-serch" href="#" class="easyui-linkbutton" data-options="plain:true">图书查询</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a id="btn-refresh" href="#" class="easyui-linkbutton" data-options="plain:true">图书信息刷新</a>
                </td>
            </tr>
        </table>
    </form>
<a id="btn-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">图书信息添加</a>
<a id="btn-upt" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">图书信息修改</a>  
<a id="btn-del" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">图书信息删除</a>
</div>
<div id="bt-save" class="easyui-dialog" title="图书信息添加" data-options="closed:true,closable:false" style=" 300px;height: 350px;">
    <form id="btn-save-form" method="post">
        <table>
            <tr>
            <td>图书编号</td>
            <td><input name="bNum" class="easyui-textbox" style="200px" data-options="readonlu:true,validType:'numbers'"></td>
            </tr>
            <tr>
            <td>图书名称</td>
            <td><input name="bName" class="easyui-textbox" style="200px" data-options="readonlu:true,validType:'ch'"></td>
            </tr>
            <tr>
            <td>图书单价</td>
            <td><input name="bPrice" class="easyui-textbox" style="200px" data-options="readonlu:true,validType:'numbers'"></td>
            </tr>
            <tr>
            <td>出版社</td>
            <td><input name="publish" class="easyui-textbox" style="200px" data-options="readonlu:true"></td>
            </tr>
            <tr>
            <td>出版日期</td>
            <td><input name="publishDate" type= "text" class= "easyui-datebox" data-options="readonlu:true,validType:'date'"></input></td>
            </tr>
            <tr>
            <td>作者</td>
            <td><input name="author" class="easyui-textbox" style="200px"    data-options="readonlu:true"></td>
            </tr>
            <tr>
            <td>简介</td>
            <td><input name="instroduction" class="easyui-textbox" style="200px" data-options="readonlu:true"></td>
            </tr>
            <tr>
            <td>数量</td>
            <td><input name="quantity" class="easyui-textbox" style="200px" data-options="readonlu:true,validType:'numbers'"></td>
            </tr>
            <tr>
            <td>类型ID</td>
            <td><select class="easyui-combogrid" name="categoryId" style="80px;"   
        data-options="    
            panelWidth:450,    
            idField:'categoryId',
            editable:false,
            fit:true,
            fitColumns:true,
            pagination:true,    
            textField:'categoryName',    
            url:'../findCategoryWithPage',    
            columns:[[    
                {field:'categoryId',title:'图书类型ID',60},    
                {field:'categoryName',title:'图书类型名称',100}
            ]]"></select></td>
            </tr>
        </table>
    </form>
</div>

<div id="bt-upt" class="easyui-dialog" title="图书信息修改" data-options="closed:true,closable:false" style=" 300px;height: 350px;">
    <form method="get" id="btn-upt-form">
        <table>
            <tr>
            <td>图书编号</td>
            <td><input name="bNum" class="easyui-validatebox" data-options="required:true" style="200px"/>
                <input name="bId" type="hidden">
            </td>
            </tr>
            <tr>
            <td>图书名称</td>
            <td><input name="bName" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>图书单价</td>
            <td><input name="bPrice" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>出版社</td>
            <td><input name="publish" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>出版日期</td>
            <td><input  name="publishDate"  type= "text" class= "easyui-datebox" data-options="required:true" > </input></td>
            </tr>
            <tr>
            <td>作者</td>
            <td><input name="author" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>简介</td>
            <td><input name="instroduction" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>数量</td>
            <td><input name="quantity" class="easyui-validatebox" data-options="required:true" style="200px"></td>
            </tr>
            <tr>
            <td>类型ID</td>
            <td><select class="easyui-combogrid" name="categoryId" style="80px;"   
        data-options="    
            panelWidth:450,    
            idField:'categoryId',
            editable:false,
            fit:true,
            fitColumns:true,
            pagination:true,    
            textField:'categoryName',    
            url:'../findCategoryWithPage',    
            columns:[[    
                {field:'categoryId',title:'图书类型ID',60},    
                {field:'categoryName',title:'图书类型名称',100}
            ]]"></select></td>
            </tr>
        </table>
    </form>
</div>
<div id="dg"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/manager222/p/9959840.html