分页组件就是上海体育场面中的三有的,做东西也是只管达成效益万博manbetx官网

    我们在档次开销中,做得最多的只怕正是CRUD,那么我们什么样在ASP.NET
MVC中来做CRUD呢?假如说只是单独完成效果与利益,那当然是再轻松但是了,但是大家要思索怎样来做得相比较好爱抚比较好扩张,怎么做得相比理想。做开拓要有歌唱家精气神,不要只求实现支付职分,那样的话,永久滞留在只是简短的写作业逻辑代码水平,大家要做有追求的程序员。本来如此轻便的东西,小编真是懒得写,不过看见正是是有的专门的学业了好些年的人,做东西也是只管完毕效果与利益,啥都不管,还应该有个别分界面css样式要么就硬编要么就绝不许绳的在页面中打开接力,境遇要安装间隔以至直接写多少个 ,作者觉着照旧要写出来给这一位看下。硬编的前提是独有你那三个分界面使用。

自写的jQuery落成分页功用的分页组件:

   
大家先来看下大家要贯彻的功能,功用须求:新添、校订、删除、查询、分页、排序、导出excel、打字与印刷、上传图片、帮衬表单验证,华贵的落实有多轻易?非常轻便。

效率意义如下:

万博manbetx官网 1万博manbetx官网 2

万博manbetx官网 3

万博manbetx官网 4万博manbetx官网 5万博manbetx官网 6万博manbetx官网 7万博manbetx官网 8

 

急需用到什么UI组件?小编都以依照bootstrap这种扁平化响应式风格的,jquery.dataTables.js、toastr.js、bootstrapValidator.js、bootstrap-confirmation.js、printThis.js

分页组件就是上海教室中的三有的, 分别位居表格上部  和下部 。

鉴于是亲自去做用,所以调整器中央行政机关接调用了EF上下文操作,注重是看前端部分的渲染和互相,不要再度你的代码!不要再度你的代码!不要再一次你的代码!首要的专门的工作说叁遍!为啥未有用mvc自带的模型验证?答:太傻逼!1、样式改起来操蛋;2、每一次要点击提交表单才促发验证。

其中,

此地球表面数据量少,是直接一次性加载,然后内部存款和储蓄器中分页的,若是表数据量多,那么将要用服务器分页,同样异常粗略。校勘下布署项,如下所示:然后调整器中对应的点子有些校正下就可以。

1》》》页面包车型客车代码如下:

options.bServerSide = true;,
options.fnServerParams = function (aoData) {  //查询条件
        aoData.push(
             { "name": "LogName", "value": $("#LogName").val() }
            );
    };

product.jsp

 BaseController调整器基类

当中引用bootstrap.css  和bootstrap .js是必需的

万博manbetx官网 9万博manbetx官网 10

万博manbetx官网 11万博manbetx官网 12

    [PublicAuthorize]
    public class BaseController : Controller
    {
        HomeService _HomeService = new HomeService();
        #region 字段

        /// <summary>
        /// 新增
        /// </summary>
        protected string CText = "新增";
        /// <summary>
        /// 读取
        /// </summary>
        protected string RText = "读取";
        /// <summary>
        /// 更新
        /// </summary>
        protected string UText = "更新";
        /// <summary>
        /// 删除
        /// </summary>
        protected string DText = "删除";
        /// <summary>
        /// 数据有误!
        /// </summary>
        protected string VoidText = "数据有误!";

        #endregion

        #region 属性
        /// <summary>
        /// 获取点击的菜单ID
        /// </summary>
        public string MenuId { get { return Request.QueryString["MenuId"]; } }
        /// <summary>
        /// 自动构建页面标题导航
        /// </summary>
        public MvcHtmlString HeadString
        {
            get { return new MvcHtmlString(_HomeService.GetHead(int.Parse(MenuId))); }
        } 
        /// <summary>
        /// 构造非菜单页的界面导航标题
        /// </summary>
        /// <param name="title">页面标题</param>
        public void CreateSubPageHead(string title)
        {
            ViewBag.HeadString = HeadString;
            ViewBag.MenuId = MenuId;
            ViewBag.SubHeadString = title; 
        }
        #endregion
        [HttpGet]
        public virtual ActionResult Index()
        {
            if (!string.IsNullOrEmpty(MenuId))
            {
                ViewBag.MenuId = MenuId;
                ViewBag.HeadString = HeadString;
            }
            return View();
        }
        /// <summary>
        /// 操作成功
        /// </summary>
        /// <param name="message">提示文本</param>
        /// <returns></returns>
        protected virtual AjaxResult SuccessTip(string message)
        {
            return new AjaxResult { state = ResultType.success.ToString(), message = message };
        }
        /// <summary>
        /// 操作失败
        /// </summary>
        /// <param name="message">提示文本</param>
        /// <returns></returns>
        protected virtual AjaxResult ErrorTip(string message)
        {
            return new AjaxResult { state = ResultType.error.ToString(), message = message };
        }
    }
  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 
  4 
  5 <%
  6 String path = request.getContextPath();
  7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  8 %>
  9 <!DOCTYPE HTML>
 10 <html>
 11 <head>
 12 <meta charset="utf-8">
 13 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 16 <meta http-equiv="Cache-Control" content="no-siteapp" />
 17 
 18 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" />
 19 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" />
 20 <link href="../css/style.css" rel="stylesheet" type="text/css" />
 21 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
 22 <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 23 
 24 <title>产品列表</title>
 25 <style type="text/css" >
 26     .pageInfo{
 27      display: inline;
 28     }
 29 </style>
 30 </head>
 31 <body>
 32 
 33 <nav class="breadcrumb" style="padding: 0px 1px 20px 0px;margin-bottom: 0px;"><i class="Hui-iconfont">&#xe67f;</i> 首页 &gt; 基因信息管理 &gt; 产品列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
 34 
 35 <div class="pd-20">
 36   <div class="text-c"> 
 37     <select class="select" id="" name="" style="width:250px">
 38       <option value="0">产品</option>
 39       <option value="AccountInfo">基因型</option>
 40       <option value="AdminInfo">关键字</option>
 41     </select>
 42     <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 查询</button>
 43   </div>
 44 </div>
 45     <div class="cl pd-5 bg-1 bk-gray mt-20"> 
 46         <a href="javascript:;"  class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
 47         <a class="btn btn-primary radius"  href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加产品</a> 
 48     </div>
 49     
 50     
 51     <!-- 分页 + table  从这里开始     由于样式采用bootstrap,所以class样式尽量使用一致的 -->
 52     <div class="container">
 53         <!-- 分页的第一部分    开始 -->
 54         <div class="row" style="margin: 20px 0px 5px 10px;">
 55             <label class="pageInfo">每页显示 </label> 
 56             <select class="form-control pageInfo" style="width: 20%">
 57                 <option>5</option>
 58                 <option selected="selected">10</option>
 59                 <option>20</option>
 60                 <option>50</option>
 61                 <option>100</option>
 62             </select> 
 63             <label class="pageInfo">条</label> 
 64         </div>
 65         <!-- 分页的第一部分    结束 -->
 66         <!-- table部分 开始 -->
 67         <div class="row"><!-- 采用样式row 分成一层  一层   -->
 68             <table class="table table-hover table-bordered table-bg">
 69                 <thead>
 70                     <tr class="text-c">
 71                         <th width="25"><input type="checkbox"  id="ch1">全选</th>  
 72                         <th width="80">产品名称</th>
 73                         <th width="280">操作</th>
 74                     </tr>
 75                 </thead>
 76                 <tbody>
 77                 </tbody>
 78             </table>
 79         </div>
 80         <!-- table 部分结束 -->
 81         <!-- 分页  第二部分 开始 -->
 82         <div class="row">
 83             <!-- 第二部分左边部分开始 -->
 84             <div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">当前显示第<label class="startInfo"></label>条到第<label class="endInfo"></label> 条,总共<label class="totalInfo"></label>条</div>
 85             <!-- 第二部分右边部分 开始 -->
 86             <div class="pageInfo pull-right">
 87                 <nav >
 88                     <ul class="pagination">
 89                         <li>
 90                           <a href="#" aria-label="Previous" style="display: none">
 91                             &laquo;
 92                           </a>
 93                         </li>
 94                         <li class="active"><a href="#">1</a></li>
 95                         <li>
 96                           <a href="#" aria-label="Next">
 97                             &raquo;
 98                           </a>
 99                         </li>
100                      </ul>
101                 </nav>
102             </div>
103         </div>
104         <!-- 分页第二部分 结束 -->
105     </div>
106 
107 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
108 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 
109 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 
110 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 
111 <script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
112 <script type="text/javascript" src="../js/H-ui.js"></script> 
113 <script type="text/javascript" src="../js/H-ui.admin.js"></script>
114 <script type="text/javascript" src="../js/pageSet.js"></script>
115 <script type="text/javascript" src="../js/geneinfo/product/product.js"></script>
116 </body>
117 </html>

View Code

View Code

控制器DefaultController

 

万博manbetx官网 13万博manbetx官网 14

2》》》分页组件的js文件

    public class DefaultController : BaseController
    {
        private MyContext db = new MyContext();
        /// <summary>
        /// 客户列表
        /// </summary>
        /// <param name="filter"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult List(Customer filter)
        {
            //filter.PageSize = int.MaxValue;
            IQueryable<Customer> dataSource = db.Customers;

            if (!string.IsNullOrEmpty(filter.Name))
            {
                dataSource = dataSource.Where(x => x.Name == filter.Name).OrderBy(x => x.CreateTime);
            }

            List<Customer> queryData = dataSource.ToList();

            var data = queryData.Select(u => new
            {
                ID = u.Id,
                Name = u.Name,
                CreateTime = u.CreateTime.ToDateStr(),
                Address = u.Address
            });

            //构造成Json的格式传递
            var result = new { iTotalRecords = queryData.Count, iTotalDisplayRecords = 10, data = data };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        #region CRUD
        [HttpGet]
        public ActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Create([Bind(Include = "Name,Address,CreateTime,Msg,HeadsUrl")] Customer _Customer)
        {
            AjaxResult _AjaxResult = null;
            if (ModelState.IsValid)
            {
                db.Customers.Add(_Customer);
                _AjaxResult = db.SaveChanges() > 0 ? SuccessTip(string.Format("{0}成功!", CText)) : ErrorTip(string.Format("{0}失败!", CText)); ;
            }
            else
            {
                _AjaxResult = ErrorTip(VoidText);
            }
            return Json(_AjaxResult, JsonRequestBehavior.AllowGet);
        }

        [HttpGet]
        public ActionResult Update(int Id)
        {
            var model = db.Customers.Where(x => x.Id == Id).FirstOrDefault();
            return View(model);
        }
        [HttpPost]
        public JsonResult Update([Bind(Include = "Id,Name,Address,CreateTime,Msg,HeadsUrl")] Customer _Customer)
        {
            AjaxResult _AjaxResult = null;
            if (ModelState.IsValid)
            {
                db.Entry(_Customer).State = EntityState.Modified;
                _AjaxResult = db.SaveChanges() > 0 ? SuccessTip(string.Format("{0}成功!", UText)) : ErrorTip(string.Format("{0}失败!", UText));
            }
            else
            {
                _AjaxResult = ErrorTip(VoidText);
            }
            return Json(_AjaxResult, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult Delete(int Id)
        {
            var model = db.Customers.Where(x => x.Id == Id).FirstOrDefault();
            db.Customers.Remove(model);
            AjaxResult _AjaxResult = db.SaveChanges() > 0 ? SuccessTip(string.Format("{0}成功!", DText)) : ErrorTip(string.Format("{0}失败!", DText));

            return Json(_AjaxResult, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult DeleteList(List<int> ids)
        {
            var list = db.Customers.Where(x => ids.Contains(x.Id)).ToList();
            db.Customers.RemoveRange(list);
            AjaxResult _AjaxResult = db.SaveChanges() > 0 ? SuccessTip(string.Format("{0}成功!", DText)) : ErrorTip(string.Format("{0}失败!", DText));

            return Json(_AjaxResult, JsonRequestBehavior.AllowGet);
        }

        #endregion

        #region File handle
        /// <summary>
        /// 导出Excel
        /// </summary>
        /// <returns></returns>
        public FileResult ExportExcel()
        {
            string excelPath = Server.MapPath("~/Excel/用户列表.xls");
            GenerateExcel genExcel = new GenerateExcel();
            genExcel.SheetList.Add(new UserListSheet(db.Customers.ToList(), "用户列表"));
            genExcel.ExportExcel(excelPath);
            return File(excelPath, "application/ms-excel", "用户列表.xls");
        }
        /// <summary>
        /// 上传文件
        /// </summary>
        /// <returns></returns>
        public JsonResult ExportFile()
        {
            HttpPostedFileBase file = Request.Files["txt_file"];
            uploadFile _uploadFile = new uploadFile();

            if (file != null)
            {
                string str = DateTime.Now.ToString("yyyyMMddhhMMss");
                var fileFullName =string.Format("{0}{1}_{2}",Request.MapPath("~/Upload/"),str ,file.FileName);
                try
                {
                    file.SaveAs(fileFullName);
                    _uploadFile.state = 1;
                }
                catch
                {
                    _uploadFile.state = 0;
                }
                finally
                {
                    _uploadFile.name = str+"_"+file.FileName;
                    _uploadFile.fullName = fileFullName;
                }
            }
            else
            {
                _uploadFile.state = 0;
            }
            return Json(_uploadFile, JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 删除文件
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult DeleteFile(string key)
        {
            var fileFullName = Path.Combine(Request.MapPath("~/Upload"), key);
            int state = 0;
            try
            {
                state = FileHelper.DeleteFile(fileFullName) ? 1 : 0;
                //var model = db.Customers.Where(x => x.HeadsUrl == key).FirstOrDefault();
                //if(model!=null)
                //{
                //    db.Customers.Remove(model);
                //}
            }
            catch
            {
                state = 0;
            }
            return Json(state, JsonRequestBehavior.AllowGet);
        } 

        #endregion
    }

pageSet.js

View Code

万博manbetx官网 15万博manbetx官网 16

视图页面,razor、css、js都分开,不要放到一个文本中。

  1 var page = {}; // 定义分页类
  2 (// 这里用大括号将整个的类 包括【本类的属性定义】【本类的方法】 整体括起来,是让本类在页面加载的时候就运行
  3 
  4 // tt这个类的字段定义
  5 function() {
  6     page.bindData;
  7     page = function page(url, bindData) {
  8         this.pageNo = 1; // 当前页 初始值为1
  9         this.pageSize = 10; // 当前页显示多少条
 10         this.startInfo = 1; // 开始条数
 11         this.endInfo = 10; // 结束条数
 12         this.totalPage = 0; // 总页数
 13         this.totalInfo = 0; // 总条数
 14         this.tempLi = "<li><a href='#'></a></li>"; // 用于添加页码处使用
 15         this.url = url; // 用于不同页面的请求地址
 16         this.result = null; // 用于可能仅需要正文数据时使用
 17         this.bindData = bindData;
 18         this.init();
 19         return this;
 20     }
 21 
 22     // 根据初始化的参数 bindData()绑定参数的方法 page初始化的对象 来请求后台,传回 新的page信息
 23     page.prototype.pageSet = function() {
 24         $.post(page.url, {
 25             "pageNo" : page.pageNo,
 26             "pageSize" : page.pageSize
 27         }, function(data) {
 28             result = null;
 29             data = eval("(" + data + ")");
 30             if (data != null && data != "" && data != undefined) {
 31                 page.pageNo = data.pageNum == 0 ? 1 : data.pageNum;
 32                 page.pageSize = data.pageSize == 0 ? page.pageSize : data.pageSize;
 33                 page.startInfo = data.pageNum == 0 ? 0 : (page.pageNo - 1) * page.pageSize + 1;
 34                 page.endInfo = page.startInfo + page.pageSize - 1;
 35                 page.endInfo = page.endInfo >= data.total ? data.total : page.endInfo;
 36                 page.totalPage = data.pages;
 37                 page.totalInfo = data.total;
 38                 page.result = data.list;
 39             }
 40             // 执行绑定参数的方法
 41             bindData();
 42             // 如果总页数 <=1 隐藏下一页
 43             if (page.totalPage <= 1) {
 44                 $("a[aria-label='Next']").hide();
 45             }
 46         });
 47     }
 48 
 49     // 设置分页组件的 一些信息 eq:总共多少条 显示第几条~第几条 动态显示页码
 50     page.prototype.setValue = function() {
 51         $("label.startInfo").text(page.startInfo); // 为此三个元素赋值
 52         $("label.endInfo").text(page.endInfo);
 53         $("label.totalInfo").text(page.totalInfo);
 54         var temp = "";
 55         if (page.totalPage != 0) { // 首先保证总页数不是0页
 56             $(".pagination li").removeClass("active"); // 移除掉之前的 当前页面 页码按钮的
 57                                                         // 选中状态
 58             if (page.totalPage <= 5
 59                     && $(".pagination li").length != page.totalPage + 2) {             // 【初始化总页数小于5页的情况】此处规定下面显示的页数就是5页 如果总页数<5则全部显示》》》$(".pagination li").length !=page.totalPage + 2保证不会重复叠加
 60                 for (var i = 0; i < page.totalPage - 1; i++) {                          // 总页数<5,则全部添加
 61                     temp += $(page.tempLi).find("a").text(i + 2).parent().prop("outerHTML");                                              // 为tempLi变量中的a标签添加页码数 然后找到a标签的父层
 62                                                                                      // 此时的它是Object类型,需要通过prop("outerHTML")这个属性,获取到HTML代码,这样才能用于追加进页面 【 原生JS DOM里有一个内置属性outerHTML】
 63                 }
 64                 page.cleanUp();
 65                 $(".pagination li").eq(1).after(temp);                                  // 并将动态生成的页码按钮的HTML代码
 66                                                                                      // 添加到li的第二个之后
 67                                                                                        // 【这里是eq(1)第二个是因为(上一页)这个按钮虽然属性设为隐藏,但是依旧存在;而默认的还有一个第一页这个页码是存在的。所以是两个li,所以是eq(1)】
 68             } else {                                                                  // 否则,是总页数>5的
 69                 var absCon = Math.abs($(".pagination li").eq(3).text()- page.pageNo); // 先获取eq(3)也就是 中间位置的页码-当前页
 70                                                                                         // 【点击中间页码 靠后的页码按钮的情况】如果当前页>中间位置的页码数 && 中间位置的.length !=0 &&
 71                                                                                         // (除了最后一个页码li之外的的最后一个li的文本)也就是倒数第二个的文本!=总页数 【这里的判断条件就是
 72                                                                                         // 如果点击的是中间位置靠后的页码 eq:12345中的4或者5的话】 条件成立
 73                 if (page.pageNo > $(".pagination li").eq(3).text()
 74                         && $(".pagination li").eq(3).length != 0
 75                         && $(".pagination li:not(:last):last").text() != page.totalPage) {
 76                     absCon = page.totalPage - page.pageNo >= absCon ? absCon
 77                             : page.totalPage - page.pageNo; // 【当前页就是即将要显示的页码】如果
 78                                                             // 总页数-当前页>absCon
 79                                                             // 那么就给absCon原本的值,否则就将总页数-当前页的值赋值给absCon
 80                     for (var i = 0; i < absCon; i++) { // 此处absCon的作用:
 81                                                         // 点击中间位置靠后的页码数,可能即将显示的当前页
 82                                                         // 是最后一页了,那就不再添加新的页码出来了【eq:总共9页,即将显示的是第9页,那9这个页码之后就不再新增加页码了】
 83                         // 然后将新增加的页码添加在最后一个li【此处的最后一个li是下一页按钮】之前
 84                         // ;要添加的内容就是新生成的li的HTML文本 【eval($(".pagination
 85                         // li").eq($(".pagination li").length - 2).text())+1
 86                         // 这里使用eval()将其中的内容括起来是为了获取到的值直接和1相加】
 87                         $(".pagination li").last().before(
 88                                 $(page.tempLi).find("a").text(
 89                                         eval($(".pagination li").eq(
 90                                                 $(".pagination li").length - 2)
 91                                                 .text()) + 1).parent().prop(
 92                                         "outerHTML"));
 93                         $(".pagination li").eq(1).remove(); // 并且在循环中始终删除eq(1)也就是前一页按钮之后的第一个页码
 94                     }
 95                 } else { // 【初始化 页数大于5页的情况】如果 当前页面上的li【包括上一页,下一页总共7个页码按钮】!=7个
 96                             // && 当前页面上的li个数 !=总页数+2 【此处的总页数是后台返回的总页数】
 97                     if ($(".pagination li").length != 7
 98                             && $(".pagination li").length != page.totalPage + 2) {
 99                         for (var i = 0; i < 4; i++) {
100                             temp += $(page.tempLi).find("a").text(i + 2)
101                                     .parent().prop("outerHTML");
102                         }
103                         $(".pagination li").eq(1).after(temp.toString());
104                         // 【点击 中间页码靠前页码的情况】如果当前页<中间位置的页码 && 上一页按钮之后的页码按钮>=2
105                         // 【即点击的中间页码按钮靠前的页码按钮】
106                     } else if (page.pageNo < $(".pagination li").eq(3).text()
107                             && $(".pagination li").eq(1).text() >= 2) {
108                         absCon = page.pageNo - 1 > absCon ? absCon
109                                 : page.pageNo - 1;
110                         for (var i = 0; i < absCon; i++) {
111                             $(".pagination li").first().after(
112                                     $(page.tempLi).find("a").text(
113                                             eval($(".pagination li").eq(1)
114                                                     .text()) - 1).parent()
115                                             .prop("outerHTML"));
116                             $(".pagination li").eq(
117                                     $(".pagination li").length - 2).remove(); // 靠后的页码按钮
118                                                                                 // 【此处-2是将上一页
119                                                                                 // 下一页两个按钮去掉】
120                         }
121                     }
122 
123                 }
124             }
125             
126             //删除或者新增信息的时候,页码可能动态变化
127             if($(".pagination li:not(:last):last").text() > page.totalPage) {
128                 $(".pagination li:not(:last):last").remove();
129                 if(page.pageNo == page.totalPage) {
130                     $("a[aria-label='Next']").hide();
131                 }
132                 if($(".pagination li:not(:first):first").text() > 1) {
133                     $(".pagination li:first").after($(page.tempLi).find("a").text(parseInt($(".pagination li:not(:first):first").text()) - 1).parent().prop("outerHTML"));
134                 }
135             }
136             
137             //上一页 下一页  的隐藏与显示
138             if($(".pagination li:not(:last):last").text() > page.pageNo) {
139                 $("a[aria-label='Next']").show();
140             } else {
141                 $("a[aria-label='Next']").hide();
142             }
143             
144             if($(".pagination li:not(:first):first").text() < page.pageNo) {
145                 $("a[aria-label='Previous']").show();
146             } else {
147                 $("a[aria-label='Previous']").hide();
148             }
149 
150             $(".pagination li:contains(" + page.pageNo + ")")
151                     .addClass("active"); // 为 新的 当前页 页码按钮 添加 active选中状态
152         }
153     }
154 
155     // 初始化方法 页码的点击事件 上下页点击事件 每页显示多少条的 改变事件
156     page.prototype.init = function() {
157         $("a[aria-label='Previous']").click(function() {
158             $("a[aria-label='Next']").show();
159             if (page.pageNo == 2) {
160                 $("a[aria-label='Previous']").hide();
161             } else {
162                 $("a[aria-label='Previous']").show();
163             }
164             if (page.pageNo == 1) {
165                 return;
166             }
167             page.pageNo--;
168             page.pageSet(bindData, page);
169         });
170 
171         // 绑定 下一页 的点击事件
172         $("a[aria-label='Next']").click(function() {
173             $("a[aria-label='Previous']").show();
174             if (page.pageNo == page.totalPage - 1) {
175                 $("a[aria-label='Next']").hide();
176             } else {
177                 $("a[aria-label='Next']").show();
178             }
179             page.pageNo++;
180             page.pageSet(bindData, page);
181         });
182 
183         // 上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination
184         // li:gt(0):not(:last)",function(){});的区别在于:
185         // .click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的
186         // 而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件
187 
188         // 为动态生成的 页码按钮 添加 点击事件
189         $(document).on("click", ".pagination li:gt(0):not(:last)", function() {
190             page.pageNo = $(this).text();
191             $("a[aria-label='Previous']").show();
192             $("a[aria-label='Next']").show();
193             if (page.pageNo == "1") {
194                 $("a[aria-label='Previous']").hide();
195             }
196             if (page.pageNo == page.totalPage) {
197                 $("a[aria-label='Next']").hide();
198             }
199 
200             page.pageSet(bindData, page);
201         });
202 
203         // 为select 选择每页显示多少条 添加改变时间 【但是这不使用change而是使用input 是因为change对IE浏览器不支持】
204         $(".pageInfo").on(
205                 "input",
206                 function() {
207                     page.pageSize = $(this).val();
208                     page.pageNo = 1;
209                     $("a[aria-label='Previous']").hide();
210                     $(".pagination li:not(:first):not(:last)").remove();
211                     // $(".pagination li:not(:first), .pagination
212                     // li:not(:last)").remove();
213                     $(".pagination li:first").after(
214                             "<li class='active'><a href='#'>1</a></li>");
215                     page.pageSet(bindData, page);
216                 });
217 
218     }
219 
220     /**
221      * 清除页码部分,回到初始化状态
222      */
223     page.prototype.cleanUp = function() {
224         $("a[aria-label='Previous']").hide();
225         $("a[aria-label='Next']").show();
226         $(".pagination li:gt(0):not(:last)").remove();
227         $(".pagination li:eq(0)").after("<li><a href='#'>1</a></li>");
228     }
229 
230 })();

Index视图:

View Code

万博manbetx官网 17万博manbetx官网 18

 

@model List<Secom.Smp.Data.Models.Customer>
@{
    ViewBag.Title = "用户列表";
    ViewBag.ParentTitle = "系统管理";
    Layout = "~/Views/Shared/_Page.cshtml";
}
<style type="text/css">
    .divModal {
        width: 700px;
    }
</style>
<div class="page-content-body">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet-title">
                    <div class="caption font-dark">
                        <i class="icon-settings font-dark"></i>
                        用户列表
                    </div>
                    <div class="actions">

                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-toolbar">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="btn-group">
                                    <button id="btnAdd" class="btn sbold green" onclick="DataTablesObj.doCreateModal('/Admin/Default/Create')" data-toggle="modal">添加用户<i class="fa fa-plus"></i></button>
                                    <button id="btnDeleteList" title="确定要删除吗?" class="btn sbold btn-danger deleteBtn" data-toggle="confirmation" data-placement="right" data-btn-ok-label="继续" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="取消"
                                            data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger">
                                        批量删除
                                        <i class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="btn-group pull-right">
                                    <button class="btn green  btn-outline dropdown-toggle" data-toggle="dropdown">
                                        操作
                                        <i class="fa fa-angle-down"></i>
                                    </button>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <a href="/Admin/Default/ExportExcel" target='_blank' class="fa fa-file-excel-o"> 导出Excel </a>
                                        </li>
                                        <li>
                                            <a href="#" class="fa fa-file-excel-o" id="printView"> 打印预览</a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="table_local"></table>
                </div>
            <!--模态弹窗-->
            <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
                <div class="modal-dialog divModal" role="document">
                    <div class="modal-content">
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>       
        </div>
</div>
@section scripts
{
<script src="@Html.ScriptsPath("lib/printThis.js")"></script>
}

3》》》本页面的js中  须要提供数据的包装成效bindDate(卡塔尔(قطر‎方法,【并且注意,任何页面发生变化的地点都急需调用分页的page.pageSet(卡塔尔国;方法,例如数据的充实,数据的去除,还会有page对象初阶化,页面开始化的时候正是那多少个地点需求调用】

View Code

    3.1》》》product.js中的page对象伊始化约等于在页面初阶化的时候+删除操作的时候

Create视图:

万博manbetx官网 19万博manbetx官网 20

万博manbetx官网 21万博manbetx官网 22

  1 var indexProductAdd;//定义一个index作为产品添加弹出窗的layer打开返回值 ,用于关闭的时候使用
  2 var indexProductUpdate; //定义一个index作为添加产品的弹出框的返回值
  3 var product;
  4 var page;
  5 var bindData;
  6 
  7 $(document).ready( function () {
  8     
  9     /**
 10      * 查询类型 【eq:产品:product   疾病:disease   基因:gene 】
 11      */
 12     var queryType;
 13     
 14     /**
 15      * 添加产品 页面
 16      */
 17    
 18     $(".btn-primary").click( function(){
 19         indexProductAdd = layer.open({
 20             type: 2,
 21             title: "添加产品",
 22             content: 'productadd.htmls',
 23             area: ['500px', '580px']
 24         });
 25     });
 26     
 27     /**
 28      * updateproduct.htmls  更新 产品信息
 29      */
 30     $(document).on("click",".table-bordered tbody tr a[class='up']",function(){
 31         product = $.parseJSON( $(this).parents('tr').find("input").eq(1).val());
 32         $(this).parents('tr').find("input[type='checkbox']").prop("checked",true);//在点击更新按钮之后,勾选本行对应的checkbox
 33         indexProductUpdate    = layer.open({
 34             type: 2,
 35             title: "修改产品",
 36             content: 'updateproduct.htmls',
 37             area: ['500px', '580px'],
 38             end : function(){
 39                 $(".table-bordered tbody :checked").attr("checked",false);
 40             }
 41         });    
 42     });
 43     
 44     
 45     
 46     
 47     
 48     /**
 49      * 封装数据 的方法 在本页面的js中,
 50      */
 51     bindData = function bindData(){
 52         var result = page.result;
 53         $(".table-bordered tbody").empty();
 54         if(result != "" && result != null && result != undefined) {
 55             var temp = "";
 56             $.each(result, function(index, item) {
 57                 //JSON.stringify(item)  对象转化字符串
 58                 temp += "<tr class='text-c'><td><input type='checkbox' value='"+item.productId+"'><input type='hidden' value='"+JSON.stringify(item)+"'/></td><td>"+item.productName+"</td><td><a href='disease.htmls?productId="+item.productId+"' class='check'>【查看疾病信息】</a><a href='JavaScript:void(0)' class='up'>【更新】</a></td></tr>";
 59             });
 60             $(".table-bordered tbody").append(temp);
 61         }
 62         page.setValue();
 63     }
 64     
 65     /**
 66      * 实例化一个分页组件的 对象 
 67      */
 68     page = new page("queryAllProduct2.htmls", bindData);
 69     page.pageSet();
 70     
 71     
 72     
 73     /**
 74      * 批量删除
 75      */
 76     $(".btn-danger").click(function(){
 77         var productId = [];
 78         $(".table-bordered tbody :checked").each(function(index,item){    //注意:checked前面需要空格
 79             productId.push(item.value);                                //数组中添加数据 需要push()
 80         });
 81         
 82         if(productId.length == 0){
 83             layer.msg('请选择至少一条记录!', {
 84                   icon: 3,
 85                   time: 2000 //2秒关闭(如果不配置,默认是3秒)
 86                 }, function(){
 87                   //do something
 88                 });
 89             return;
 90         }else{
 91             $.post("productDelete.htmls?productId="+productId, function(data){
 92                 if(data){
 93                    layer.msg('删除成功!', {
 94                       icon: 1,
 95                       time: 2000 //2秒关闭(如果不配置,默认是3秒)
 96                     }, function(){
 97                       //do something
 98                     });
 99                    
100 //                  page.cleanUp();
101                   if($(".table-bordered tbody :checked").length == $(".table-bordered tbody tr").length && page.pageNo>1){//若本页全部删除
102                       page.pageNo--;
103                   }
104                   page.pageSet(); 
105                 }else{
106                    layer.msg('删除失败!', {
107                       icon: 2,
108                       time: 2000 //2秒关闭(如果不配置,默认是3秒)
109                     }, function(){
110                       //do something
111                     });
112                 }
113                 $(".table-hover thead :checked").attr("checked",false);
114                 return;
115             });
116         }
117     });
118     
119     
120     
121    
122     
123     
124 } );
@model Secom.Smp.Data.Models.Customer
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
    <h4 class="modal-title" id="defaultModalLabel">添加用户</h4>
</div>
@using (Html.BeginForm("Create", "Default", new { area = "Admin" }, FormMethod.Post, new { @id = "defaultForm" }))
            {
    <div class="modal-body">
        <div class="row">
            <div class="col-md-5">
                    <div class="form-group">
                        @Html.LabelFor(x => x.HeadsUrl,new { @class = "control-label" }):
                        <input type="file" id="txt_file" name="txt_file" class="file-loading" accept="image/*" />
                        @Html.HiddenFor(x=>x.HeadsUrl,new { @id = "hidFileUrl" })
                    </div>
                </div>
            <div class="col-md-7">
                <div class="form-group">
                    @Html.LabelFor(x => x.Name, new { @class = "control-label" }):
                    @Html.TextBoxFor(x => x.Name, new { @id = "Name", @placeholder = "请输入用户名", @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.LabelFor(x => x.Address, new { @class = "control-label" }):
                    @Html.TextBoxFor(x => x.Address, new { @id = "Address", @placeholder = "请输入地址", @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.LabelFor(x => x.CreateTime):
                    <div class="input-group input-medium date date-picker">
                        @Html.TextBoxFor(x => x.CreateTime, new { @class = "form-control", @readonly = true })

                            <button class="btn default" type="button">
                                <i class="fa fa-calendar"></i>
                            </button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn sbold green">提交</button>
    </div>
}
@section scripts
{

}

View Code

View Code

    3.2》》》productAdd.js中加多一条数据变成后

Update视图:

万博manbetx官网 23万博manbetx官网 24

万博manbetx官网 25万博manbetx官网 26

 1 $(document).ready( function () {
 2     
 3     //为添加产品的表单加验证效果
 4     $('#form-product-add').bootstrapValidator();
 5     //$('#form-product-add').data('bootstrapValidator').validate();  //提交按钮是sumbit
 6     //$('#form-product-add').data('bootstrapValidator').isValid();      //提交按钮是button
 7     /**
 8      * 添加产品的按钮
 9      */
10         $("#pAdd").click(function(){
11             $('#form-product-add').bootstrapValidator('validate');//为表单的添加按钮  添加一个绑定表单的方法
12             var productName = $("input[name='productName']").val();
13             var productCre = $("textarea[name='productCre']").val();
14             var temp;
15             if(productName !="" ){
16                 $.ajax({url:"productAdd.htmls",
17                         type:"post",
18                         data:{
19                             "productName" : productName,
20                             "productCre" : productCre
21                         },
22                         success:function(data){
23                             
24                             if(data != null){
25                                  parent.page.pageSet(); 
26                             }    
27                             // var index = parent.layer.getFrameIndex(window.name); 可以用这个获取当前要关闭的layer ,也可以使用parent.indexProductAdd 获取在父层定义的那个layer。open()的弹窗
28                             parent.layer.close(parent.indexProductAdd); //获取到layer的弹出窗 关闭它  
29                 }});
30                 
31             }
32             return false;//页面的表达提交使用submit,然后又对这个提交按钮绑定一个点击事件,使用ajax来和后台进行交互,这个时候如果不return  false;会导致ajax提交一次,submit提交一次,这样的错误不容易找出来,会表现出来:ajax执行成功但是时而会进回调函数,时而不会进入回调函数,
33         });
34         
35         /**
36          * 全选按钮的 全选功能
37          */
38         $('table th input:checkbox').on('click' , function(){
39             var that = this;
40             $(this).closest('table').find('tr > td:first-child input:checkbox')
41             .each(function(){
42                 this.checked = that.checked;
43                 $(this).closest('tr').toggleClass('selected');
44             });
45         });    
46 } );
@model Secom.Smp.Data.Models.Customer
@{
    ViewBag.Title = "Update";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
    <h4 class="modal-title" id="defaultModalLabel">修改用户</h4>
</div>

    @using (Html.BeginForm("Update", "Default", new { area = "Admin" }, FormMethod.Post, new { @id = "updateForm" }))
    {
        @Html.HiddenFor(x=>x.Id)
        <div class="modal-body">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        @Html.LabelFor(x => x.HeadsUrl, new { @class = "control-label" }):
                        <input type="file" id="txt_file" name="txt_file" class="file-loading" accept="image/*" />
                        @Html.HiddenFor(x => x.HeadsUrl, new { @id = "hidFileUrl" })
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="form-group">
                        @Html.LabelFor(x => x.Name, new { @class = "control-label" }):
                        @Html.TextBoxFor(x => x.Name, new { @id = "Name", @placeholder = "请输入用户名", @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.Address, new { @class = "control-label" }):
                        @Html.TextBoxFor(x => x.Address, new { @id = "Address", @placeholder = "请输入地址", @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.CreateTime):
                        <div class="input-group input-medium date date-picker">
                            @Html.TextBoxFor(model => model.CreateTime,
           new { @type = "date", @class = "form-control", @readonly = true, @Value = Model.CreateTime.ToDateStr(),@id= "CreateTime" })

                                <button class="btn default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn sbold green">提交</button>
        </div>
    }
 @section scripts
{

}

View Code

View Code

 

_Form模板页视图

4》》》controller服务器中的管理方法

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
            @Html.AutoLoadPageJs()
</body>
</html>

@Controller
@RequestMapping(“geneInfo”)
public class GeneInfoController {

看下那么些自定义的强盛方法AutoLoadPageJs方法,其实正是模拟mvc的路由寻址格局去找钦定目录上面包车型大巴js

万博manbetx官网 27万博manbetx官网 28

        /// <summary>
        /// 根据mvc路由自动加载js文件(如果不存在则不加载)
        /// </summary>
        /// <param name="helper"></param>
        /// <returns></returns>
        public static MvcHtmlString AutoLoadPageJs(this HtmlHelper helper)
        {
            var areas = helper.ViewContext.RouteData.DataTokens["area"];
            var action = helper.ViewContext.RouteData.Values["action"];
            var controller = helper.ViewContext.RouteData.Values["controller"];
            string url = areas == null ? string.Format("views/{0}/{1}", controller, action) : string.Format("views/areas/{2}/{0}/{1}", controller, action, areas);

            return LoadJsString(helper,url);
        }
        /// <summary>
        /// 构造js加载的html字符串
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="url">js文件路径</param>
        /// <returns></returns>
        public static MvcHtmlString LoadJsString(HtmlHelper helper, string url)
        {
            var jsBuilder = new StringBuilder();
            string jsLocation = "/content/release-js/";
#if DEBUG
            jsLocation = "/content/js/";
#endif
            string jsFullUrl = Path.Combine(jsLocation, url + ".js");

            if (File.Exists(helper.ViewContext.HttpContext.Server.MapPath(jsFullUrl)))
            {
                jsBuilder.AppendFormat("<script src=\"{0}\"></script>", jsFullUrl);
            }
            return new MvcHtmlString(jsBuilder.ToString());
        }
 1 /**
 2      * 分页查询---查询所有产品
 3      * @param model
 4      * @return
 5      */
 6     @RequestMapping("/queryAllProduct2")
 7     @ResponseBody
 8     public PageInfo<Product> queryAllProduct2(ModelMap model, int pageNo, int pageSize){
 9         Criteria criteria = getCurrentSession().createCriteria(Product.class);
10         return productService.findQuery(criteria ,pageNo , pageSize );
11     }
12     

咱俩看下View对应的js文件

View Code

万博manbetx官网 29

5》》》Dao的兑现层 的分页完结

index.js

万博manbetx官网 30万博manbetx官网 31

$(function () {
    //-------------初始化datatable
    var obj = DataTablesObj;
    obj.showReadBtn = false;//显示详情按钮
    obj.showDeleteBtn = true;//显示删除按钮
    obj.showUpdateBtn = true;//显示更新按钮

    obj.updateUrl = "/Admin/Default/Update";
    obj.deleteUrl = "/Admin/Default/Delete";
    obj.batchDeleteUrl = "/Admin/Default/DeleteList";//批量删除路径

    obj.options.columns = [{ title: "", "visible": false, "data": "ID" },
           obj.checboxFied,
           { "data": "Name", title: "用户名称" },
           { "data": "Address", title: "用户地址" },
           { "data": "CreateTime", title: "创建时间" },
           obj.opratorFiled
    ];
    obj.options.searching = true;
    obj.options.sAjaxSource = "/Admin/Default/List"; //数据源地址
    obj.init(obj.options);
    //表单验证配置项
    FormValidatorObj.options.fields = {
        Name: {
            message: '用户名验证失败',
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                }
            }
        },
        Address: {
            validators: {
                notEmpty: {
                    message: '地址不能为空'
                }
            }
        }
    };
    //打印预览
    $("#printView").on("click", function () {
        $("#table_local").printThis({
            debug: false,// 调试模式下打印文本的渲染状态
            importCSS: true,
            importStyle: true,
            printContainer: true,
            //loadCSS: "/Content/bootstrap.css",
            pageTitle: "用户列表",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true,
            header: "<h1>用户列表</h1>",
            footer: null
        });
    })
})
 1 @Override
 2     public PageInfo<T> findQuery(Criteria criteria, int pageNo, int pageSize) {
 3         try {
 4             Assert.isTrue(pageNo >= 1, "pageNO should start from 1");
 5             //拆分order by子句  
 6             Field field = CriteriaImpl.class.getDeclaredField("orderEntries");  
 7             field.setAccessible(true);  
 8             List<?> orderEntrys = (List<?>) field.get(criteria);  
 9             field.set(criteria, new ArrayList());  
10             //统计总数
11             long totalCount = countAll(criteria);
12             criteria.setProjection(null);
13             //统计完了再把order by子句加上 这样保证了sql语句不会出错
14             field.set(criteria, orderEntrys);
15             List<T> list = findPage(criteria, pageNo, pageSize);
16             if (totalCount < 1) {
17                 return new PageInfo<T>();
18             }
19             PageInfo<T> page = new PageInfo<T>();
20             page.setPageNum(pageNo);
21             page.setTotal(totalCount);
22             page.setPages((int) (totalCount / pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1));
23             page.setPageSize(pageSize);
24             page.setList(list);
25             return page;
26         } catch (Exception e) {
27             // TODO: handle exception
28             throw new QueryException("查询出错!");
29         }
30         
31     }

create.js

View Code

$(function () {
    DatetimepickerObj.init('CreateTime');//(控件ID)
    //--------------表单验证
    FormValidatorObj.init("defaultForm","defaultModal","table_local"); //(表单id,[modal容器Id],[datable容器ID])
    //初始化编辑界面的数据
    //--------------添加界面中的上传控件
    FileInputObj.init(undefined,"txt_file", "hidFileUrl", "/Admin/Default/ExportFile",true);  //配置项,控件ID,存储文件路径的控件ID,上传路径,是否新增页面
});

 

update.js

里面重大的思考 就是 将分页组件
分离出来,仅作分页管理。而数据的卷入则是在分裂的页面实行分歧的包裹完毕。然后封装数据的形式作为参数字传送递给分页对象。

$(function () {
    DatetimepickerObj.init('CreateTime');//(控件ID)
    //--------------表单验证
    FormValidatorObj.init("updateForm","defaultModal","table_local"); //(表单id,[modal容器Id],[datable容器ID])
    //初始化编辑界面的数据
    //([配置项],控件ID,存储文件路径的控件ID,图片路径,上传路径,删除路径)
    FileInputObj.initUpdateImg(undefined,"txt_file", "hidFileUrl", "/Admin/Default/ExportFile", "/Admin/Default/DeleteFile");
})

 

看上去超级多的分界面功用,你看下,代码就这样点,何况分别职责很清楚。对datatables.js组件进行一次封装,base-Datatable.js代码如下:

万博manbetx官网 32万博manbetx官网 33

// ajax加载调试用
//# sourceURL=base-Datatable.js

//DataTables表格组件扩展对象--created by zouqj 2017-7-03
var DataTablesObj = (function () {
    //------------------------------静态全局属性-------------------------------------
    var infoStr = "总共 (_PAGES_) 页,显示 _START_ -- _END_ ,共 (_TOTAL_) 条";

    var lengthMenuStr = '每页显示:<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>'
         + '<option value="50">50</option>' + '<option value="100">100</option>' + '<option value="150">150</option>' + '<option value="200">200</option>' + '<option value="250">250</option>' + '<option value="500">500</option>';

    this.table_local = "table_local"; //table ID
    this.chkAllColl = "chkAllColl"; //全选按钮ID
    this.modalId = "defaultModal"; //模态窗体ID
    this.batchDeleteBtn = "btnDeleteList"; //批量删除按钮ID
    this.deleteBtn = "btnDelete"; //删除按钮ID
    this.autoIncrement={'title': '序号', 'data': null, 'bSortable': false,'render': function (data, type, full, meta) {return meta.row + 1 + meta.settings._iDisplayStart;}}; // 序号
    //操作列
    this.opratorFiled = {
        "data": "ID", orderable: false, title: "操作", "render": function (data, type, row, meta) { //自定义列
            var re = "<div class='operatorDiv'></i>";
            if (DataTablesObj.showReadBtn) {
                var temp = DataTablesObj.detailModal == undefined ? data : data + ",'" + DataTablesObj.detailModal+"'";
                re += "<a class='' type='button' data-toggle='dropdown' aria-expanded='false' onclick=\"DataTablesObj.doReadModal(" + temp + ")\">详情</a>";
            }
            if (DataTablesObj.showUpdateBtn) {
                var temp = DataTablesObj.updateModal == undefined ? data : data + ",'" + DataTablesObj.updateModal + "'";
                re += "<a class='' type='button' onclick='DataTablesObj.doUpdateModal(" + temp + ")'>编辑</a>";
            }
            if (DataTablesObj.showDeleteBtn) {
                re += "<a class='' title='确定要删除吗?' data-toggle='confirmation' data-placement='left' data-btn-ok-label='继续' data-btn-ok-icon='icon-like' data-btn-ok-class='btn-success toastrBtn' data-btn-cancel-label='取消' data-btn-cancel-icon='icon-close' data-btn-cancel-class='btn-danger' type='button' onclick='DataTablesObj.doDelete(this," + data + ")'>删除</a>";
            }
            re += "</div>";
            return re;
        }
    };
    //复选框列
    this.checboxFied = {
        "data": "ID", title: "<input type='checkbox' id='chkAllColl' onclick='DataTablesObj.selectAll()'/>", orderable: false,
        "render": function (data, type, row, meta) {
            return "<input id='cbx" + data + "' name='chkItem' type='checkbox' onclick='DataTablesObj.controlSelectAll(" + data + ")' class='cbx' value='" + data + "'/>  ";
        }
    };
    //------------------------------变化部分的属性-------------------------------------
    this.batchDeleteUrl = "";//批量删除路径
    this.deleteUrl = ""; //单条记录删除路径
    this.showReadBtn = true;//默认不显示详情按钮
    this.showDeleteBtn = false;//默认不显示删除按钮
    this.showUpdateBtn = false;//默认显示更新按钮
    this.readUrl = ""; //单条记录读取路径
    this.updateUrl = "";//更新界面URL地址
    this.detailModal = undefined; //详情页面的modalId
    this.updateModal = undefined;//修改页面的modalId

    //------------------------------事件、方法-------------------------------------
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { // 按 Esc 
            //要做的事情
        }
        if (e && e.keyCode == 13) { // enter 键
            //要做的事情
            DataTablesObj.reloadList(DataTablesObj.table_local);
        }
    };
    ////对行单击添加监听事件
    //$('#table_local tbody').on('click', 'tr', function () {
    //    var tr = $(this).closest('tr');
    //    var checkbox = tr.find('td:first-child input:checkbox')[0];
    //    checkbox.checked = !checkbox.checked;
    //});
    //获Ggridview中所有的复选框 sName: Gridview 的ID  
    this.getCheckbox = function (sName) {
        var aryCheckbox = new Array();
        var tb = document.getElementById(sName);
        if (tb == null)
            return;
        var objs = tb.getElementsByClassName("cbx");
        for (var i = 0; i < objs.length; i++) {
            if (objs[i].type == 'checkbox')
                aryCheckbox.push(objs[i]);
        }
        return aryCheckbox;
    };

    //监听每一行的复选框,控制全选、反选按钮  
    this.controlSelectAll = function (i) {
        var tblName, cbkAll; //Gridview ID ,全选框ID  
        var tblName = DataTablesObj.table_local;
        var cbkAll = DataTablesObj.chkAllColl;
        var id = "#cbx" + i;
        //点击复选框选中行
        //if ($(id)[0].checked == true) {
        //    $(id).parent().parent().addClass('selected');
        //    $(id).parent().parent().siblings().removeClass('selected');
        //} else {
        //    $(id).parent().parent().siblings().removeClass('selected');
        //    $(id).parent().parent().removeClass('selected');
        //}
        var chks = DataTablesObj.getCheckbox(tblName);
        var count = 0;
        for (var i = 0; i < chks.length; i++) {
            if (chks[i].checked == true) {
                count++;
            }
        }
        if (count < chks.length) {
            document.getElementById(cbkAll).checked = false;
        }
        else {
            document.getElementById(cbkAll).checked = true;
        }
    };
    //全选反选
    this.selectAll = function () {
        var isChecked = $("#" + DataTablesObj.chkAllColl)[0].checked;
        $("input[name='chkItem']").prop("checked", isChecked);
    };
    //查询刷新([datatable ID])
    this.reloadList = function (id) {
        var tableId = id == undefined ? DataTablesObj.table_local : id;
        var tables = $('#' + tableId).dataTable().api();//获取DataTables的Api,详见 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    };
    //****************************************************************************************************************

    //新增记录(异步请求界面url,[modal ID],[回调函数])
    this.doCreateModal = function (url, modalId, func) {
        var modalId = modalId == undefined ? DataTablesObj.modalId : modalId;
        $('#' + modalId).modal({ show: true, backdrop: 'static', remote: url });
        if (func != undefined) {
            func();
        }
    };
    //详细记录(主键ID,[modal ID],[异步请求界面url])
    this.doReadModal = function (id, modalId, readUrl) {
        var modalId = modalId == undefined ? DataTablesObj.modalId : modalId;
        var url = readUrl == undefined ? DataTablesObj.readUrl : readUrl;
        $('#' + DataTablesObj.modalId).modal({ show: true, backdrop: 'static', remote:url  + "?id=" + id });
    }
    //编辑记录(主键ID,[异步请求界面url],[modal ID])
    this.doUpdateModal = function (id, modalId,updateUrl) {
        var modalId = modalId == undefined ? DataTablesObj.modalId : modalId;
        var url = updateUrl == undefined ? DataTablesObj.updateUrl : updateUrl;
        $('#' + modalId).modal({ show: true, backdrop: 'static', remote: url + "?id=" + id });
    };
    //删除选中记录(批量删除url地址)
    this.doDeleteList = function (url) {
        var table = $('#' + DataTablesObj.table_local).dataTable();
        var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i行tr对象
        var row;
        var strdid = '';
        var selectCounts = 0;
        for (var i = 0; i < nTrs.length; i++) {
            if ($(nTrs[i])[0].cells[0].children[0].checked) {
                row = table.fnGetData(nTrs[i]);//fnGetData获取一行的数据        
                selectCounts++;
                strdid += "" + row.ID + ",";
            }
        }
        strdid = strdid.substring(0, strdid.length - 1);
        var ids = strdid.split(",");
        if (selectCounts < 1) {
            toastr.warning("请先选择数据行!");
            return false;
        }
        $.ajax({
            type: 'POST',
            url: url,
            data: { 'ids': ids },
            dataType: 'json',
            success: function (result) {
                toastr.success(result.message);
                DataTablesObj.reloadList(DataTablesObj.table_local);
            }
        });
    }
    //删除单条记录(控件id,主键id)
    this.doDelete = function (btn, id) {
        $(btn).on('confirmed.bs.confirmation', function () {
            $.post(DataTablesObj.deleteUrl, { Id: id }, function (result) {
                toastr.success(result.message);
                DataTablesObj.reloadList(DataTablesObj.table_local);
            });
        });
        $(btn).confirmation('show');
    };
    this.options = {
        bProcessing: true,
        //"scrollY": table_h1,// 340,// 
        "scrollX": false,
        //"scrollCollapse": "true",
        //dom:"",//'ftr<"bottom"lip>',//<"clear">
        "bServerSide": false, //指定从服务器端获取数据
        sServerMethod: "POST",
        sAjaxSource: "",
        autoWidth: false,
        fnServerParams: null,
        columns: null,
        paging: true,//分页
        ordering: true,//是否启用排序
        searching: false,//搜索
        language: {
            "sProcessing": "处理中...",
            lengthMenu: lengthMenuStr,//左上角的分页大小显示。
            search: '搜索:',//右上角的搜索文本,可以写html标签

            //paginate: {//分页的样式内容。
            //    previous: "上一页",
            //    next: "下一页",
            //    first: "",
            //    last: ""
            //},
            "paginate": {
                "previous": "Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            },

            zeroRecords: "",//table tbody内容为空时,tbody的内容。--暂无记录
            //下面三者构成了总体的左下角的内容。
            info: infoStr,//左下角的信息显示,大写的词为关键字。初始_MAX_ 条
            infoEmpty: "0条记录",//筛选为空时左下角的显示。
            infoFiltered: ""//筛选之后的左下角筛选提示,
        },
        pagingType: "bootstrap_full_number"//分页样式的类型 "full_numbers"//
    };
    //监听批量删除按钮事件(控件ID,url删除地址)
    this.listenerDeleteEvent = function (ctrlId, url) {
        $('#' + ctrlId).on('confirmed.bs.confirmation', function () {
            DataTablesObj.doDeleteList(url);
        }).on("click", function () {
            $('#' + ctrlId).confirmation('show');
        });
    }
    //控件初始化(配置项,[table容器ID],[删除对象])
    this.init = function (options, tableId,obj) {
        var tableId = tableId == undefined ? DataTablesObj.table_local : tableId;
        var opts = options == undefined ? DataTablesObj.options : options;
        $('#' + tableId).dataTable(opts);
        if (obj == undefined) {
            DataTablesObj.listenerDeleteEvent(DataTablesObj.batchDeleteBtn, DataTablesObj.batchDeleteUrl);
        } else {
            obj.listenerDeleteEvent(obj.batchDeleteBtn, obj.batchDeleteUrl);
        }      
        delete options.aoColumns;//同一个页面多处使用时,要先删除此对象,具体原因不明
    };
    //批量初始化(options配置数组,tables id数组)-不添加监听事件
    this.initList = function (opts, ids) {
        if (opts!=undefined &&opts!=null &&opts.length>0&& ids != undefined&& ids!=null && ids.length > 0) {
            var length = ids.length;
            for (var i = 0; i < length; i++) {
                $('#' + ids[i]).dataTable(opts[i]);
            }
        }
    }
    return this;
}).call({});

View Code

咱俩开展一回封装的UI组件对象,他们的options属性,是目眩神摇属性,也正是近乎与引用类型,要采取深拷贝然后再去修改,不然改良的是引用并不是副本。小编那边未有去行使clone,而是径直在options对象上进展赋值了,那是因为作者赋值的那么些属性每种援用页面都会去再赋值二遍,而js是运维在客商端的,也正是说各个客商的微型机下面都会有意气风发份完整的js文件别本,那和平运动转在劳动器端的C#语言是不生机勃勃致的。其实接受 
var options =
clone(DataTablesObj.options卡塔尔(英语:State of Qatar);再去给options赋值是规范做法,不过会失去一些性格。笔者的js水平太菜,所以封装得不是刻意好,不过最少页面干净、方便维护。

js方法方面包车型大巴注释,小编也是固守自定义的风骨举行表明,参数用(卡塔尔国括起来,可选参数就用[],那么些东西都得以算作约定也许专门的学业,指标正是为着让具备的开拓职员写的代码像壹个人写的。本来笔者想把措施的参数都封装成三个指标的,只是早先以为参数个数少,就未有那样去封装了,参数用对象的功利便是能够冬天,并且更易扩展,全体这几个进展三遍封装的UI组件,文件命名小编都加了前缀base-,其实里面包车型客车对象命名笔者是加的后缀Obj,你也得以凭借本身的快乐设定,比如说集团名称简写作为前缀,不过一定鲜明了,将在集体成员坚决守护约定。

日期组件雷同进行封装base-Datetimepicker.js,这里的打字与印刷自个儿这段日子就从未有过去举办李包裹装了。在js中国和东瀛常接受原型链的主意来得以达成持续,笔者那边未有运用,原因2点,一是本身对那块掌握得倒霉,二是信用合作社都以往端开垦人士,就根据这种最简便易行的措施展开打包。

万博manbetx官网 34万博manbetx官网 35

//ajax加载调试用
//# sourceURL=base-Datetimepicker.js

//Datetimepicker日期组件扩展对象--created by zouqj 2017-7-13
var DatetimepickerObj = (function () {
    this.options = {
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    };
    this.init= function (ctrlId) {
        $("#" + ctrlId).datetimepicker(DatetimepickerObj.options);
    }
    //(开始日期控件,结束日期控件)
    this.initStartEnd = function (startCtrl, endCtrl) {
        var startCtrl = $("#" + startCtrl);
        var endCtrl = $("#" + endCtrl);
        startCtrl.datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 'month',
            language: 'zh-CN',
            autoclose: true,
            startDate: new Date()
        }).on("click", function () {
            startCtrl.datetimepicker("setEndDate", endCtrl.val())
        });
        endCtrl.datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 'month',
            language: 'zh-CN',
            autoclose: true,
            startDate: new Date()
        }).on("click", function () {
            endCtrl.datetimepicker("setStartDate", startCtrl.val())
        });
    }
    return this;
}).call({});

View Code

那便是说实际上大家分界面上着实自身要写的就3个View,3个js,二个调控器提供对应的点子调用,此外的无论是是C#抑或js都去进行李包裹装,css样式通通依据规范写成身体发肤文件。项目中得以有一个皮肤css,一个布局css,八个自定义css。

进而说.net做东西正是如此轻易,看似复杂的效应分界面,一下子就化解了,只要把东西都打包好了,做一个这么的意义最多大半天就解决,留神看下js总共就写几十行左右,还算上了复制粘贴修改下的,何地供给去平时加班加点?加班应该是php技师和java程序员的专利,做不加班的.net技术员~

相关文章