easyui datagrid 弹窗添加修改删除_easyui 弹出dialog 含有 datagrid-CSDN博客

本文链接：https://blog.csdn.net/qq_33238935/article/details/72781262

本章博客我将带你实现，在前一篇的基础上，新增实现弹框式添加数据到数据库的功能。（接下来的博客将会推出，修改，删除数据功能）

效果图，4-1：

所谓弹窗式，就像图4-1的那样，弹出一个窗口，用户输入信息然后新增到数据库，

前台HTML如下：

[html]view plaincopy 
   
 <%@ 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