本章博客我将带你实现,在前一篇的基础上,新增实现弹框式添加数据到数据库的功能。(接下来的博客将会推出,修改,删除数据功能)
效果图,4-1:
所谓弹窗式,就像图4-1的那样,弹出一个窗口,用户输入信息然后新增到数据库,
前台HTML如下:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="web._20160522.Add" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #fm{
- margin:0;
- padding:10px 30px;
- }
- .ftitle{
- font-size:14px;
- font-weight:bold;
- padding:5px 0;
- margin-bottom:10px;
- border-bottom:1px solid #ccc;
- }
- .fitem{
- margin-bottom:5px;
- }
- .fitem label{
- display:inline-block;
- width:80px;
- }
- .fitem input{
- width:160px;
- }
- </style>
- <script src="../js/jquery-1.7.1.min.js"></script>
- <script src="../EasyUI/jquery.min.js"></script>
- <script src="../EasyUI/jquery.easyui.min.js"></script>
- <link href="../EasyUI/themes/icon.css" rel="stylesheet" />
- <script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>
- <link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />
- <script src="../js/add.js"></script>
- </head>
- <body>
- <table id="tb1"></table>
- <div id="tb" style="padding:5px">
- <div style="margin-bottom:5px">
- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">刷新</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newEqument()">添加</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editEqument()">修改</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyEqument()">删除</a>
- </div>
- <div>
- 查询设备:<input id="eq" type="text" name="Eq" style="width:150px"/>
- <select id="order" class="easyui-combobox" panelHeight