您的位置: 首页  >  文章  >  easyui datagrid 弹窗添加修改删除

easyui datagrid 弹窗添加修改删除

分类: 文章 • 2022-10-08 21:31:37

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

效果图，4-1：

easyui datagrid 弹窗添加修改删除


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

前台HTML如下：

[html] view plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="web._20160522.Add" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title></title>  
  9.     <style type="text/css">  
  10.         #fm{  
  11.             margin:0;  
  12.             padding:10px 30px;  
  13.         }  
  14.         .ftitle{  
  15.             font-size:14px;  
  16.             font-weight:bold;  
  17.             padding:5px 0;  
  18.             margin-bottom:10px;  
  19.             border-bottom:1px solid #ccc;  
  20.         }  
  21.         .fitem{  
  22.             margin-bottom:5px;  
  23.         }  
  24.         .fitem label{  
  25.             display:inline-block;  
  26.             width:80px;  
  27.         }  
  28.         .fitem input{  
  29.             width:160px;  
  30.         }  
  31.     </style>  
  32.   
  33.     <script src="../js/jquery-1.7.1.min.js"></script>  
  34.     <script src="../EasyUI/jquery.min.js"></script>  
  35.     <script src="../EasyUI/jquery.easyui.min.js"></script>  
  36.     <link href="../EasyUI/themes/icon.css" rel="stylesheet" />  
  37.     <script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>  
  38.     <link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />  
  39.     <script src="../js/add.js"></script>  
  40. </head>  
  41. <body>  
  42.     <table id="tb1"></table>  
  43.     <div id="tb" style="padding:5px">  
  44.         <div style="margin-bottom:5px">  
  45.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">刷新</a>  
  46.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newEqument()">添加</a>  
  47.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editEqument()">修改</a>  
  48.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyEqument()">删除</a>  
  49.         </div>  
  50.         <div>  
  51.             查询设备：<input id="eq" type="text" name="Eq" style="width:150px"/>  
  52.             <select id="order" class="easyui-combobox" panelHeight="auto" style="width:100px">  
  53.                 <option value="asc">升序</option>  
  54.                 <option value="desc">降序</option>  
  55.             </select>  
  56.             <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search()">查询</a>  
  57.         </div>  
  58.     </div>  
  59.   
  60.     <%-- 弹窗  Start--%>  
  61.         <div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px"  
  62.             closed="true" buttons="#dlg-buttons">  
  63.         <div class="ftitle">设备信息</div>  
  64.         <form id="fm" method="post" novalidate>  
  65.             <div class="fitem">  
  66.                 <label>设备编号:</label>  
  67.                 <input id="Eq_Number" class="easyui-textbox" required="true">  
  68.             </div>  
  69.             <div class="fitem">  
  70.                 <label>出厂号:</label>  
  71.                 <input id="Eq_SN" class="easyui-textbox" required="true">  
  72.             </div>  
  73.             <div class="fitem">  
  74.                 <label>名称:</label>  
  75.                 <input id="Eq_Name" class="easyui-textbox" required="true">  
  76.             </div>  
  77.             <div class="fitem">  
  78.                 <label>型号:</label>  
  79.                 <input id="Eq_Type" class="easyui-textbox" required="true">  
  80.             </div>  
  81.             <div class="fitem">  
  82.                 <label>规格:</label>  
  83.                 <input id="Eq_Standard" class="easyui-textbox" required="true">  
  84.             </div>  
  85.             <div class="fitem">  
  86.                 <label>厂家:</label>  
  87.                 <input id="Eq_Producer" class="easyui-textbox" required="true">  
  88.             </div>  
  89.         </form>  
  90.     </div>  
  91.     <div id="dlg-buttons">  
  92.         <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveEqument()" style="width:90px">Save</a>  
  93.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>  
  94.     </div>  
  95.     <%-- 弹窗  End --%>  
  96. </body>  
  97. </html>  

由于js代码比较多，所以我封装到了add.js的文件

js代码如下：

[javascript] view plain copy
  1.     $(function () {  
  2.         $('#tb1').datagrid({  
  3.             url: '../20160521/EasyUI_load.ashx',  
  4.             width: 1100,  
  5.             title: '设备管理',  
  6.             method: 'get',  
  7.             toolbar: '#tb',  
  8.             columns: [[  
  9.                 { field: 'numID', title: '设备编号', width: 150 },  
  10.                 { field: '出厂号', title: '出厂号', width: 150 },  
  11.                 { field: '仪器名称', title: '名称', width: 150},  
  12.                 { field: '型号', title: '型号', width: 200 },  
  13.                 { field: '规格', title: '规格', width: 150 },  
  14.                 { field: '厂家', title: '厂家', width: 200 },  
  15.                 { field: '单价', title: '价格', width: 100}  
  16.             ]],  
  17.             pagination: true,  
  18.             pageSize:10,  
  19.             pageList: [10, 15, 20, 25],  
  20.         })  
  21.     })  
  22.   
  23. $(function () {  
  24.     obj = {  
  25.         search: function () {  
  26.             $('#tb1').datagrid('load', {  
  27.                 Equement: $('input[name="Eq"]').val(),  
  28.                 order: $("#order").combobox('getValue')  
  29.             });  
  30.         }  
  31.     }  
  32. })  
  33.   
  34. function reload() {  
  35.     document.getElementById("eq").value = ""  
  36.     $('#tb1').datagrid('load', {  
  37.         url: '../20160521/easyui_load.ashx',  
  38.         page: '1',  
  39.         rows:'10'  
  40.     });  
  41. }  
  42. function newEqument() {  
  43.     $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'New Equment');  
  44.     $('#fm').form('clear');  
  45. }  
  46.   
  47. function saveEqument() {  
  48.   
  49.     var Eq_Number = document.getElementById("Eq_Number").value;  
  50.     var Eq_SN = document.getElementById("Eq_SN").value;  
  51.     var Eq_Name = document.getElementById("Eq_Name").value;  
  52.     var Eq_Type = document.getElementById("Eq_Type").value;  
  53.     var Eq_Standard = document.getElementById("Eq_Standard").value;  
  54.     var Eq_Producer = document.getElementById("Eq_Producer").value;  
  55.     alert(Eq_Number);  
  56.   
  57.     $('#fm').form('submit', {  
  58.         url: "../20160522/Add.ashx?Eq_Number=" + Eq_Number + "&Eq_SN=" + Eq_SN + "&Eq_Name=" + Eq_Name + "&Eq_Type=" + Eq_Type +  
  59. "&Eq_Standard=" + Eq_Standard + "&Eq_Producer=" + Eq_Producer,  
  60.         onSubmit: function () {  
  61.             return $(this).form('validate');  
  62.         },  
  63.         success: function (result) {  
  64.             alert(result);  
  65.             if (result.indexOf("t") >0) {  
  66.                 $('#dlg').dialog('close');  
  67.                 $.messager.alert("提示", "恭喜您，信息添加成功", "info");  
  68.                 $('#tb1').datagrid('reload');  
  69.             }  
  70.             else {  
  71.                 $.messager.alert("提示", "添加失败，请重新操作！", "info");  
  72.                 return;  
  73.             }  
  74.         }  
  75.     });  
  76. }  
实现原理就是，获取输入input的值作为参数传到一般处理程序，然后获取接收到的信息进行数据库添加：

一般处理程序，代码如下：

[csharp] view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Script.Serialization;  
  6.   
  7.   
  8. namespace web._20160522  
  9. {  
  10.     /// <summary>  
  11.     /// Add1 的摘要说明  
  12.     /// </summary>  
  13.     public class Add1 : IHttpHandler  
  14.     {  
  15.   
  16.         public void ProcessRequest(HttpContext context)  
  17.         {  
  18.             string msg;  
  19.             context.Response.ContentType = "text/plain";  
  20.   
  21.             HelperClass.ToModel toModel = new HelperClass.ToModel()  
  22.             {  
  23.                 Eq_Number = context.Request.QueryString["Eq_Number"].ToString().Trim(),  
  24.                 Eq_SN = context.Request.QueryString["Eq_SN"].ToString().Trim(),  
  25.                 Eq_Name = context.Request.QueryString["Eq_Name"].ToString().Trim(),  
  26.                 Eq_Type = context.Request.QueryString["Eq_Type"].ToString().Trim(),  
  27.                 Eq_Standard = context.Request.QueryString["Eq_Standard"].ToString().Trim(),  
  28.                 Eq_Producer = context.Request.QueryString["Eq_Producer"].ToString().Trim()  
  29.             };  
  30.   
  31.             HelperClass.SqlHelper addModel=new HelperClass.SqlHelper();  
  32.   
  33.             if (addModel.Add(toModel) > 0)  
  34.             {  
  35.             msg = "['msg':'true']";  
  36.             context.Response.Write(msg);  
  37.             }  
  38.             else  
  39.             {  
  40.                 msg = "['msg':'false']";  
  41.                 context.Response.Write(msg);  
  42.             }  
  43.    
  44.         }  
  45.   
  46.         public bool IsReusable  
  47.         {  
  48.             get  
  49.             {  
  50.                 return false;  
  51.             }  
  52.         }  
  53.     }  
  54. }  
在一般处理程序中，我们将接收到的参数封装成一个实体对象，然后进行参数查询：

实体类ToModel，代码如下：

[csharp] view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace web.HelperClass  
  7. {  
  8.     public class ToModel  
  9.     {  
  10.   
  11.         private string _Eq_Number;  
  12.   
  13.         public string Eq_Number  
  14.         {  
  15.             get { return _Eq_Number; }  
  16.             set { _Eq_Number = value; }  
  17.         }  
  18.         private string _Eq_SN;  
  19.         public string Eq_SN  
  20.         {  
  21.             get { return _Eq_SN; }  
  22.             set { _Eq_SN = value; }  
  23.         }  
  24.   
  25.         private string _Eq_Name;  
  26.   
  27.         public string Eq_Name  
  28.         {  
  29.             get { return _Eq_Name; }  
  30.             set { _Eq_Name = value; }  
  31.         }  
  32.         private string _Eq_Type;  
  33.   
  34.         public string Eq_Type  
  35.         {  
  36.             get { return _Eq_Type; }  
  37.             set { _Eq_Type = value; }  
  38.         }  
  39.   
  40.         private string _Eq_Standard;  
  41.   
  42.         public string Eq_Standard  
  43.         {  
  44.             get { return _Eq_Standard; }  
  45.             set { _Eq_Standard = value; }  
  46.         }  
  47.         private string _Eq_Producer;  
  48.   
  49.         public string Eq_Producer  
  50.         {  
  51.             get { return _Eq_Producer; }  
  52.             set { _Eq_Producer = value; }  
  53.         }  
  54.     }  
  55. }  

参数化增加记录的方法（粘贴到SqlHelper类），代码如下：

[csharp] view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Data;  
  6. using System.Text;  
  7. using System.Data.SqlClient;  
  8.   
  9. namespace web.HelperClass  
  10. {  
  11.     public class SqlHelper  
  12.     {  
  13.         protected static readonly string conStr = @"Data Source=.;Database=db_equipment;uid=sa;pwd=123456";          
  14.         /// <summary>  
  15.         /// 增加一条数据  
  16.         /// </summary>  
  17.         public int Add(ToModel model)  
  18.         {  
  19.             StringBuilder strSql = new StringBuilder();  
  20.             strSql.Append("insert into tb_equipment(");  
  21.             strSql.Append("numID,出厂号,仪器名称,型号,规格,厂家)");  
  22.             strSql.Append(" values (");  
  23.             strSql.Append("@Eq_Number,@Eq_SN,@Eq_Name,@Eq_Type,@Eq_Standard,@Eq_Producer)");  
  24.             strSql.Append(";select @@IDENTITY");  
  25.             SqlParameter[] parameters = {  
  26.                     new SqlParameter("@Eq_Number", SqlDbType.NVarChar,255),  
  27.                     new SqlParameter("@Eq_SN", SqlDbType.NVarChar,255),  
  28.                     new SqlParameter("@Eq_Name", SqlDbType.NVarChar,255),  
  29.                     new SqlParameter("@Eq_Type", SqlDbType.NVarChar,255),  
  30.                     new SqlParameter("@Eq_Standard ", SqlDbType.NVarChar,255),  
  31.                     new SqlParameter("@Eq_Producer", SqlDbType.NVarChar,255)  
  32.         };  
  33.             parameters[0].Value = model.Eq_Number;  
  34.             parameters[1].Value = model.Eq_SN;  
  35.             parameters[2].Value = model.Eq_Name;  
  36.             parameters[3].Value = model.Eq_Type;  
  37.             parameters[4].Value = model.Eq_Standard;  
  38.             parameters[5].Value = model.Eq_Producer;  
  39.               
  40.             object obj = GetSingle(strSql.ToString(), parameters);  
  41.             if (obj == null)  
  42.             {  
  43.                 return 0;  
  44.             }  
  45.             else  
  46.             {  
  47.                 return Convert.ToInt32(obj);  
  48.             }  
  49.         }  
  50.         /// <summary>  
  51.         /// 执行一条计算查询结果语句，返回查询结果（object）。  
  52.         /// </summary>  
  53.         /// <param name="SQLString">计算查询结果语句</param>  
  54.         /// <returns>查询结果（object）</returns>  
  55.         public static object GetSingle(string SQLString, params SqlParameter[] cmdParms)  
  56.         {  
  57.             using (SqlConnection connection = new SqlConnection(conStr))  
  58.             {  
  59.                 using (SqlCommand cmd = new SqlCommand())  
  60.                 {  
  61.                     try  
  62.                     {  
  63.                         PrepareCommand(cmd, connection, null, SQLString, cmdParms);  
  64.                         object obj = cmd.ExecuteScalar();  
  65.                         cmd.Parameters.Clear();  
  66.                         if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))  
  67.                         {  
  68.                             return null;  
  69.                         }  
  70.                         else  
  71.                         {  
  72.                             return obj;  
  73.                         }  
  74.                     }  
  75.                     catch (System.Data.SqlClient.SqlException e)  
  76.                     {  
  77.                         throw e;  
  78.                     }  
  79.                 }  
  80.             }  
  81.         }  
  82.         private static void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, string cmdText, SqlParameter[] cmdParms)  
  83.         {  
  84.             if (conn.State != ConnectionState.Open)  
  85.                 conn.Open();  
  86.             cmd.Connection = conn;  
  87.             cmd.CommandText = cmdText;  
  88.             if (trans != null)  
  89.                 cmd.Transaction = trans;  
  90.             cmd.CommandType = CommandType.Text;//cmdType;  
  91.             if (cmdParms != null)  
  92.             {  
  93.   
  94.   
  95.                 foreach (SqlParameter parameter in cmdParms)  
  96.                 {  
  97.                     if ((parameter.Direction == ParameterDirection.InputOutput || parameter.Direction == ParameterDirection.Input) &&  
  98.                         (parameter.Value == null))  
  99.                     {  
  100.                         parameter.Value = DBNull.Value;  
  101.                     }  
  102.                     cmd.Parameters.Add(parameter);  
  103.                 }  
  104.             }  
  105.         }  
  106.     }  
  107. }  
  108.    

那么功能已经实现了，查询新增的设备，如图4-2：

easyui datagrid 弹窗添加修改删除

在这里，也添加了刷新功能，实现原理很简单，就是重新提交两个参数，page:1,rows:10给查询功能的一般处理程序（03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)）,然后将搜索框设置为空，代码在add.js。

相关推荐