一个自定义的典型的CRUD示例
来源：互联网 发布：linux监控进程脚本 编辑：程序博客网 时间：2024/05/15 11:15
这是一个自定义小示例，包括bootstrap2的使用、模态（弹出）窗口、自定义分页、CRUD、自定义数据表单验证、时间控件等，仅供自己练手和有需要的新手朋友参考。
数据库采用MySQL，创建表的语句如下：
/*Navicat MySQL Data TransferSource Server : localhostSource Server Version : 50617Source Host : localhost:3306Source Database : freerideTarget Server Type : MYSQLTarget Server Version : 50617File Encoding : 65001Date: 2015-08-10 13:33:39*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for `example_datatype`-- ----------------------------DROP TABLE IF EXISTS `example_datatype`;CREATE TABLE `example_datatype` ( `id` int(11) NOT NULL AUTO_INCREMENT, `moneyType` double(11,2) DEFAULT NULL, `accountType` varchar(50) DEFAULT NULL, `urlType` varchar(50) DEFAULT NULL, `emailType` varchar(50) DEFAULT NULL, `telTyple` varchar(50) DEFAULT NULL, `mobilePhoneType` varchar(50) DEFAULT NULL, `ipType` varchar(50) DEFAULT NULL, `qqType` varchar(50) DEFAULT NULL, `idType` varchar(50) DEFAULT NULL, `postCodeType` varchar(50) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8;-- ------------------------------ Records of example_datatype-- ----------------------------INSERT INTO `example_datatype` VALUES ('1', '2222222.22', 'fangrenlai1989', 'http://www.baidu.com', '478586054@qq.com', '027-88776655', '13245679876', '192.168.1.1', '478586054', '421127198911335674', '436500');INSERT INTO `example_datatype` VALUES ('7', '11.00', 'sss', 'ss', 'sss', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('11', '11.00', 'ddd', 'dd', 'dddd', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('22', '11.00', 'fff', 'fff', 'fff', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('23', '22.22', 'df', 'df', 'df', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('24', '333.00', 'hhh', 'hhh', 'hh', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('25', '11.00', 'gg', 'ggg', 'gg', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('26', '22.00', 'ff', 'ff', 'ff', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('27', '22.00', 'rrr', 'rr', 'rr', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('28', '444.00', 'fff', 'fff', 'fff', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('29', '33.00', 'ddd', 'dd', 'dd', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('30', '222.00', 'rrr', 'rr', 'rrr', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('31', '444.00', 'yyy', 'yy', 'yy', null, null, null, null, null, null);INSERT INTO `example_datatype` VALUES ('32', '11.00', 'dsfasf', 'http://localhost.com/CRUD/Index', 'sddsd2@cc.cc', null, null, null, null, null, null);后台采用的是.net MVC4，Model类如下：using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace Freeride.FRL.Model.Example{ /// <summary> /// 常见验证数据类型实体类，2015年7月29日09:09:06，fangrenlai /// </summary> public class DataTypeModel { /// <summary> /// 主键ID /// </summary> public int Id { get; set; } /// <summary> /// 金额类型 /// </summary> public double MoneyType { get; set; } /// <summary> /// 账号类型 /// </summary> public string AccountType { get; set; } /// <summary> /// URL类型 /// </summary> public string UrlType { get; set; } /// <summary> /// 邮箱地址类型 /// </summary> public string EmailType { get; set; } /// <summary> /// 固定电话类型 /// </summary> public string TelTyple { get; set; } /// <summary> /// 移动手机号码类型 /// </summary> public string MobilePhoneType { get; set; } /// <summary> /// IP地址类型 /// </summary> public string IpType { get; set; } /// <summary> /// QQ号码类型 /// </summary> public string QqType { get; set; } /// <summary> /// 身份证号码类型 /// </summary> public string IdType { get; set; } /// <summary> /// 邮政编码类型 /// </summary> public string PostCodeType { get; set; } }}DAL层如下：
using Freeride.FRL.DBUtility;using Freeride.FRL.Model.Example;using MySql.Data.MySqlClient;using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text;namespace Freeride.FRL.DAL.Example{ /// <summary> /// 常见验证数据类型DAL层，2015年7月29日09:11:22，fangrenlai /// </summary> public class DataTypeDAL { /// <summary> /// 获取符合条件的记录数 /// </summary> /// <param name="queryKey">查询关键字</param> /// <returns></returns> public int GetTotalCount(string queryKey) { string countSQL = string.Format(@"select count(id) from example_datatype t where 1=1 "); if (!string.IsNullOrEmpty(queryKey)) { countSQL += string.Format(" and t.accoutType like '%{0}%'", queryKey); } object obj = DbHelperMySQL.GetSingle(countSQL); if (obj == null) { return 0; } else { return Convert.ToInt32(obj); } } /// <summary> /// 获取符合条件的每一页数据，2015年7月29日13:08:01，fangrenlai /// </summary> /// <param name="queryKey">查询关键字</param> /// <param name="sortName">排序名称</param> /// <param name="sortOrder">升序/降序</param> /// <param name="currentPage">当前页码</param> /// <param name="pageSize">每页显示记录数</param> /// <returns></returns> public List<DataTypeModel> RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize) { StringBuilder dataSQL = new StringBuilder(); dataSQL.Append("select * from example_datatype t where 1=1 "); // 拼接过滤条件 if (!string.IsNullOrEmpty(queryKey)) { dataSQL.Append(string.Format(" and t.accountType like '%{0}%'", queryKey)); } // 排序条件 if (!string.IsNullOrEmpty(sortName) && !string.IsNullOrEmpty(sortOrder)) { dataSQL.Append(string.Format(" order by t.{0} {1}", sortName, sortOrder)); } // 分页条件 limit (currentPage - 1) * pageSize,pageSize int from = (Int32.Parse(currentPage) - 1) * Int32.Parse(pageSize); int rows = Int32.Parse(pageSize); dataSQL.Append(string.Format(" limit {0},{1}", from, rows)); DataSet pageSet = DbHelperMySQL.Query(dataSQL.ToString()); if (null == pageSet || 0 >= pageSet.Tables[0].Rows.Count) { return null; } else { List<DataTypeModel> list = new List<DataTypeModel>(); foreach (DataRow dr in pageSet.Tables[0].Rows) { DataTypeModel newModel = new DataTypeModel(); newModel = Dr2Model(dr); list.Add(newModel); } return list; } } /// <summary> /// DataRow数据转换成model实体 /// </summary> /// <param name="dr">DataRow数据</param> /// <returns></returns> private DataTypeModel Dr2Model(DataRow dr) { DataTypeModel newModel = new DataTypeModel(); if (null != dr["id"] && !string.IsNullOrEmpty(dr["id"].ToString())) { newModel.Id = Int32.Parse(dr["id"].ToString()); } else { newModel.Id = 0; } if (null != dr["moneyType"] && !string.IsNullOrEmpty(dr["moneyType"].ToString())) { newModel.MoneyType = Double.Parse(dr["moneyType"].ToString()); } else { newModel.MoneyType = 0.00; } if (null != dr["accountType"] && !string.IsNullOrEmpty(dr["accountType"].ToString())) { newModel.AccountType = dr["accountType"].ToString(); } else { newModel.AccountType = ""; } if (null != dr["urlType"] && !string.IsNullOrEmpty(dr["urlType"].ToString())) { newModel.UrlType = dr["urlType"].ToString(); } else { newModel.UrlType = ""; } if (null != dr["emailType"] && !string.IsNullOrEmpty(dr["emailType"].ToString())) { newModel.EmailType = dr["emailType"].ToString(); } else { newModel.EmailType = ""; } if (null != dr["telTyple"] && !string.IsNullOrEmpty(dr["telTyple"].ToString())) { newModel.TelTyple = dr["telTyple"].ToString(); } else { newModel.TelTyple = ""; } if (null != dr["mobilePhoneType"] && !string.IsNullOrEmpty(dr["mobilePhoneType"].ToString())) { newModel.MobilePhoneType = dr["mobilePhoneType"].ToString(); } else { newModel.MobilePhoneType = ""; } if (null != dr["ipType"] && !string.IsNullOrEmpty(dr["ipType"].ToString())) { newModel.IpType = dr["ipType"].ToString(); } else { newModel.IpType = ""; } if (null != dr["qqType"] && !string.IsNullOrEmpty(dr["qqType"].ToString())) { newModel.QqType = dr["qqType"].ToString(); } else { newModel.QqType = ""; } if (null != dr["idType"] && !string.IsNullOrEmpty(dr["idType"].ToString())) { newModel.IdType = dr["idType"].ToString(); } else { newModel.IdType = ""; } if (null != dr["postCodeType"] && !string.IsNullOrEmpty(dr["postCodeType"].ToString())) { newModel.PostCodeType = dr["postCodeType"].ToString(); } else { newModel.PostCodeType = ""; } return newModel; } /// <summary> /// 根据ID获取单个实体类 /// </summary> /// <param name="id">记录id</param> /// <returns></returns> public DataTypeModel RetrieveById(string id) { StringBuilder dataSQL = new StringBuilder(); dataSQL.Append(string.Format(@"select * from example_datatype t where id = '{0}' ", id)); DataSet ds = DbHelperMySQL.Query(dataSQL.ToString()); if (null == ds || 0 == ds.Tables[0].Rows.Count) { return null; } else { return Dr2Model(ds.Tables[0].Rows[0]); } } /// <summary> /// 新增一条记录 /// </summary> /// <param name="model">待新增实体类</param> /// <returns></returns> public bool CreateModel(DataTypeModel model) { StringBuilder strSql = new StringBuilder(); strSql.Append("insert into example_datatype("); strSql.Append("moneyType,accountType,urlType,emailType,telTyple,mobilePhoneType,ipType,qqType,idType,postCodeType)"); strSql.Append(" values ("); strSql.Append("@moneyType,@accountType,@urlType,@emailType,@telTyple,@mobilePhoneType,@ipType,@qqType,@idType,@postCodeType)"); MySqlParameter[] parameters = {new MySqlParameter("@moneyType", MySqlDbType.Double,11), new MySqlParameter("@accountType", MySqlDbType.VarChar,50),new MySqlParameter("@urlType", MySqlDbType.VarChar,50),new MySqlParameter("@emailType", MySqlDbType.VarChar,50),new MySqlParameter("@telTyple", MySqlDbType.VarChar,50),new MySqlParameter("@mobilePhoneType", MySqlDbType.VarChar,50),new MySqlParameter("@ipType", MySqlDbType.VarChar,50),new MySqlParameter("@qqType", MySqlDbType.VarChar,50),new MySqlParameter("@idType", MySqlDbType.VarChar,50), new MySqlParameter("@postCodeType", MySqlDbType.VarChar,50)}; parameters[0].Value = model.MoneyType; parameters[1].Value = model.AccountType; parameters[2].Value = model.UrlType; parameters[3].Value = model.EmailType; parameters[4].Value = model.TelTyple; parameters[5].Value = model.MobilePhoneType; parameters[6].Value = model.IpType; parameters[7].Value = model.QqType; parameters[8].Value = model.IdType; parameters[9].Value = model.PostCodeType; int rows = DbHelperMySQL.ExecuteSql(strSql.ToString(), parameters); if (rows > 0) { return true; } else { return false; } } /// <summary> /// 更新数据 /// </summary> /// <param name="model">待更新实体类</param> /// <returns></returns> public bool UpdateModel(DataTypeModel model) { StringBuilder strSql = new StringBuilder(); strSql.Append("update example_datatype set "); strSql.Append("moneyType=@moneyType,"); strSql.Append("accountType=@accountType,"); strSql.Append("urlType=@urlType,"); strSql.Append("emailType=@emailType,"); strSql.Append("telTyple=@telTyple,"); strSql.Append("mobilePhoneType=@mobilePhoneType,"); strSql.Append("ipType=@ipType,"); strSql.Append("qqType=@qqType,"); strSql.Append("idType=@idType,"); strSql.Append("postCodeType=@postCodeType"); strSql.Append(" where id=@id"); MySqlParameter[] parameters = {new MySqlParameter("@moneyType", MySqlDbType.Double,11), new MySqlParameter("@accountType", MySqlDbType.VarChar,50),new MySqlParameter("@urlType", MySqlDbType.VarChar,50),new MySqlParameter("@emailType", MySqlDbType.VarChar,50),new MySqlParameter("@telTyple", MySqlDbType.VarChar,50),new MySqlParameter("@mobilePhoneType", MySqlDbType.VarChar,50),new MySqlParameter("@ipType", MySqlDbType.VarChar,50),new MySqlParameter("@qqType", MySqlDbType.VarChar,50),new MySqlParameter("@idType", MySqlDbType.VarChar,50), new MySqlParameter("@postCodeType", MySqlDbType.VarChar,50),new MySqlParameter("@id", MySqlDbType.Int32,11)}; parameters[0].Value = model.MoneyType; parameters[1].Value = model.AccountType; parameters[2].Value = model.UrlType; parameters[3].Value = model.EmailType; parameters[4].Value = model.TelTyple; parameters[5].Value = model.MobilePhoneType; parameters[6].Value = model.IpType; parameters[7].Value = model.QqType; parameters[8].Value = model.IdType; parameters[9].Value = model.PostCodeType; parameters[10].Value = model.Id; int rows = DbHelperMySQL.ExecuteSql(strSql.ToString(), parameters); if (rows > 0) { return true; } else { return false; } } /// <summary> /// 批量删除数据 /// </summary> /// <param name="ids">待删除记录的id字符串，多个的话用逗号隔开</param> /// <returns></returns> public int DeleteByIds(string ids) { StringBuilder strSql = new StringBuilder(); strSql.Append("delete from example_datatype "); strSql.Append(" where id in (" + ids + ") "); int rows = DbHelperMySQL.ExecuteSql(strSql.ToString()); return rows; } }}using Freeride.FRL.DAL.Example;using Freeride.FRL.Model.Example;using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace Freeride.FRL.BLL.Example{ /// <summary> /// 常见验证数据类型BLL层，2015年7月29日09:12:26，fangrenlai /// </summary> public class DataTypeBLL { private DataTypeDAL dataTypeDAL = new DataTypeDAL(); /// <summary> /// 获取符合条件的记录数，2015年7月29日10:54:06，方仁来 /// </summary> /// <param name="queryKey"></param> /// <returns></returns> public int GetTotalCount(string queryKey) { return dataTypeDAL.GetTotalCount(queryKey); } /// <summary> /// 获取符合条件的分页数据，2015年7月29日10:54:06，方仁来 /// </summary> /// <param name="queryKey">查询关键字</param> /// <param name="sortName">排序名称</param> /// <param name="sortOrder">升序/降序</param> /// <param name="currentPage">当前页码</param> /// <param name="pageSize">每页显示记录数</param> /// <returns></returns> public List<DataTypeModel> RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize) { return dataTypeDAL.RetrievePageData(queryKey, sortName, sortOrder, currentPage, pageSize); } /// <summary> /// 根据ID获取单个实体信息 /// </summary> /// <param name="id">记录id</param> /// <returns></returns> public DataTypeModel RetrieveById(string id) { return dataTypeDAL.RetrieveById(id); } /// <summary> /// 创建一个实体 /// </summary> /// <param name="transModel">新增实体类</param> /// <returns></returns> public bool CreateModel(DataTypeModel transModel) { return dataTypeDAL.CreateModel(transModel); } /// <summary> /// 修改一个实体 /// </summary> /// <param name="transModel">待修改实体类</param> /// <returns></returns> public bool UpdateModel(DataTypeModel transModel) { return dataTypeDAL.UpdateModel(transModel); } /// <summary> /// 批量删除记录 /// </summary> /// <param name="ids">待删除记录的id字符串，多个的话用逗号隔开</param> /// <returns></returns> public int DeleteByIds(string ids) { return dataTypeDAL.DeleteByIds(ids); } }}Cotroller层如下：
using Freeride.FRL.BLL.Example;using Freeride.FRL.Model.Example;using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Web;using System.Web.Mvc;namespace Freeride.FRL.Web.Controllers{ public class CRUDController : Controller { private readonly DataTypeBLL dataTypeBLL = new DataTypeBLL(); /// <summary> /// 跳转到主页面 /// </summary> /// <returns></returns> public ActionResult Index() { return View(); } /// <summary> /// 获取分页数据，2015年7月29日10:33:35，fangrenlai /// </summary> /// <param name="queryKey">查询关键字</param> /// <param name="sortName">排序名称</param> /// <param name="sortOrder">升序/降序</param> /// <param name="currentPage">当前页码</param> /// <param name="pageSize">每页显示记录数</param> /// <returns></returns> [HttpGet] public ActionResult RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize) { if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(currentPage)) { return Json(new { result = -1, msg = "错误的分页参数" }, JsonRequestBehavior.AllowGet); } else { int totalCount = dataTypeBLL.GetTotalCount(queryKey); //int totalCount = 10; if (0 == totalCount) { return Json(new { result = 0, msg = "没有查询到相关数据" }, JsonRequestBehavior.AllowGet); } else { List<DataTypeModel> pageDataList = dataTypeBLL.RetrievePageData(queryKey, sortName, sortOrder, currentPage, pageSize); int totalPage = 0; if (0 == totalCount % Int32.Parse(pageSize)) { totalPage = totalCount / Int32.Parse(pageSize); } else { totalPage = totalCount / Int32.Parse(pageSize) + 1; } return Json(new { result = 1, msg = "查询到相关数据", data = pageDataList, totalCount = totalCount, currentPage = Int32.Parse(currentPage), totalPage = totalPage }, JsonRequestBehavior.AllowGet); } } } /// <summary> /// 远程验证新增的账号信息 /// </summary> /// <param name="createAccountType">待验证的账号信息</param> /// <returns></returns> [HttpGet] public ActionResult ValidCreateAccountType(string createAccountType) { // 默认通过验证 return Json(new { result = 0, msg = createAccountType }, JsonRequestBehavior.AllowGet); } /// <summary> /// 创建一条记录 /// </summary> /// <param name="transModel">新增实体</param> /// <returns></returns> [HttpPost] public ActionResult DoCreate(DataTypeModel transModel) { if (null == transModel) { return Json(new { result = -1, msg = "错误的请求参数" }); } else { bool result = dataTypeBLL.CreateModel(transModel); if (result) { return Json(new { result = 1, msg = "创建成功" }); } else { return Json(new { result = 0, msg = "创建失败" }); } } } /// <summary> /// 修改一条记录 /// </summary> /// <param name="transModel">待修改实体</param> /// <returns></returns> [HttpPost] public ActionResult DoUpdate(DataTypeModel transModel) { if (null == transModel) { return Json(new { result = -1, msg = "错误的请求参数" }); } else { bool result = dataTypeBLL.UpdateModel(transModel); if (result) { return Json(new { result = 1, msg = "修改成功" }); } else { return Json(new { result = 0, msg = "修改失败" }); } } } /// <summary> /// 根据ID获取单个信息 /// </summary> /// <param name="id">记录主键id</param> /// <returns></returns> [HttpGet] public ActionResult RetrieveById(string id) { if (string.IsNullOrEmpty(id)) { return Json(new { result = -1, msg = "错误的请求参数" }, JsonRequestBehavior.AllowGet); } else { DataTypeModel dataTypeModel = dataTypeBLL.RetrieveById(id); if (null == dataTypeModel) { return Json(new { result = 0, msg = "没有获取到相关数据" }, JsonRequestBehavior.AllowGet); } else { return Json(new { result = 1, msg = "获取到相关数据", data = dataTypeModel }, JsonRequestBehavior.AllowGet); } } } /// <summary> /// 删除记录 /// </summary> /// <param name="ids">待删除记录的id字符串，多个的话用逗号隔开</param> /// <returns></returns> [HttpPost] public ActionResult DoDelete(string ids) { if (string.IsNullOrEmpty(ids)) { return Json(new { result = -1, msg = "错误的请求参数" }); } else { int rows = dataTypeBLL.DeleteByIds(ids); if (0 < rows) { return Json(new { result = 1, msg = "成功删除" + rows + "条数据" }); } else { return Json(new { result = 0, msg = "删除失败" }); } } } }}页面代码如下：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>CRUD实例</title> <!-- 引入CSS --> <link href="~/Content/bootstrap2.3.2/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="~/Content/selfDefine/dataForm.css" rel="stylesheet" /> <!-- 引入JS --> <script src="~/Content/jquery1.9.1/jquery-1.9.1.min.js"></script> <script src="~/Content/bootstrap2.3.2/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.min.js"></script> <script src="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.zh-CN.js"></script> <script src="~/Scripts/CRUD/crud.js"></script></head><body> <div class="container-fluid"> <!-- start 查询区域 --> <div class="form-inline" id="queryDIV" style="margin-top: 10px;"> <div id="datetimepicker" class="input-append date"> <input id="queryStartedAt" name="queryStartedAt" type="text"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <input id="retrieveBtn" type="button" class="btn btn-primary" value="查询" /> </div> <!-- end 查询区域 --> <!-- start 操作区域 --> <div class="form-inline" id="operatorDIV" style="margin-top: 10px;"> <input id="detailBtn" type="button" class="btn btn-success" value="详情" /> <input id="createBtn" type="button" class="btn" value="新增" /> <input id="updateBtn" type="button" class="btn btn-warning" value="修改" /> <input id="deleteBtn" type="button" class="btn btn-danger" value="删除" /> </div> <!-- end 操作区域 --> <!-- start 数据区域 --> <div id="dataDIV" style="margin-top: 10px; min-height: 410px;"> <table id="dataTable" class="table table-bordered"> <thead> <tr> <th>选择</th> <th>序号</th> <th>主键ID</th> <th>金额</th> <th>账号</th> <th>URL</th> <th>邮箱地址</th> <th>固定电话</th> <th>移动手机号码</th> <th>IP地址</th> <th>QQ号码</th> <th>身份证号码</th> <th>邮政编码</th> </tr> </thead> <tbody> </tbody> </table> </div> <!-- end 数据区域 --> <!-- start 分页隐藏区域 --> <div id="pageHiddenDIV" style="display: none;"> <input type="hidden" value="1" id="currentPage" /> <input type="hidden" value="10" id="pageSize" /> <input type="hidden" value="0" id="totalPage" /> <input type="hidden" value="0" id="totalCount" /> </div> <!-- end 分页隐藏区域 --> <!-- start 分页信息区域 --> <div id="pageInfoDIV" class="pagination"> <ul> <li><a href="javascript:void(0);" id="pageInfo">总共0条记录，总共1页，当前第1页</a></li> </ul> <ul id="pageLinks"> </ul> </div> <!-- end 分页信息区域 --> </div> <!-- satart 提示信息模态窗口 --> <div id="infoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="infoModalLabel">提示信息</h3> </div> <div class="modal-body"> <p id="infoModalMsg" class="text-info"></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">确定</button> </div> </div> <!-- end 提示信息模态窗口 --> <!-- start 详情的模态窗口 --> <div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="detailModalLabel">详细信息</h3> </div> <div class="modal-body"> <table class="table table-bordered"> <tr> <th>金额：</th> <td id="detailMoneyType"></td> <th>账号：</th> <td id="detailAccountType"></td> </tr> <tr> <th>URL：</th> <td id="detailUrlType"></td> <th>邮箱地址：</th> <td id="detailEmailType"></td> </tr> </table> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">确定</button> </div> </div> <!-- end 详情的模态窗口 --> <!-- start 新增数据模态窗口 --> <div id="createModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="createModalLabel">新增记录</h3> </div> <div class="modal-body"> <div class="dataForm"> <div class="dataRow"> <div class="dataItem"> <div> <div class="textName"><strong>金额<span class="requiredMarker">(必填)</span>：</strong></div> <div id="createMoneyTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="createMoneyType" type="text" /> </div> </div> <div class="dataItem"> <div> <div class="textName"><strong>账号<span class="requiredMarker">(必填)</span>：</strong></div> <div id="createAccountTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="createAccountType" type="text" /> </div> </div> </div> <div class="dataRow"> <div class="dataItem"> <div> <div class="textName"><strong>URL<span class="requiredMarker">(必填)</span>：</strong></div> <div id="createUrlTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="createUrlType" type="text" /> </div> </div> <div class="dataItem"> <div> <div class="textName"><strong>邮箱地址<span class="requiredMarker">(必填)</span>：</strong></div> <div id="createEmailTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="createEmailType" type="text" /> </div> </div> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button> <button id="resetCreateBtn" class="btn btn-warning">重置</button> <button id="doCreateBtn" class="btn btn-primary">确定</button> </div> </div> @*bootstrap2样式的表单 <form class="form-horizontal"> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> </form> *@ <!-- end 新增数据模态窗口 --> <!-- start 更新数据模态窗口 --> <div id="updateModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="updateModalLabel">更新记录</h3> </div> <div class="modal-body"> <div class="dataForm"> <div class="dataRow"> <div class="dataItem"> <div> <div class="textName"><strong>金额<span class="requiredMarker">(必填)</span>：</strong></div> <div id="updateMoneyTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="updateId" type="hidden" /> <input id="updateMoneyType" type="text" /> </div> </div> <div class="dataItem"> <div> <div class="textName"><strong>账号<span class="requiredMarker">(必填)</span>：</strong></div> <div id="updateAccountTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="updateAccountType" type="text" /> </div> </div> </div> <div class="dataRow"> <div class="dataItem"> <div> <div class="textName"><strong>URL<span class="requiredMarker">(必填)</span>：</strong></div> <div id="updateUrlTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="updateUrlType" type="text" /> </div> </div> <div class="dataItem"> <div> <div class="textName"><strong>邮箱地址<span class="requiredMarker">(必填)</span>：</strong></div> <div id="updateEmailTypeErrorMsg" class="textErrorMsg"></div> </div> <div> <input id="updateEmailType" type="text" /> </div> </div> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button> <button id="resetUpdateBtn" class="btn btn-warning">重置</button> <button id="doUpdateBtn" class="btn btn-primary">确定</button> </div> </div> <!-- end 更新数据模态窗口 --> <!-- start 删除前确认模态窗口 --> <div id="deleteConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="deleteConfirmModalLabel">确认信息</h3> </div> <div class="modal-body"> <p id="deleteConfirmMsg" class="text-warning"></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">取消</button> <button id="doDeleteBtn" class="btn btn-primary">确定</button> </div> </div> <!-- end 删除前确认模态窗口 --></body></html>
js代码如下：
$(document).ready(function () { // 初始化时间控件 initDateTimePicker(); // 第一次查询数据 btnQuery(); // 查询按钮点击事件 $('#retrieveBtn').on('click', function () { btnQuery(); }); // start 详情操作相关 // 详情按钮点击事件 $('#detailBtn').on('click', function () { var selectedCheckBoxArray = $('.dataId:checked');// 选择所有勾选 if (0 == selectedCheckBoxArray.length) { $('#infoModalMsg').text('请选择一条数据进行操作'); $('#infoModal').modal('show'); } else if (1 < selectedCheckBoxArray.length) { $('#infoModalMsg').text('请勿选择多条数据进行操作'); $('#infoModal').modal('show'); } else { var dataId = $(selectedCheckBoxArray[0]).attr("data-id"); console.log('选择的dataId = ' + dataId); $.ajax({ url: '/CRUD/RetrieveById', data: { id: dataId }, type: 'get', dataType: 'json', success: function (data) { if (1 == data.result) { $('#detailMoneyType').text(data.data.MoneyType); $('#detailAccountType').text(data.data.AccountType); $('#detailUrlType').text(data.data.UrlType); $('#detailEmailType').text(data.data.EmailType); $('#detailModal').modal('show'); } else { $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); } }, error: function (err) { $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); } }); } }); // end 详情操作相关 // start 新增操作相关 // 弹出新增窗口 $('#createBtn').on('click', function () { initCreateInputs(); initCreateStyle(); $('#createModal').modal('show'); }); // 重置 $('#resetCreateBtn').on('click', function () { initCreateInputs(); initCreateStyle(); }); // 提交新增数据 $('#doCreateBtn').on('click', function () { var createModel = new Object(); createModel.MoneyType = parseFloat($('#createMoneyType').val().trim()); createModel.AccountType = $('#createAccountType').val().trim(); createModel.UrlType = $('#createUrlType').val().trim(); createModel.EmailType = $('#createEmailType').val().trim(); if (validateCreateData(createModel)) {// 通过了前台的数据验证，ajax提交数据 $('#createModal').modal('hide');// 为了避免重复提交，modal隐藏掉 commitCreateData(createModel); } else {// 没有通过验证,do nothing...just show those err msgs } }); // end 新增操作相关 // start 修改操作相关 // 修改按钮点击事件 $('#updateBtn').on('click', function () { var selectedCheckBoxArray = $('.dataId:checked');// 选择所有勾选 if (0 == selectedCheckBoxArray.length) { $('#infoModalMsg').text('请选择一条数据进行操作'); $('#infoModal').modal('show'); } else if (1 < selectedCheckBoxArray.length) { $('#infoModalMsg').text('请勿选择多条数据进行操作'); $('#infoModal').modal('show'); } else { var dataId = $(selectedCheckBoxArray[0]).attr("data-id"); $.ajax({ url: '/CRUD/RetrieveById', data: { id: dataId }, type: 'get', dataType: 'json', //async: false,// 设置为同步模式 success: function (data) { if (1 == data.result) { initUpdateStyle(); $('#updateId').val(data.data.Id); $('#updateMoneyType').val(data.data.MoneyType); $('#updateAccountType').val(data.data.AccountType); $('#updateUrlType').val(data.data.UrlType); $('#updateEmailType').val(data.data.EmailType); $('#updateModal').modal('show'); } else { $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); } }, error: function (err) { $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); } }); } }); // 修改重置 $('#resetUpdateBtn').on('click', function () { var selectedCheckBoxArray = $('.dataId:checked');// 选择所有勾选 var dataId = $(selectedCheckBoxArray[0]).attr("data-id"); $.ajax({ url: '/CRUD/RetrieveById', data: { id: dataId }, type: 'get', dataType: 'json', success: function (data) { if (1 == data.result) { initUpdateStyle(); $('#updateId').val(data.data.Id); $('#updateMoneyType').val(data.data.MoneyType); $('#updateAccountType').val(data.data.AccountType); $('#updateUrlType').val(data.data.UrlType); $('#updateEmailType').val(data.data.EmailType); } else { $('#updateModal').modal('hide'); $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); } }, error: function (err) { $('#updateModal').modal('hide'); $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); } }); }); // 确认修改 $('#doUpdateBtn').on('click', function () { var updateModel = new Object(); updateModel.Id = parseInt($('#updateId').val().trim()); updateModel.MoneyType = parseFloat($('#updateMoneyType').val().trim()); updateModel.AccountType = $('#updateAccountType').val().trim(); updateModel.UrlType = $('#updateUrlType').val().trim(); updateModel.EmailType = $('#updateEmailType').val().trim(); if (validateUpdateData(updateModel)) { $('#updateModal').modal('hide'); commitUpdateData(updateModel); } else { } }); // end 修改操作相关 // start 删除操作相关 //删除按钮点击事件 $('#deleteBtn').on('click', function () { var selectedCheckBoxArray = $('.dataId:checked');// 选择所有勾选 if (0 == selectedCheckBoxArray.length) { $('#infoModalMsg').text('请选择数据进行操作'); $('#infoModal').modal('show'); } else { var count = selectedCheckBoxArray.length; $('#deleteConfirmMsg').text('确定要删除这' + count + '条数据吗？'); $('#deleteConfirmModal').modal('show'); } }); // 确认删除 $('#doDeleteBtn').on('click', function () { $('#deleteConfirmModal').modal('hide');// var selectedCheckBoxArray = $('.dataId:checked');// 选择所有勾选 var dataIds = ''; for (var i = 0; i < selectedCheckBoxArray.length; i++) { dataIds += $(selectedCheckBoxArray[i]).attr("data-id"); dataIds += ','; } dataIds = dataIds.substring(0, dataIds.length - 1);// 去除后面的逗号 $.ajax({ url: '/CRUD/DoDelete', data: { ids: dataIds },// type: 'POST', dataType: 'json', success: function (data) { $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); }, error: function (err) { $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); } }); }); // end 删除操作相关});// 验证修改数据 function validateUpdateData(updateModel) { var validFlag = true; var updateMoneyType = updateModel.MoneyType; var updateMoneyTypeExp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;// 0-99999999.99 if ('' == updateMoneyType) { validFlag = false; $('#updateMoneyTypeErrorMsg').text('此项必填'); } else if (!updateMoneyTypeExp.test(updateMoneyType)) { validFlag = false; $('#updateMoneyTypeErrorMsg').text('格式不符合要求'); } else { $('#updateMoneyTypeErrorMsg').text(''); } var updateAccountType = updateModel.AccountType; console.log('updateAccountType = ' + updateAccountType); var updateAccountTypeExp = /^[A-Za-z]{6,20}$/; if ('' == updateAccountType) { validFlag = false; $('#updateAccountTypeErrorMsg').text('此项必填'); } else if (!updateAccountTypeExp.test(updateAccountType)) { validFlag = false; $('#updateAccountTypeErrorMsg').text('格式不符合要求'); } else { $('#updateAccountTypeErrorMsg').text(''); } var updateUrlType = updateModel.UrlType; var updateUrlTypeExp = /^[A-Za-z]+$/; if ('' == updateUrlType) { validFlag = false; $('#updateUrlTypeErrorMsg').text('此项必填'); } else if (!updateUrlTypeExp.test(updateUrlType)) { validFlag = false; $('#updateUrlTypeErrorMsg').text('格式不符合要求'); } else { $('#updateUrlTypeErrorMsg').text(''); } var updateEmailType = updateModel.EmailType; var updateEmailTypeExp = /^.+@.+\..+$/; if ('' == updateEmailType) { validFlag = false; $('#updateEmailTypeErrorMsg').text('此项必填'); } else if (!updateEmailTypeExp.test(updateEmailType)) { validFlag = false; $('#updateEmailTypeErrorMsg').text('格式不符合要求'); } else { $('#updateEmailTypeErrorMsg').text(''); } return validFlag;}// 提交修改数据function commitUpdateData(updateModel) { $.ajax({ url: '/CRUD/DoUpdate', data: updateModel,// 直接将js object类作为参数，可行！ type: 'POST', dataType: 'json', success: function (data) { $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); }, error: function (err) { $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); } });}// 提交新增数据function commitCreateData(createModel) { $.ajax({ url: '/CRUD/DoCreate', data: createModel,// 直接将js object类作为参数，可行！ type: 'POST', dataType: 'json', success: function (data) { $('#infoModalMsg').text(data.msg); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); }, error: function (err) { $('#infoModalMsg').text('网络错误，请稍后重试'); $('#infoModal').modal('show'); setTimeout("clearMsgAndRefreshData();", 2000); } });}// 清除提示信息并重新加载数据function clearMsgAndRefreshData() { $('#infoModal').modal('hide'); btnQuery();}// 验证新增数据function validateCreateData(createModel) { var validFlag = true; var createMoneyType = createModel.MoneyType; var createMoneyTypeExp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;// 0-99999999.99 if ('' == createMoneyType) { validFlag = false; $('#createMoneyTypeErrorMsg').text('此项必填'); } else if (!createMoneyTypeExp.test(createMoneyType)) { validFlag = false; $('#createMoneyTypeErrorMsg').text('格式不符合要求'); } else { $('#createMoneyTypeErrorMsg').text(''); } var createAccountType = createModel.AccountType; console.log('createAccountType = ' + createAccountType); var createAccountTypeExp = /^[A-Za-z]{6,20}$/; if ('' == createAccountType) { validFlag = false; $('#createAccountTypeErrorMsg').text('此项必填'); } else if (!createAccountTypeExp.test(createAccountType)) { validFlag = false; $('#createAccountTypeErrorMsg').text('格式不符合要求'); } else {// 远程验证 $.ajax({ url: '/CRUD/ValidCreateAccountType', data: { 'createAccountType': createAccountType }, type: 'get', dataType: 'json', async: false,// 设置为同步模式 success: function (data) { if (1 == data.result) { validFlag = false; $('#createAccountTypeErrorMsg').text('此账号已经被使用'); } else { $('#createAccountTypeErrorMsg').text(''); } }, error: function (err) { validFlag = false; $('#createAccountTypeErrorMsg').text('此账号已经被使用'); } }); } var createUrlType = createModel.UrlType; var createUrlTypeExp = /http:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/; if ('' == createUrlType) { validFlag = false; $('#createUrlTypeErrorMsg').text('此项必填'); } else if (!createUrlTypeExp.test(createUrlType)) { validFlag = false; $('#createUrlTypeErrorMsg').text('格式不符合要求'); } else { $('#createUrlTypeErrorMsg').text(''); } var createEmailType = createModel.EmailType; var createEmailTypeExp = /^.+@.+\..+$/; if ('' == createEmailType) { validFlag = false; $('#createEmailTypeErrorMsg').text('此项必填'); } else if (!createEmailTypeExp.test(createEmailType)) { validFlag = false; $('#createEmailTypeErrorMsg').text('格式不符合要求'); } else { $('#createEmailTypeErrorMsg').text(''); } return validFlag;}// 初始化新增输入内容function initCreateInputs() { $('#createMoneyType').val(''); $('#createAccountType').val(''); $('#createUrlType').val(''); $('#createEmailType').val('');}// 初始化新增提示信息function initCreateStyle() { $('#createMoneyTypeErrorMsg').text(''); $('#createAccountTypeErrorMsg').text(''); $('#createUrlTypeErrorMsg').text(''); $('#createEmailTypeErrorMsg').text('');}// 初始化修改提示信息function initUpdateStyle() { $('#updateMoneyTypeErrorMsg').text(''); $('#updateAccountTypeErrorMsg').text(''); $('#updateUrlTypeErrorMsg').text(''); $('#updateEmailTypeErrorMsg').text('');}// 分页链接点击查询function pageQuery(target) { var queryKey = ''; var sortName = 'id'; var sortOrder = 'asc'; var pageText = target.text; var currentPage = '1'; if ('首页' == pageText) { currentPage = '1'; } else if ('末页' == pageText) { currentPage = $('#totalPage').val(); } else { currentPage = pageText; } var pageSize = $('#pageSize').val(); getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize);}// 按钮点击查询function btnQuery() { var queryKey = ''; var sortName = 'id'; var sortOrder = 'asc'; var currentPage = $('#currentPage').val(); var pageSize = $('#pageSize').val(); getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize);}// 获取并显示数据function getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize) { $.ajax({ url: '/CRUD/RetrievePageData', data: { 'queryKey': queryKey, 'sortName': sortName, 'sortOrder': sortOrder, 'currentPage': currentPage, 'pageSize': pageSize }, type: 'GET', dataType: 'json', success: function (data) { var trs = ''; if (1 == data.result) { for (var i = 0; i < data.data.length; i++) { var dataId = data.data[i].Id; trs += '<tr>'; trs += '<td><input type="checkbox" class="dataId" data-id="' + dataId + '"/></td>'; trs += '<td>' + parseInt(i + 1) + '</td>'; trs += '<td>' + dataId + '</td>'; trs += '<td>' + data.data[i].MoneyType + '</td>'; trs += '<td>' + data.data[i].AccountType + '</td>'; trs += '<td>' + data.data[i].UrlType + '</td>'; trs += '<td>' + data.data[i].EmailType + '</td>'; trs += '<td>' + data.data[i].TelTyple + '</td>'; trs += '<td>' + data.data[i].MobilePhoneType + '</td>'; trs += '<td>' + data.data[i].IpType + '</td>'; trs += '<td>' + data.data[i].QqType + '</td>'; trs += '<td>' + data.data[i].IdType + '</td>'; trs += '<td>' + data.data[i].PostCodeType + '</td>'; trs += '</tr>'; } var totalCount = data.totalCount; var currentPage = data.currentPage; var totalPage = data.totalPage; // 隐藏区域赋值 $('#totalCount').val(totalCount); $('#currentPage').val(currentPage); $('#totalPage').val(totalPage); // 分页信息提示显示 var pageInfo = '总共' + totalCount + '条记录，总共' + totalPage + '页，当前第' + currentPage + '页'; $('#pageInfo').html(pageInfo); // 分页链接信息 var pageLinks = ''; pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">首页</a></li>'; for (var j = 1; j <= parseInt(totalPage) ; j++) { if (j == parseInt(currentPage)) { pageLinks += '<li class="active"><a href="javascript:void(0);" class="pageQuery">' + j + '</a></li>'; } else { pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">' + j + '</a></li>'; } } pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">末页</a></li>'; $('#pageLinks').html(pageLinks); // 绑定点击事件 $('.pageQuery').on('click', function () { pageQuery(this); }); } else { trs += '<tr><td colspan="13">'; trs += '<div class="alert alert-warning">'; trs += '<a href="#" class="close" data-dismiss="alert">'; trs += '×'; trs += '</a>'; trs += '<strong>警告！</strong>' + data.msg; trs += '</div>'; trs += '</td></tr>'; } $('#dataTable tbody').html(trs); }, error: function (ex) { var exTrs = ''; exTrs += '<tr><td colspan="13">'; exTrs += '<div class="alert alert-warning">'; exTrs += '<a href="#" class="close" data-dismiss="alert">'; exTrs += '×'; exTrs += '</a>'; exTrs += '<strong>警告！</strong>网络错误，请稍后重试'; exTrs += '</div>'; exTrs += '</td></tr>'; $('#dataTable tbody').html(exTrs); } });}// 初始化日期时间选择控件function initDateTimePicker() { $('#datetimepicker').datetimepicker({ format: 'yyyy-MM-dd hh:mm:ss', language: 'zh-CN',// 默认的“en”。引入了扩展了的汉化js pickDate: true, pickTime: true, hourStep: 1, minuteStep: 15, secondStep: 30, inputMask: true });}附图：
0 0
- 一个自定义的典型的CRUD示例
- 一个典型的SWIG源码示例文件
- JDBC的CRUD示例
- 递归的典型示例
- 分析一个典型的C# PROJECT MVC示例
- 一个仿 Eclipse 欢迎窗口的代码 - FormLayout典型示例
- 在外存存储图片的一个典型示例
- 一个典型的配置文件
- 一个典型的例子
- Struts2中典型CRUD Action的抽象基类
- struts2 一个CRUD的BaseAction
- 自定义一个字节缓冲区的简单示例
- __index有关继承的典型示例
- linux下awk的典型用法示例
- python 函数装饰器的典型示例
- 百度地图的一个项目，自定义适配器的一个示例
- 一个典型的build.xml
- 一个黑洞的典型例子
- Oracle EBS FSG报表迁移
- postgresql数据库psql控制台操作命令
- select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET
- 数据库事务操作+数据库事务隔离级别
- 第6讲 Map，Tuple，Zip实战解析
- 一个自定义的典型的CRUD示例
- iOS 多线程
- 阿里巴巴2014校招笔试题-2013年9月14日
- 将pdf转换成html的方法
- lambda表达式&委托
- leetcode 112 —— Path Sum
- SIP协议详解&eXosip源码库用法分析
- 依赖权重的随机选择
- Lucas定理 大组合数取模
