【ASP.NET MVC系列】淺談jqGrid 在ASP.NET MVC中增刪改查

時間 2019-11-18

標籤 ASP.NET MVC系列淺談 jqgrid asp.net asp mvc 增刪欄目 ASP 简体版

原文原文鏈接

ASP.NET MVC系列文章javascript

【01】淺談Google Chrome瀏覽器（理論篇）css

【02】淺談Google Chrome瀏覽器（操做篇）（上）html

【03】淺談Google Chrome瀏覽器（操做篇）（下）java

【04】淺談ASP.NET框架 jquery

【05】淺談ASP.NET MVC運行過程   git

【06】淺談ASP.NET MVC 控制器 github

【07】淺談ASP.NET MVC 路由   ajax

【08】淺談ASP.NET MVC 視圖 sql

【09】淺談ASP.NET MVC 視圖與控制器傳遞數據數據庫

【10】淺談jqGrid 在ASP.NET MVC中增刪改查

【11】淺談ASP.NET 頁面之間傳值的幾種方式

【12】淺談緩存技術在ASP.NET中的運用

【13】淺談NuGet在VS中的運用

【14】淺談ASP.NET 程序發佈過程

【15】淺談數據註解和驗證

【16】淺談依賴注入

【17】淺談表單和HTML輔助方法

【18】淺談基於APS.NET身份驗證

【19】淺談ASP.NET MVC 模型

【20】淺談ASP.NET MVC 單元測試

【21】淺談ASP.NET MVC網絡安全;

【22】淺談ASP.NET MVC八大類擴展

【23】再談ASP.NET MVC Routing

【24】淺談ASP.NET 高級話題

【25】淺談大型ASP.NET MVC項目（含DEMO）

【26】下一系列：ASP.NET WebAPI

1 概述

本篇文章主要是關於JqGrid的，主要功能包括使用JqGrid增刪查改，導入導出，廢話很少說，直接進入正題。

2 Demo相關

2.1 Demo展現

第一部分

第二部分

2.2 源碼和DB下載

原本國慶上傳到github上的，如今github有點問題，所以後期再傳到github，有須要源碼的，能夠在評論區留下本身聯繫聯繫方式，我直接傳給你。

3 公共模塊

3.1 Model實體—EmployeeInfo

 1 using MVCCrud.Areas.DBUtility;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Data;
 5 using System.Data.SqlClient;
 6 using System.Linq;
 7 using System.Text;
 8 using System.Web;
 9 
10 namespace MVCCrud.Areas.JqGridDemo.Models
11 {
12    //EmployeeInfo實體類
13     public class EmployeeInfo
14     {
15         public string EmployeeID { get; set; }
16         public string EmployeeName { get; set; }
17         public string EmployeeMajor { get; set; }
18         public string EmployeeDepartment { get; set; }
19         public string EmployeeTel { get; set; }
20         public string EmployeeEmail { get; set; }
21         public string EmployeeJiGuan { get; set; }
22         public string EmployeeAddress { get; set; }
23         public string EmployeePosition { get; set; }
24         public DateTime EmployeeBirthday { get; set; }
25     }
26 }

View Code

3.2 DBHelper幫助類

  1 using System;
  2 using System.Collections;
  3 using System.Collections.Generic;
  4 using System.Configuration;
  5 using System.Data;
  6 using System.Data.SqlClient;
  7 using System.Linq;
  8 using System.Security.Cryptography;
  9 using System.Text;
 10 using System.Web;
 11 using System.Web.UI.WebControls;
 12 
 13 namespace MVCCrud.Areas.DBUtility
 14 {
 15     public abstract class DbHelperSQL
 16     {
 17         /*
 18          * content:DbHelper幫助類
 19          *author:Alan_beijing
 20          * date:2017-10-01
 21         */
 22         public DbHelperSQL()
 23         {
 24             //構造函數
 25         }
 26         protected static string ConnectionString = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;
 27         protected static SqlConnection Connection;
 28         //定義數據庫的打開和關閉方法
 29         protected static void Open()
 30         {
 31             if (Connection == null)
 32             {
 33                 Connection = new SqlConnection(ConnectionString);
 34             }
 35             if (Connection.State.Equals(ConnectionState.Closed))
 36             {
 37                 Connection.Open();
 38             }
 39         }
 40         protected static void Close()
 41         {
 42             if (Connection != null)
 43             {
 44                 Connection.Close();
 45             }
 46         }
 47 
 48         // 公有方法，獲取數據，返回一個DataSet。    
 49         public static DataSet GetDataSet(string SqlString)
 50         {
 51             using (SqlConnection connection = new SqlConnection(ConnectionString))
 52             {
 53                 connection.Open();
 54                 using (SqlCommand cmd = new SqlCommand(SqlString, connection))
 55                 {
 56                     using (SqlDataAdapter da = new SqlDataAdapter(cmd))
 57                     {
 58                         DataSet ds = new DataSet();
 59                         try
 60                         {
 61                             da.Fill(ds, "ds");
 62                             cmd.Parameters.Clear();
 63                         }
 64                         catch (System.Data.SqlClient.SqlException ex)
 65                         {
 66                             throw new Exception(ex.Message);
 67                         }
 68                         connection.Close();
 69                         return ds;
 70                     }
 71                 }
 72             }
 73         }
 74         // 公有方法，獲取數據，返回一個DataTable。    
 75         public static DataTable GetDataTable(string SqlString)
 76         {
 77             DataSet dataset = GetDataSet(SqlString);
 78             return dataset.Tables[0];
 79         }
 80         public static int ExecuteSQL(String SqlString, Hashtable MyHashTb)
 81         {
 82             int count = -1;
 83             SqlConnection connectiontemp = new SqlConnection(ConnectionString);
 84             connectiontemp.Open();
 85             try
 86             {
 87                 SqlCommand cmd = new SqlCommand(SqlString, connectiontemp);
 88                 foreach (DictionaryEntry item in MyHashTb)
 89                 {
 90                     string[] CanShu = item.Key.ToString().Split('|');
 91                     if (CanShu[1].ToString().Trim() == "string")
 92                     {
 93                         cmd.Parameters.Add(CanShu[0], SqlDbType.VarChar);
 94                     }
 95                     else if (CanShu[1].ToString().Trim() == "int")
 96                     {
 97                         cmd.Parameters.Add(CanShu[0], SqlDbType.Int);
 98                     }
 99                     else if (CanShu[1].ToString().Trim() == "text")
100                     {
101                         cmd.Parameters.Add(CanShu[0], SqlDbType.Text);
102                     }
103                     else if (CanShu[1].ToString().Trim() == "datetime")
104                     {
105                         cmd.Parameters.Add(CanShu[0], SqlDbType.DateTime);
106                     }
107                     else
108                     {
109                         cmd.Parameters.Add(CanShu[0], SqlDbType.VarChar);
110                     }
111                     cmd.Parameters[CanShu[0]].Value = item.Value.ToString();
112                 }
113                 count = cmd.ExecuteNonQuery();
114             }
115             catch
116             {
117                 count = -1;
118             }
119             finally
120             {
121                 connectiontemp.Close();
122             }
123             return count;
124         }
125         // 公有方法，執行Sql語句。對Update、Insert、Delete爲影響到的行數，其餘狀況爲-1
126         public static int ExecuteSQL(String SqlString)
127         {
128             int count = -1;
129             SqlConnection connectionTemp = new SqlConnection(ConnectionString);
130             connectionTemp.Open();
131             try
132             {
133                 SqlCommand cmd = new SqlCommand(SqlString, connectionTemp);
134                 count = cmd.ExecuteNonQuery();
135             }
136             catch
137             {
138                 count = -1;
139             }
140             finally
141             {
142                 connectionTemp.Close();
143             }
144             return count;
145         }
146         // 公有方法，執行一組Sql語句。返回是否成功,採用事務管理，發現異常時回滾數據
147         public static bool ExecuteSQL(string[] SqlStrings)
148         {
149             bool success = true;
150             SqlConnection connectionTemp = new SqlConnection(ConnectionString);
151             connectionTemp.Open();
152             SqlCommand cmd = new SqlCommand();
153             SqlTransaction trans = Connection.BeginTransaction();
154             cmd.Connection = connectionTemp;
155             cmd.Transaction = trans;
156             try
157             {
158                 foreach (string str in SqlStrings)
159                 {
160                     cmd.CommandText = str;
161                     cmd.ExecuteNonQuery();
162                 }
163                 trans.Commit();
164             }
165             catch
166             {
167                 success = false;
168                 trans.Rollback();
169             }
170             finally
171             {
172                 connectionTemp.Close();
173             }
174             return success;
175         }
176         // 執行一條計算查詢結果語句，返回查詢結果（object）。        
177         public static object GetSingle(string SQLString)
178         {
179             using (SqlConnection connection = new SqlConnection(ConnectionString))
180             {
181                 using (SqlCommand cmd = new SqlCommand(SQLString, connection))
182                 {
183                     try
184                     {
185                         connection.Open();
186                         object obj = cmd.ExecuteScalar();
187                         if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
188                         {
189                             connection.Close();
190                             return null;
191                         }
192                         else
193                         {
194                             connection.Close();
195                             return obj;
196                         }
197                     }
198                     catch (System.Data.SqlClient.SqlException e)
199                     {
200                         connection.Close();
201                         return null;
202                         //throw e;
203                     }
204                 }
205             }
206         }
207         public static object GetSingle(string SQLString, int Times)
208         {
209             using (SqlConnection connection = new SqlConnection(ConnectionString))
210             {
211                 using (SqlCommand cmd = new SqlCommand(SQLString, connection))
212                 {
213                     try
214                     {
215                         connection.Open();
216                         cmd.CommandTimeout = Times;
217                         object obj = cmd.ExecuteScalar();
218                         if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
219                         {
220                             connection.Close();
221                             return null;
222                         }
223                         else
224                         {
225                             connection.Close();
226                             return obj;
227                         }
228                     }
229                     catch (System.Data.SqlClient.SqlException e)
230                     {
231                         connection.Close();
232                         //throw e;
233                         return null;
234                     }
235                 }
236             }
237         }
238         public static object GetSingle(string SQLString, params SqlParameter[] cmdParms)
239         {
240             using (SqlConnection connection = new SqlConnection(ConnectionString))
241             {
242                 using (SqlCommand cmd = new SqlCommand())
243                 {
244                     try
245                     {
246                         PrepareCommand(cmd, connection, null, SQLString, cmdParms);
247                         object obj = cmd.ExecuteScalar();
248                         cmd.Parameters.Clear();
249                         if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
250                         {
251                             connection.Close();
252                             return null;
253                         }
254                         else
255                         {
256                             connection.Close();
257                             return obj;
258                         }
259                     }
260                     catch (System.Data.SqlClient.SqlException e)
261                     {
262                         connection.Close();
263                         //throw e;
264                         return null;
265                     }
266                 }
267             }
268         }
269         // 執行SQL語句，返回影響的記錄數
270         public static int ExecuteSql(string SQLString, params SqlParameter[] cmdParms)
271         {
272             using (SqlConnection connection = new SqlConnection(ConnectionString))
273             {
274                 using (SqlCommand cmd = new SqlCommand())
275                 {
276                     try
277                     {
278                         PrepareCommand(cmd, connection, null, SQLString, cmdParms);
279                         int rows = cmd.ExecuteNonQuery();
280                         cmd.Parameters.Clear();
281                         connection.Close();
282                         return rows;
283                     }
284                     catch (System.Data.SqlClient.SqlException e)
285                     {
286                         connection.Close();
287                         //throw e;
288                         return 0;
289                     }
290                 }
291             }
292         }
293         //執行查詢語句，返回DataSet
294         public static DataSet Query(string SQLString, params SqlParameter[] cmdParms)
295         {
296             using (SqlConnection connection = new SqlConnection(ConnectionString))
297             {
298                 SqlCommand cmd = new SqlCommand();
299                 PrepareCommand(cmd, connection, null, SQLString, cmdParms);
300                 using (SqlDataAdapter da = new SqlDataAdapter(cmd))
301                 {
302                     DataSet ds = new DataSet();
303                     try
304                     {
305                         da.Fill(ds, "ds");
306                         cmd.Parameters.Clear();
307 
308                     }
309                     catch (System.Data.SqlClient.SqlException ex)
310                     {
311                         throw new Exception(ex.Message);
312                     }
313                     connection.Close();
314                     return ds;
315                 }
316             }
317         }
318         private static void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, string cmdText, SqlParameter[] cmdParms)
319         {
320             if (conn.State != ConnectionState.Open)
321                 conn.Open();
322             cmd.Connection = conn;
323             cmd.CommandText = cmdText;
324             if (trans != null)
325                 cmd.Transaction = trans;
326             cmd.CommandType = CommandType.Text;//cmdType;
327             if (cmdParms != null)
328             {
329                 foreach (SqlParameter parameter in cmdParms)
330                 {
331                     if ((parameter.Direction == ParameterDirection.InputOutput || parameter.Direction == ParameterDirection.Input) &&
332                         (parameter.Value == null))
333                     {
334                         parameter.Value = DBNull.Value;
335                     }
336                     cmd.Parameters.Add(parameter);
337                 }
338             }
339         }
340     }
341 }

View Code

4 數據訪問層DAL

4.1 對EmployeeInfo的CRUD

  1 using MVCCrud.Areas.DBUtility;
  2 using MVCCrud.Areas.JqGridDemo.Models;
  3 using System;
  4 using System.Collections.Generic;
  5 using System.Data;
  6 using System.Data.SqlClient;
  7 using System.Linq;
  8 using System.Text;
  9 using System.Web;
 10 
 11 namespace MVCCrud.Areas.DAL
 12 {
 13     public class EmployeeInfoToCRUD
 14     {
 15         /// <summary>
 16         /// 增長一條數據
 17         /// </summary>
 18         /// <param name="employeeInfo">EmployeeInfo對象</param>
 19         /// <returns>添加數據是否成功</returns>
 20         public int DALEmployeeInfoToDdd(EmployeeInfo employeeInfo)
 21         {
 22             StringBuilder strSql = new StringBuilder();
 23             strSql.Append("insert into EmployeeInfo(");
 24             strSql.Append("EmployeeID,EmployeeName,EmployeeMajor,EmployeeDepartment,EmployeeTel,EmployeeEmail,EmployeeJiGuan,EmployeeAddress,EmployeePosition,EmployeeBirthday)");
 25             strSql.Append(" values (");
 26             strSql.Append("@EmployeeID,@EmployeeName,@EmployeeMajor,@EmployeeDepartment,@EmployeeTel,@EmployeeEmail,@EmployeeJiGuan,@EmployeeAddress,@EmployeePosition,@EmployeeBirthday)");
 27             strSql.Append(";select @@IDENTITY");
 28             SqlParameter[] parameters =
 29                 {
 30                     new SqlParameter("@EmployeeID", SqlDbType.VarChar,50),
 31                     new SqlParameter("@EmployeeName", SqlDbType.VarChar,50),
 32                     new SqlParameter("@EmployeeMajor", SqlDbType.Text),
 33                     new SqlParameter("@EmployeeDepartment",SqlDbType.VarChar,50),
 34                     new SqlParameter("@EmployeeTel", SqlDbType.VarChar,50),
 35                     new SqlParameter("@EmployeeEmail", SqlDbType.VarChar,50),
 36                     new SqlParameter("@EmployeeJiGuan", SqlDbType.VarChar,50),
 37                     new SqlParameter("@EmployeeAddress", SqlDbType.VarChar,500),
 38                     new SqlParameter("@EmployeePosition", SqlDbType.VarChar, 50),
 39                     new SqlParameter("@EmployeeBirthday", SqlDbType.DateTime)
 40                  };
 41 
 42             parameters[0].Value = employeeInfo.EmployeeID;
 43             parameters[1].Value = employeeInfo.EmployeeName;
 44             parameters[2].Value = employeeInfo.EmployeeMajor;
 45             parameters[3].Value = employeeInfo.EmployeeDepartment;
 46             parameters[4].Value = employeeInfo.EmployeeTel;
 47             parameters[5].Value = employeeInfo.EmployeeEmail;
 48             parameters[6].Value = employeeInfo.EmployeeJiGuan;
 49             parameters[7].Value = employeeInfo.EmployeeAddress;
 50             parameters[8].Value = employeeInfo.EmployeePosition;
 51             parameters[9].Value = employeeInfo.EmployeeBirthday;
 52 
 53             object obj = DbHelperSQL.GetSingle(strSql.ToString(), parameters);
 54             if (obj == null)
 55             {
 56                 return 1;
 57             }
 58             else
 59             {
 60                 return Convert.ToInt32(obj);
 61             }
 62         }
 63 
 64         /// <summary>
 65         /// 刪除一條數據
 66         /// </summary>
 67         /// <param name="employeeID">查詢參數：員工ID</param>
 68         /// <returns>是否成功刪除</returns>
 69         public int DALEmployeeInfoToDelete(string employeeID)
 70         {
 71             StringBuilder strSql = new StringBuilder();
 72             strSql.Append("DELETE EmployeeInfo");
 73             strSql.Append(" WHERE EmployeeID=@EmployeeID ");
 74             SqlParameter[] parameters = {
 75                     new SqlParameter("@EmployeeID",SqlDbType.VarChar,50)};
 76             parameters[0].Value = employeeID;
 77 
 78             return DbHelperSQL.ExecuteSql(strSql.ToString(), parameters);
 79         }
 80 
 81         /// <summary>
 82         /// 獲取EmployeeInfo數據表
 83         /// </summary>
 84         /// <returns>返回EmployeeInfo數據表</returns>
 85         public DataTable DALEmployeeInfoToGetTable()
 86         {
 87             StringBuilder strSql = new StringBuilder();
 88             strSql.Append("SELECT * FROM EmployeeInfo ");
 89             return DbHelperSQL.GetDataTable(strSql.ToString());
 90         }
 91 
 92         /// <summary>
 93         /// 根據EmployeeName查詢EmployeeInfo實體表數據
 94         /// </summary>
 95         /// <param name="EmployeeName">查詢參數：EmployeeName</param>
 96         /// <returns>返回查詢到的DataTable</returns>
 97         public DataTable DALEmployeeInfoToGetTable(string EmployeeName)
 98         {
 99             string strSql = @"SELECT * FROM EmployeeInfo WHERE EmployeeName=@EmployeeName";
100             SqlParameter[] parameters = {
101                     new SqlParameter("@EmployeeName",SqlDbType.VarChar,50)
102             };
103             parameters[0].Value = EmployeeName;
104             return DbHelperSQL.Query(strSql, parameters).Tables["ds"];
105         }
106         /// <summary>
107         /// 根據employeeInfo條件更新數據
108         /// </summary>
109         /// <param name="employeeInfo">更新條件：employeeInfo</param>
110         public void DALEmployeeInfoToUpdate(EmployeeInfo employeeInfo)
111         {
112             StringBuilder strSql = new StringBuilder();
113             strSql.Append("UPDATE EmployeeInfo SET ");
114             strSql.Append("EmployeeName=@EmployeeName,EmployeeMajor=@EmployeeMajor,");
115             strSql.Append("EmployeeDepartment=@EmployeeDepartment,EmployeeTel=@EmployeeTel,EmployeeEmail=@EmployeeEmail,");
116             strSql.Append("EmployeeJiGuan=@EmployeeJiGuan,EmployeeAddress=@EmployeeAddress,EmployeePosition=@EmployeePosition,EmployeeBirthday=@EmployeeBirthday");
117             strSql.Append(" WHERE EmployeeID=@EmployeeID");
118             SqlParameter[] parameters = {
119                     new SqlParameter("@EmployeeID", SqlDbType.VarChar,50),
120                     new SqlParameter("@EmployeeName", SqlDbType.VarChar,50),
121                     new SqlParameter("@EmployeeMajor", SqlDbType.Text),
122                     new SqlParameter("@EmployeeDepartment",SqlDbType.VarChar,50),
123                     new SqlParameter("@EmployeeTel", SqlDbType.VarChar,50),
124                     new SqlParameter("@EmployeeEmail", SqlDbType.VarChar,50),
125                     new SqlParameter("@EmployeeJiGuan", SqlDbType.VarChar,50),
126                     new SqlParameter("@EmployeeAddress", SqlDbType.VarChar,500),
127                     new SqlParameter("@EmployeePosition", SqlDbType.VarChar, 50),
128                     new SqlParameter("@EmployeeBirthday", SqlDbType.DateTime)
129             };
130             parameters[0].Value = employeeInfo.EmployeeID;
131             parameters[1].Value = employeeInfo.EmployeeName;
132             parameters[2].Value = employeeInfo.EmployeeMajor;
133             parameters[3].Value = employeeInfo.EmployeeDepartment;
134             parameters[4].Value = employeeInfo.EmployeeTel;
135             parameters[5].Value = employeeInfo.EmployeeEmail;
136             parameters[6].Value = employeeInfo.EmployeeJiGuan;
137             parameters[7].Value = employeeInfo.EmployeeAddress;
138             parameters[8].Value = employeeInfo.EmployeePosition;
139             parameters[9].Value = employeeInfo.EmployeeBirthday;
140 
141             DbHelperSQL.ExecuteSql(strSql.ToString(), parameters);
142         }
143     }
144 }

View Code

4.2 簡要分析

5 控制器層

5.1 方法

  1 using MVCCrud.Areas.JqGridDemo.Models;
  2 using Newtonsoft.Json;
  3 using System;
  4 using System.Collections.Generic;
  5 using System.Configuration;
  6 using System.Data;
  7 using System.Data.SqlClient;
  8 using System.IO;
  9 using System.Linq;
 10 using System.Web;
 11 using System.Web.Mvc;
 12 using MVCCrud.Areas.DAL;
 13 
 14 namespace MVCCrud.Areas.JqGridDemo.Controllers
 15 {
 16     public class JqGridCRUDController : Controller
 17     {
 18         // GET: JqGridDemo/JqGridCRUD
 19         //初始視圖表
 20         public ActionResult Index()
 21         {
 22             return View();
 23         }
 24          //導入模板
 25         public ActionResult GetEmployeeInfoTemple()
 26         {
 27             string path = Server.MapPath(@"~/Content/Upload/");
 28             string fileName = "EmployeeImport.xlsx";
 29             return File(new FileStream(path + fileName, FileMode.Open, FileAccess.Read), "xls", fileName);
 30         }
 31 
 32         //預設置初始化數據表
 33         public ActionResult EmployeeInfoToLoad()
 34         {
 35             List<EmployeeInfo> ltPI = new List<EmployeeInfo>();
 36             EmployeeInfoToCRUD employeeInfoToCRUD = new EmployeeInfoToCRUD();
 37             DataTable dt = employeeInfoToCRUD.DALEmployeeInfoToGetTable();
 38             for (int i = 0; i < dt.Rows.Count; i++)
 39             {
 40                 EmployeeInfo custInfo = new EmployeeInfo();
 41                 custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();
 42                 custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();
 43                 custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();
 44                 custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();
 45                 custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();
 46                 custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();
 47                 custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();
 48                 custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();
 49                 custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();
 50                 if (dt.Rows[i]["EmployeeBirthday"] != System.DBNull.Value)
 51                 {
 52                     custInfo.EmployeeBirthday = Convert.ToDateTime(dt.Rows[i]["EmployeeBirthday"]);
 53                 }
 54                 ltPI.Add(custInfo);
 55                 TempData["CustomerInfo"] = ltPI;
 56             }
 57             return Content(ToJsonString(ltPI));
 58         }
 59 
 60         //預設置添加數據
 61         public void EmployeeInfoToDdd(EmployeeInfo employeeInfo)
 62         {
 63             EmployeeInfoToCRUD employeeInfoToCRUD = new EmployeeInfoToCRUD();
 64             employeeInfoToCRUD.DALEmployeeInfoToDdd(employeeInfo);
 65         }
 66         //預設置刪除數據
 67         [HttpPost]
 68         public void EmployeeInfoToDel(string EmployeeID)
 69         {
 70             EmployeeInfoToCRUD employeeInfoToCRUD = new EmployeeInfoToCRUD();
 71             employeeInfoToCRUD.DALEmployeeInfoToDelete(EmployeeID);
 72         }
 73 
 74         //預設置更新數據
 75         public void EmployeeInfoToUpdate(EmployeeInfo employeeInfo)
 76         {
 77             EmployeeInfoToCRUD employeeInfoToCRUD = new EmployeeInfoToCRUD();
 78             employeeInfoToCRUD.DALEmployeeInfoToUpdate(employeeInfo);
 79         }
 80 
 81         //預設置查詢數據
 82         public ActionResult EmployeeInfoToSearch(string employeeName)
 83         {
 84             List<EmployeeInfo> ltPI = new List<EmployeeInfo>();
 85             EmployeeInfoToCRUD employeeInfoToCRUD = new EmployeeInfoToCRUD();
 86             DataTable dt = employeeInfoToCRUD.DALEmployeeInfoToGetTable(employeeName);
 87             for (int i = 0; i < dt.Rows.Count; i++)
 88             {
 89                 EmployeeInfo custInfo = new EmployeeInfo();
 90                 custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();
 91                 custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();
 92                 custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();
 93                 custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();
 94                 custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();
 95                 custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();
 96                 custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();
 97                 custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();
 98                 custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();
 99                 if (dt.Rows[i]["EmployeeBirthday"] != System.DBNull.Value)
100                 {
101                     custInfo.EmployeeBirthday = Convert.ToDateTime(dt.Rows[i]["EmployeeBirthday"]);
102                 }
103                 ltPI.Add(custInfo);
104                 TempData["CustomerInfo"] = ltPI;
105             }
106             return Content(ToJsonString(ltPI));
107         }
108 
109         /// <summary>
110         ///  爲Oject對象增長ToJsonString方法（注意對項目添加Newtonsoft.Json.dll引用）
111         /// </summary>
112         /// <param name="obj"></param>
113         /// <returns></returns>
114         public string ToJsonString(Object obj)
115         {
116             JsonSerializerSettings jsSettings = new JsonSerializerSettings();
117             jsSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
118             return JsonConvert.SerializeObject(obj, jsSettings);
119         }
120     }
121 }
122 
123

View Code

5.2 分析

6 展現層

6.1 View Code

  1 @{
  2     Layout = null;
  3 }
  4 
  5 <!DOCTYPE html>
  6 
  7 <html>
  8 <head>
  9     <meta name="viewport" content="width=device-width" />
 10     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
 11     <link href="~/OuterLibrary/Guriddo_jqGrid_JS_5.2.1/src/css/ui.jqgrid.css" rel="stylesheet" />
 12     <script src="~/OuterLibrary/Guriddo_jqGrid_JS_5.2.1/js/jquery-1.11.0.min.js"></script>
 13     <script src="~/OuterLibrary/Guriddo_jqGrid_JS_5.2.1/src/jquery.jqGrid.js"></script>
 14     <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 15     <script src="~/OuterLibrary/tonytomov-jqGrid-6659334/js/i18n/grid.locale-cn.js"></script>
 16     <script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
 17     <script src="~/OuterLibrary/Guriddo_jqGrid_JS_5.2.1/src/grid.export.js"></script>
 18     <script src="~/OuterLibrary/Guriddo_jqGrid_JS_5.2.1/src/grid.import.js"></script>
 19     <title>員工信息表</title>
 20     <script type="text/javascript">
 21         $(document).ready(function () {
 22             //添加
 23             $("#btn_add").click(function () {
 24                 //var model = jQuery("#JqGrid-table").jqGrid('getRowData', EmployeeID);
 25                 $("#AddEmployeeInfo").dialog({
 26                     height: 400,
 27                     width: 500,
 28                     resizable: false,
 29                     modal: true,  //這裏就是控制彈出爲模態
 30                     buttons: {
 31                         "肯定": function () {
 32                             //alert("在這裏對數據進行修改！");
 33                             //$(this).dialog("close");
 34                             //var birthdayTime ="2017/9/28";
 35                             var employeeID = $("#ADD_EmployeeID").val();
 36                             var employeeName = $("#ADD_EmployeeName").val();
 37                             var employeeMajor = $("#ADD_EmployeeMajor").val();
 38                             var employeeDepartment = $("#ADD_EmployeeDepartment").val();
 39                             var employeeTel = $("#ADD_EmployeeTel").val();
 40                             var employeeEmail = $("#ADD_EmployeeEmail").val();
 41                             var employeeJiGuan = $("#ADD_EmployeeJiGuan").val();
 42                             var employeeAddress = $("#ADD_EmployeeAddress").val();
 43                             var employeePosition = $("#ADD_EmployeePosition").val();
 44                             var employeeBirthday = $("#ADD_EmployeeBirthday").val();
 45                             $.ajax({
 46                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToDdd",
 47                                 type: "GET",
 48                                 data: {
 49                                     EmployeeID: employeeID, EmployeeName: employeeName, EmployeeMajor: employeeMajor,
 50                                     EmployeeDepartment: employeeDepartment, EmployeeTel: employeeTel, EmployeeEmail: employeeEmail,
 51                                     EmployeeJiGuan: employeeJiGuan, EmployeeAddress: employeeAddress, EmployeePosition: employeePosition,
 52                                     EmployeeBirthday: employeeBirthday
 53                                 },
 54                                 success: function (message) {
 55                                     $("#JqGrid-table").jqGrid("setGridParam",
 56                                         {
 57                                             url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
 58                                             page: 1,
 59                                             datatype: "json"
 60                                         }).trigger("reloadGrid");
 61                                     alert('添加數據成功');
 62 
 63                                 },
 64                                 error: function (message) {
 65                                     alert('error!');
 66                                 }
 67                             });
 68                         },
 69                         "取消": function () {
 70                             $(this).dialog("close");
 71                         }
 72                     }
 73                 });
 74             });
 75             //刪除
 76             $("#btn_del").click(function () {
 77                 var employeeID = $('#JqGrid-table').jqGrid('getGridParam', 'selrow');//獲取行id
 78                 $.ajax({
 79                     url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToDel",
 80                     type: "post",
 81                     data: { EmployeeID: employeeID },
 82                     success: function (message) {
 83                         $("#JqGrid-table").jqGrid("setGridParam",
 84                             {
 85                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
 86                                 page: 1,
 87                                 datatype: "json"
 88                             }).trigger("reloadGrid");
 89                         alert('成功刪除一條數據');
 90                     },
 91                     error: function (message) {
 92                         alert('error!');
 93                     }
 94                 });
 95             });
 96             //編輯
 97             $("#btn_edit").click(function () {
 98                 //var ids = jQuery("#JqGrid-table").jqGrid('getDataIDs');//返回grid裏全部數據的id
 99                 var id = jQuery("#JqGrid-table").jqGrid('getGridParam', 'selarrrow');
100                 var EmployeeInfoModel = jQuery("#JqGrid-table").jqGrid('getRowData', id);
101                 $("#Modify_EmployeeID").val(EmployeeInfoModel.EmployeeID);
102                 $("#Modify_EmployeeName").val(EmployeeInfoModel.EmployeeName);
103                 $("#Modify_EmployeeMajor").val(EmployeeInfoModel.EmployeeMajor);
104                 $("#Modify_EmployeeDepartment").val(EmployeeInfoModel.EmployeeDepartment);
105                 $("#Modify_EmployeeTel").val(EmployeeInfoModel.EmployeeTel);
106                 $("#Modify_EmployeeEmail").val(EmployeeInfoModel.EmployeeEmail);
107                 $("#Modify_EmployeeJiGuan").val(EmployeeInfoModel.EmployeeJiGuan);
108                 $("#Modify_EmployeeAddress").val(EmployeeInfoModel.EmployeeAddress);
109                 $("#Modify_EmployeePosition").val(EmployeeInfoModel.EmployeePosition);
110                 $("#Modify_EmployeeBirthday").val(EmployeeInfoModel.EmployeeBirthday);
111                 $("#ModifyEmployeeInfo").dialog({
112                     height: 400,
113                     width: 500,
114                     resizable: false,
115                     modal: true,  //這裏就是控制彈出爲模態
116                     buttons: {
117                         "肯定": function () {
118                             //alert("在這裏對數據進行修改！");
119                             //$(this).dialog("close");
120                             //var birthdayTime ="2017/9/28";
121                             //$("#Modify_EmployeeEmployeeName").value = 'ddd';
122                             //提交前的初始值
123                             var employeeID = $("#Modify_EmployeeID").val();
124                             var employeeName = $("#Modify_EmployeeName").val();
125                             var employeeMajor = $("#Modify_EmployeeMajor").val();
126                             var employeeDepartment = $("#Modify_EmployeeDepartment").val();
127                             var employeeTel = $("#Modify_EmployeeTel").val();
128                             var employeeEmail = $("#Modify_EmployeeEmail").val();
129                             var employeeJiGuan = $("#Modify_EmployeeJiGuan").val();
130                             var employeeAddress = $("#Modify_EmployeeAddress").val();
131                             var employeePosition = $("#Modify_EmployeePosition").val();
132                             var employeeBirthday = $("#Modify_EmployeeBirthday").val();
133                             $.ajax({
134                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToUpdate",
135                                 type: "GET",
136                                 data: {
137                                     EmployeeID: employeeID, EmployeeName: employeeName, EmployeeMajor: employeeMajor,
138                                     EmployeeDepartment: employeeDepartment, EmployeeTel: employeeTel, EmployeeEmail: employeeEmail,
139                                     EmployeeJiGuan: employeeJiGuan, EmployeeAddress: employeeAddress, EmployeePosition: employeePosition,
140                                     EmployeeBirthday: employeeBirthday
141                                 },
142                                 success: function (message) {
143                                     $("#JqGrid-table").jqGrid("setGridParam",
144                                         {
145                                             url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
146                                             page: 1,
147                                             datatype: "json"
148                                         }).trigger("reloadGrid");
149                                     alert('編輯成功！！');
150 
151                                 },
152                                 error: function (message) {
153                                     alert('error!');
154                                 }
155                             });
156                         },
157                         "取消": function () {
158                             $(this).dialog("close");
159                         }
160                     }
161                 });
162 
163             });
164             //查詢
165             $("#btn_search").click(function () {
166                 var employeeName = $("#precisionSearch_input").val();
167                 $("#JqGrid-table").jqGrid("setGridParam",
168                     {
169                         url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToSearch" + "?EmployeeName=" + employeeName,
170                         page: 1,
171                         datatype: "json"
172                     }).trigger("reloadGrid");
173 
174             });
175             //導出
176             $("#btn_export").on("click", function () {
177                 $("#JqGrid-table").jqGrid("exportToExcel", {
178                     includeLabels: true,
179                     includeGroupHeader: true,
180                     includeFooter: true,
181                     fileName: "jqGridExport.xlsx",
182                     maxlength: 40 // maxlength for visible string
183                 });
184             });
185             //導入
186             $("#btn_import").click(function () {
187                 var FileName = $("#UpLoadFile").val();
188                 $.ajax({
189                     url: '/JqGridDemo/ImportData/InsertDataToDB',
190                     type: 'post',
191                     data: { fileName: FileName }
192                 });
193             });
194         })
195     </script>        
196 </head>
197 <body>
198     <div>
199         <div>
200             <input id="UpLoadFile" type="file" />
201             <input id="btn_import" type="button" value="批量導入" class="btn btn-info" />
202             <a href="/JqGridDemo/JqGridCRUD/GetEmployeeInfoTemple">(點擊此處下載模板)</a>
203             <label>模糊查詢：</label> <input id="search_input" type="text" placeholder="模糊查詢" />
204             <input id="precisionSearch_input" type="text" placeholder="請輸入您要查詢的姓名" />
205             <input id="btn_search" type="button" value="查詢" class="btn btn-info" />
206             <input id="btn_add" type="button" value="添加" class="btn btn-primary" />
207             <input id="btn_edit" type="button" value="編輯" class="btn btn-success" />
208             <input id="btn_del" type="button" value="刪除" class="btn btn-danger" />
209             <input id="btn_export" type="button" value="導出" class="btn btn-info" />
210             
211         </div>
212         <div class="main" id="main">
213             <table id="JqGrid-table"></table>
214             <div id="JqGrid-pager"></div>
215             <div id="ModifyEmployeeInfo" title="修改員工信息" style="display:none;">
216                 <table>
217                     <tbody>
218                         <tr>
219                             <td>員工ID：<input type="text" id="Modify_EmployeeID" placeholder="請輸入員工ID" /></td>
220                             <td>員工姓名：<input type="text" id="Modify_EmployeeName" placeholder="請輸入員工姓名" /></td>
221                         </tr>
222                         <tr>
223                             <td>員工專業：<input type="text" id="Modify_EmployeeMajor" placeholder="請輸入員工專業" /></td>
224                             <td>員工部門：<input type="text" id="Modify_EmployeeDepartment" placeholder="請輸入員工部門" /></td>
225                         </tr>
226                         <tr>
227                             <td>員工電話：<input type="text" id="Modify_EmployeeTel" placeholder="請輸入員工電話" /></td>
228                             <td>員工郵件：<input type="text" id="Modify_EmployeeEmail" placeholder="請輸入員工郵件" /></td>
229                         </tr>
230                         <tr>
231                             <td>員工籍貫：<input type="text" id="Modify_EmployeeJiGuan" placeholder="請輸入員工籍貫" /></td>
232                             <td>員工住址：<input type="text" id="Modify_EmployeeAddress" placeholder="請輸入員工住址" /></td>
233                         </tr>
234                         <tr>
235                             <td>員工職位：<input type="text" id="Modify_EmployeePosition" placeholder="請輸入員工職位" /></td>
236                             <td>員工生日：<input type="text" id="Modify_EmployeeBirthday" placeholder="請輸入員工生日" /></td>
237                         </tr>
238                     </tbody>
239                 </table>
240             </div>
241             <div id="AddEmployeeInfo" title="修改員工信息" style="display:none;">
242                <table>
243                     <tbody>
244                         <tr>
245                             <td>員工ID：<input type="text" id="ADD_EmployeeID" placeholder="請輸入員工ID" /></td>
246                             <td>員工姓名：<input type="text" id="ADD_EmployeeName" placeholder="請輸入員工姓名" /></td>
247                         </tr>
248                         <tr>
249                             <td>員工專業：<input type="text" id="ADD_EmployeeMajor" placeholder="請輸入員工專業" /></td>
250                             <td>員工部門：<input type="text" id="ADD_EmployeeDepartment" placeholder="請輸入員工部門" /></td>
251                         </tr>
252                         <tr>
253                             <td>員工電話：<input type="text" id="ADD_EmployeeTel" placeholder="請輸入員工電話" /></td>
254                             <td>員工郵件：<input type="text" id="ADD_EmployeeEmail" placeholder="請輸入員工郵件" /></td>
255                         </tr>
256                         <tr>
257                             <td>員工籍貫：<input type="text" id="ADD_EmployeeJiGuan" placeholder="請輸入員工籍貫" /></td>
258                             <td>員工住址：<input type="text" id="ADD_EmployeeAddress" placeholder="請輸入員工住址" /></td>
259                         </tr>
260                         <tr>
261                             <td>員工職位：<input type="text" id="ADD_EmployeePosition" placeholder="請輸入員工職位" /></td>
262                             <td>員工生日：<input type="text" id="ADD_EmployeeBirthday" placeholder="請輸入員工生日" value="2014/03/01" /></td>
263                         </tr>
264                     </tbody>
265                 </table>
266             </div>
267         </div>
268         <script type="text/javascript">
269             $(document).ready(function () {
270                 $("#JqGrid-table").jqGrid({
271                     url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
272                     //editurl: 'clientArray',
273                     datatype: "json",
274                     height: 150,
275                     mtype: "Get",
276                     colNames: ['員工ID', '員工姓名', '員工專業', '員工部門', '員工電話', '員工郵件', '員工籍貫', '員工住址', '員工職位', '員工生日'],
277                     colModel: [{
278                         name: 'EmployeeID',
279                         index: 'EmployeeID',
280                         key: true,
281                         width: 100,
282                         edittype: Text,
283                         editable: true,
284                         editoptions: {
285                             size: "20",
286                             maxlength: "30",
287                             sorttable: false,
288                         },
289                         searchoptions: {
290                             searchOperMenu: false,
291                             sopt: ['eq', 'gt', 'lt', 'ge', 'le']
292                         }
293                     }, {
294                         name: 'EmployeeName',
295                         index: 'EmployeeName',
296                         width: 200,
297                         editable: true,
298                         editoptions: {
299                             size: "20",
300                             maxlength: "30",
301                             sortable: true
302                         }
303                     }, {
304                         name: 'EmployeeMajor',
305                         index: 'EmployeeMajor',
306                         width: 200,
307                         editable: true,
308                         //edittype: false,
309                         editoptions: {
310                             size: "20",
311                             maxlength: "30"
312                         }
313                     },
314                     {
315                         name: 'EmployeeDepartment',
316                         index: 'EmployeeDepartment',
317                         width: 200,
318                         editable: true,
319                         //edittype: false,
320                         editoptions: {
321                             size: "20",
322                             maxlength: "30"
323                         }
324                     }, {
325                         name: 'EmployeeTel',
326                         index: 'EmployeeTel',
327                         width: 200,
328                         editable: true,
329                         //edittype: false,
330                         editoptions: {
331                             size: "20",
332                             maxlength: "30"
333                         }
334                     }, {
335                         name: 'EmployeeEmail',
336                         index: 'EmployeeEmail',
337                         width: 200,
338                         editable: true,
339                         //edittype: false,
340                         editoptions: {
341                             size: "20",
342                             maxlength: "30"
343                         }
344                     }, {
345                         name: 'EmployeeJiGuan',
346                         index: 'EmployeeJiGuan',
347                         width: 200,
348                         editable: true,
349                         //edittype: false,
350                         editoptions: {
351                             size: "20",
352                             maxlength: "30"
353                         }
354                     }, {
355                         name: 'EmployeeAddress',
356                         index: 'EmployeeAddress',
357                         width: 200,
358                         editable: true,
359                         //edittype: false,
360                         editoptions: {
361                             size: "20",
362                             maxlength: "30"
363                         }
364                     }, {
365                         name: 'EmployeePosition',
366                         index: 'EmployeePosition',
367                         width: 200,
368                         editable: true,
369                         //edittype: false,
370                         editoptions: {
371                             size: "20",
372                             maxlength: "30"
373                         }
374                     }, {
375                         name: 'EmployeeBirthday',
376                         index: 'EmployeeBirthday',
377                         width: 200,
378                         editable: true,
379                         //edittype: false,
380                         editoptions: {
381                             size: "20",
382                             maxlength: "30"
383                         }
384                     }],
385                     viewrecords: true,
386                     rowNum: 10,
387                     rowList: [5, 10, 20, 30],
388                     pager: '#JqGrid-pager',
389                     altRows: true,
390                     multiselect: true,
391                     multiboxonly: true,
392                     caption: "員工信息表",
393                     autowidth: true,
394                     //width: "100%",
395                     height: Audio,
396                     sortable: true,
397                     sortorder: 'asc',
398                     loadonce: true, //排序時，必須添加該字段
399                 })
400                  //JqGrid自帶的CRUD
401                 $('#JqGrid-table').jqGrid('navGrid', "#JqGrid-pager", {
402                     search: true, // show search button on the toolbar
403                     add: true,
404                     edit: true,
405                     del: true,
406                     refresh: true
407                 });
408                 //模糊查詢
409                 var timer;
410                 $("#search_input").on("keyup", function () {
411                     var self = this;
412                     if (timer) { clearTimeout(timer); }
413                     timer = setTimeout(function () {
414                         //timer = null;
415                         $("#JqGrid-table").jqGrid('filterInput', self.value);
416                     }, 0);
417                 });
418             })
419         </script>
420     </div>
421 </body>
422 </html>

View Code

6.2 分析

6.2.1 初始化數據

(1)圖解功能

(2)功能Code

定義table獲取區和翻頁區

1 <table id="JqGrid-table"></table>
2 <div id="JqGrid-pager"></div>

JqGrid

  1  <script type="text/javascript">
  2             $(document).ready(function () {
  3                 $("#JqGrid-table").jqGrid({
  4                     url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
  5                     //editurl: 'clientArray',
  6                     datatype: "json",
  7                     height: 150,
  8                     mtype: "Get",
  9                     colNames: ['員工ID', '員工姓名', '員工專業', '員工部門', '員工電話', '員工郵件', '員工籍貫', '員工住址', '員工職位', '員工生日'],
 10                     colModel: [{
 11                         name: 'EmployeeID',
 12                         index: 'EmployeeID',
 13                         key: true,
 14                         width: 100,
 15                         edittype: Text,
 16                         editable: true,
 17                         editoptions: {
 18                             size: "20",
 19                             maxlength: "30",
 20                             sorttable: false,
 21                         },
 22                         searchoptions: {
 23                             searchOperMenu: false,
 24                             sopt: ['eq', 'gt', 'lt', 'ge', 'le']
 25                         }
 26                     }, {
 27                         name: 'EmployeeName',
 28                         index: 'EmployeeName',
 29                         width: 200,
 30                         editable: true,
 31                         editoptions: {
 32                             size: "20",
 33                             maxlength: "30",
 34                             sortable: true
 35                         }
 36                     }, {
 37                         name: 'EmployeeMajor',
 38                         index: 'EmployeeMajor',
 39                         width: 200,
 40                         editable: true,
 41                         //edittype: false,
 42                         editoptions: {
 43                             size: "20",
 44                             maxlength: "30"
 45                         }
 46                     },
 47                     {
 48                         name: 'EmployeeDepartment',
 49                         index: 'EmployeeDepartment',
 50                         width: 200,
 51                         editable: true,
 52                         //edittype: false,
 53                         editoptions: {
 54                             size: "20",
 55                             maxlength: "30"
 56                         }
 57                     }, {
 58                         name: 'EmployeeTel',
 59                         index: 'EmployeeTel',
 60                         width: 200,
 61                         editable: true,
 62                         //edittype: false,
 63                         editoptions: {
 64                             size: "20",
 65                             maxlength: "30"
 66                         }
 67                     }, {
 68                         name: 'EmployeeEmail',
 69                         index: 'EmployeeEmail',
 70                         width: 200,
 71                         editable: true,
 72                         //edittype: false,
 73                         editoptions: {
 74                             size: "20",
 75                             maxlength: "30"
 76                         }
 77                     }, {
 78                         name: 'EmployeeJiGuan',
 79                         index: 'EmployeeJiGuan',
 80                         width: 200,
 81                         editable: true,
 82                         //edittype: false,
 83                         editoptions: {
 84                             size: "20",
 85                             maxlength: "30"
 86                         }
 87                     }, {
 88                         name: 'EmployeeAddress',
 89                         index: 'EmployeeAddress',
 90                         width: 200,
 91                         editable: true,
 92                         //edittype: false,
 93                         editoptions: {
 94                             size: "20",
 95                             maxlength: "30"
 96                         }
 97                     }, {
 98                         name: 'EmployeePosition',
 99                         index: 'EmployeePosition',
100                         width: 200,
101                         editable: true,
102                         //edittype: false,
103                         editoptions: {
104                             size: "20",
105                             maxlength: "30"
106                         }
107                     }, {
108                         name: 'EmployeeBirthday',
109                         index: 'EmployeeBirthday',
110                         width: 200,
111                         editable: true,
112                         //edittype: false,
113                         editoptions: {
114                             size: "20",
115                             maxlength: "30"
116                         }
117                     }],
118                     viewrecords: true,
119                     rowNum: 10,
120                     rowList: [5, 10, 20, 30],
121                     pager: '#JqGrid-pager',
122                     altRows: true,
123                     multiselect: true,
124                     multiboxonly: true,
125                     caption: "員工信息表",
126                     autowidth: true,
127                     //width: "100%",
128                     height: Audio,
129                     sortable: true,
130                     sortorder: 'asc',
131                     loadonce: true, //排序時，必須添加該字段
132                 })
133             })
134         </script>

View Code

6.2.2 JqGrid自帶的CRUD

(1)圖解功能

(2)功能Code

 //JqGrid自帶的CRUD
 $('#JqGrid-table').jqGrid('navGrid', "#JqGrid-pager", {
       search: true, // show search button on the toolbar
       add: true,
       edit: true,
       del: true,
       refresh: true
});

6.2.3 自動檢測區：

(1)圖解功能

(1)功能Code

 1 //模糊查詢
 2    var timer;
 3    $("#search_input").on("keyup", function () {
 4            var self = this;
 5             if (timer) { clearTimeout(timer); }
 6             timer = setTimeout(function () {
 7              //timer = null;
 8              $("#JqGrid-table").jqGrid('filterInput', self.value);
 9            }, 0);
10 });

6.2.4 JqGrid自帶導出功能

(1)圖解功能

(2)功能Code

$("#btn_export").on("click", function () {
     $("#JqGrid-table").jqGrid("exportToExcel", {
          includeLabels: true,
          includeGroupHeader: true,
          includeFooter: true,
          fileName: "jqGridExport.xlsx",
          maxlength: 40 // maxlength for visible string
        });
 });

6.2.5 自定義CRUD

(1)圖解功能

(2)功能Code

  1 <script type="text/javascript">
  2         $(document).ready(function () {
  3             //添加
  4             $("#btn_add").click(function () {
  5                 //var model = jQuery("#JqGrid-table").jqGrid('getRowData', EmployeeID);
  6                 $("#AddEmployeeInfo").dialog({
  7                     height: 400,
  8                     width: 500,
  9                     resizable: false,
 10                     modal: true,  //這裏就是控制彈出爲模態
 11                     buttons: {
 12                         "肯定": function () {
 13                             //alert("在這裏對數據進行修改！");
 14                             //$(this).dialog("close");
 15                             //var birthdayTime ="2017/9/28";
 16                             var employeeID = $("#ADD_EmployeeID").val();
 17                             var employeeName = $("#ADD_EmployeeName").val();
 18                             var employeeMajor = $("#ADD_EmployeeMajor").val();
 19                             var employeeDepartment = $("#ADD_EmployeeDepartment").val();
 20                             var employeeTel = $("#ADD_EmployeeTel").val();
 21                             var employeeEmail = $("#ADD_EmployeeEmail").val();
 22                             var employeeJiGuan = $("#ADD_EmployeeJiGuan").val();
 23                             var employeeAddress = $("#ADD_EmployeeAddress").val();
 24                             var employeePosition = $("#ADD_EmployeePosition").val();
 25                             var employeeBirthday = $("#ADD_EmployeeBirthday").val();
 26                             $.ajax({
 27                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToDdd",
 28                                 type: "GET",
 29                                 data: {
 30                                     EmployeeID: employeeID, EmployeeName: employeeName, EmployeeMajor: employeeMajor,
 31                                     EmployeeDepartment: employeeDepartment, EmployeeTel: employeeTel, EmployeeEmail: employeeEmail,
 32                                     EmployeeJiGuan: employeeJiGuan, EmployeeAddress: employeeAddress, EmployeePosition: employeePosition,
 33                                     EmployeeBirthday: employeeBirthday
 34                                 },
 35                                 success: function (message) {
 36                                     $("#JqGrid-table").jqGrid("setGridParam",
 37                                         {
 38                                             url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
 39                                             page: 1,
 40                                             datatype: "json"
 41                                         }).trigger("reloadGrid");
 42                                     alert('添加數據成功');
 43 
 44                                 },
 45                                 error: function (message) {
 46                                     alert('error!');
 47                                 }
 48                             });
 49                         },
 50                         "取消": function () {
 51                             $(this).dialog("close");
 52                         }
 53                     }
 54                 });
 55             });
 56             //刪除
 57             $("#btn_del").click(function () {
 58                 var employeeID = $('#JqGrid-table').jqGrid('getGridParam', 'selrow');//獲取行id
 59                 $.ajax({
 60                     url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToDel",
 61                     type: "post",
 62                     data: { EmployeeID: employeeID },
 63                     success: function (message) {
 64                         $("#JqGrid-table").jqGrid("setGridParam",
 65                             {
 66                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
 67                                 page: 1,
 68                                 datatype: "json"
 69                             }).trigger("reloadGrid");
 70                         alert('成功刪除一條數據');
 71                     },
 72                     error: function (message) {
 73                         alert('error!');
 74                     }
 75                 });
 76             });
 77             //編輯
 78             $("#btn_edit").click(function () {
 79                 //var ids = jQuery("#JqGrid-table").jqGrid('getDataIDs');//返回grid裏全部數據的id
 80                 var id = jQuery("#JqGrid-table").jqGrid('getGridParam', 'selarrrow');
 81                 var EmployeeInfoModel = jQuery("#JqGrid-table").jqGrid('getRowData', id);
 82                 $("#Modify_EmployeeID").val(EmployeeInfoModel.EmployeeID);
 83                 $("#Modify_EmployeeName").val(EmployeeInfoModel.EmployeeName);
 84                 $("#Modify_EmployeeMajor").val(EmployeeInfoModel.EmployeeMajor);
 85                 $("#Modify_EmployeeDepartment").val(EmployeeInfoModel.EmployeeDepartment);
 86                 $("#Modify_EmployeeTel").val(EmployeeInfoModel.EmployeeTel);
 87                 $("#Modify_EmployeeEmail").val(EmployeeInfoModel.EmployeeEmail);
 88                 $("#Modify_EmployeeJiGuan").val(EmployeeInfoModel.EmployeeJiGuan);
 89                 $("#Modify_EmployeeAddress").val(EmployeeInfoModel.EmployeeAddress);
 90                 $("#Modify_EmployeePosition").val(EmployeeInfoModel.EmployeePosition);
 91                 $("#Modify_EmployeeBirthday").val(EmployeeInfoModel.EmployeeBirthday);
 92                 $("#ModifyEmployeeInfo").dialog({
 93                     height: 400,
 94                     width: 500,
 95                     resizable: false,
 96                     modal: true,  //這裏就是控制彈出爲模態
 97                     buttons: {
 98                         "肯定": function () {
 99                             //alert("在這裏對數據進行修改！");
100                             //$(this).dialog("close");
101                             //var birthdayTime ="2017/9/28";
102                             //$("#Modify_EmployeeEmployeeName").value = 'ddd';
103                             //提交前的初始值
104                             var employeeID = $("#Modify_EmployeeID").val();
105                             var employeeName = $("#Modify_EmployeeName").val();
106                             var employeeMajor = $("#Modify_EmployeeMajor").val();
107                             var employeeDepartment = $("#Modify_EmployeeDepartment").val();
108                             var employeeTel = $("#Modify_EmployeeTel").val();
109                             var employeeEmail = $("#Modify_EmployeeEmail").val();
110                             var employeeJiGuan = $("#Modify_EmployeeJiGuan").val();
111                             var employeeAddress = $("#Modify_EmployeeAddress").val();
112                             var employeePosition = $("#Modify_EmployeePosition").val();
113                             var employeeBirthday = $("#Modify_EmployeeBirthday").val();
114                             $.ajax({
115                                 url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToUpdate",
116                                 type: "GET",
117                                 data: {
118                                     EmployeeID: employeeID, EmployeeName: employeeName, EmployeeMajor: employeeMajor,
119                                     EmployeeDepartment: employeeDepartment, EmployeeTel: employeeTel, EmployeeEmail: employeeEmail,
120                                     EmployeeJiGuan: employeeJiGuan, EmployeeAddress: employeeAddress, EmployeePosition: employeePosition,
121                                     EmployeeBirthday: employeeBirthday
122                                 },
123                                 success: function (message) {
124                                     $("#JqGrid-table").jqGrid("setGridParam",
125                                         {
126                                             url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad",
127                                             page: 1,
128                                             datatype: "json"
129                                         }).trigger("reloadGrid");
130                                     alert('編輯成功！！');
131 
132                                 },
133                                 error: function (message) {
134                                     alert('error!');
135                                 }
136                             });
137                         },
138                         "取消": function () {
139                             $(this).dialog("close");
140                             $("#JqGrid-table").jqGrid('clearGridData');
141                             //$("#JqGrid-table").trigger('reloadGrid');
142                             $("#JqGrid-table").setGridParam({ url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToLoad" }).trigger('reloadGrid');
143                         }
144                     }
145                 });
146 
147             });
148             //查詢
149             $("#btn_search").click(function () {
150                 var employeeName = $("#precisionSearch_input").val();
151                 $("#JqGrid-table").jqGrid("setGridParam",
152                     {
153                         url: "/JqGridDemo/JqGridCRUD/EmployeeInfoToSearch" + "?EmployeeName=" + employeeName,
154                         page: 1,
155                         datatype: "json"
156                     }).trigger("reloadGrid");
157 
158             });
159             //導出
160             $("#btn_export").on("click", function () {
161                 $("#JqGrid-table").jqGrid("exportToExcel", {
162                     includeLabels: true,
163                     includeGroupHeader: true,
164                     includeFooter: true,
165                     fileName: "jqGridExport.xlsx",
166                     maxlength: 40 // maxlength for visible string
167                 });
168             });
169             //導入
170             $("#btn_import").click(function () {
171                 var FileName = $("#UpLoadFile").val();
172                 $.ajax({
173                     url: '/JqGridDemo/ImportData/InsertDataToDB',
174                     type: 'post',
175                     data: { fileName: FileName }
176                 });
177             });
178         })
179     </script>

View Code

6.2.6 導出

(1)圖解功能

(2)功能Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Configuration;
 4 using System.Data;
 5 using System.Data.OleDb;
 6 using System.Data.SqlClient;
 7 using System.Linq;
 8 using System.Web;
 9 using System.Web.Mvc;
10 
11 namespace MVCCrud.Areas.JqGridDemo.Controllers
12 {
13     public class ImportDataController : Controller
14     {
15         // GET: JqGridDemo/ImportData
16         public ActionResult Index()
17         {
18             return View();
19         }
20 
21         /// <summary>
22         /// 從excel讀取數據
23         /// </summary>
24         /// <param name="filepath">excel文件路徑</param>
25         /// <returns></returns>
26         public static DataSet ReadExcel(string FilePath)
27         {
28             try
29             {
30                 string strConn = string.Format("Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties='Excel 8.0;HDR=Yes;IMEX=1;'", FilePath);
31                 using (OleDbConnection OleDbConn = new OleDbConnection(strConn))
32                 {
33                     OleDbConn.Open();
34                     string sql = "SELECT * FROM [Sheet1$]";
35                     OleDbDataAdapter OleDbDA = new OleDbDataAdapter(sql, OleDbConn);
36                     DataSet OleDS = new DataSet();
37                     OleDbDA.Fill(OleDS, "ExcelToTalbe");
38                     return OleDS;
39                 }
40             }
41             catch (Exception ex)
42             {
43                 throw new Exception(ex.Message);
44             }
45         }
46         /// <summary>
47         /// 將excel數據插入到EmployeeName表中
48         /// </summary>
49         /// <param name="fileName">excel文件所在路徑</param>
50         public void InsertDataToDB(string fileName)
51         {
52             //fileName = @"E:\testData.xls";
53             if (!System.IO.File.Exists(fileName))
54             {
55                 throw new Exception("指定路徑的Excel文件不存在！");
56             }
57             DataSet ds = ReadExcel(fileName);
58             List<string> ListData = (from DataRow row in ds.Tables["ExcelToTalbe"].Rows select String.Format("INSERT INTO EmployeeInfo(EmployeeID,EmployeeName,EmployeeMajor,EmployeeDepartment,EmployeeTel,EmployeeEmail, EmployeeJiGuan,EmployeeAddress,EmployeePosition,EmployeeBirthday) values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}')", row[0], row[1], row[2], row[3], row[4], row[5], row[6], row[7], row[8], row[9])).ToList();
59             string ConStr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;
60             SqlConnection conn = new SqlConnection(ConStr);
61             conn.Open();
62             foreach (string item in ListData)
63             {
64                 SqlCommand comn = new SqlCommand(item, conn);
65                 comn.ExecuteNonQuery();
66             }
67         }
68     }
69 }
70                  
71                 
72