.Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    大家在项目支出中,做得最多的也许就是CRUD,那么我们怎么在ASP.NET
MVC中来做CRUD呢?假使说只是仅仅完结效益,那本来是再简单但是了,不过大家要考虑什么来做得相比较好有限支持相比好增添,如何做得相比较完美。做开发要有巧手精神,不要只求完毕开发职分,那样的话,永远停留在只是不难的写作业逻辑代码水平,大家要做有追求的程序员。本来如此不难的事物,我当成懒得写,但是看看就是是一些办事了好些年的人,做东西也是只管已毕效益,啥都不管,还有些界面css样式要么就硬编要么就不用规则的在页面中举行接力,遭遇要设置间距甚至间接写多少个 ,我觉着仍旧要写出来给这厮看下。硬编的前提是唯有你这个界面使用。

   
大家先来看下大家要贯彻的效能,功效须要:新增、修改、删除、查询、分页、排序、导出excel、打印、上传图片、扶助表单验证,优雅的落实有多不难?分外简单。

C语言 1C语言 2

C语言 3C语言 4C语言 5C语言 6C语言 7

内需用到哪边UI组件?我都是依据bootstrap那种扁平化响应式风格的,jquery.dataTables.js、toastr.js、bootstrapValidator.js、bootstrap-confirmation.js、printThis.js

是因为是出现说法用,所以控制器中平素调用了EF上下文操作,重点是看前端部分的渲染和互动,不要再一次你的代码!不要再度你的代码!不要再度你的代码!首要的工作说一次!为何没有用mvc自带的模型验证?答:太傻逼!1、样式改起来操蛋;2、每一回要点击提交表单才促发验证。

此处表数据量少,是直接一回性加载,然后内存中分页的,即便表数据量多,那么快要用服务器分页,同样很简短。修改下安顿项,如下所示:然后控制器中对应的不二法门有些修改下即可。

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

 BaseController控制器基类

C语言 8C语言 9

    [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 };
        }
    }

View Code

控制器DefaultController

C语言 10C语言 11

    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
    }

View Code

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

Index视图:

C语言 12C语言 13

@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>
}

View Code

Create视图:

C语言 14C语言 15

@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

Update视图:

C语言 16C语言 17

@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

_Form模板页视图

<!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>

C语言,看下这么些自定义的伸张方法AutoLoadPageJs方法,其实就是模拟mvc的路由寻址方式去找指定目录上面的js

        /// <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());
        }

俺们看下View对应的js文件

C语言 18

index.js

$(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
        });
    })
})

create.js

$(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代码如下:

C语言 19C语言 20

// 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);再去给options赋值是标准做法,可是会失去一些品质。我的js水平太菜,所以封装得不是越发好,不过至少页面干净、方便维护。

js方法方面的诠释,我也是依据自定义的风骨举办诠释,参数用()括起来,可选参数就用[],这么些事物都可以算作约定或者专业,目标就是为了让具有的开发人士写的代码像一个人写的。本来我想把办法的参数都封装成一个目的的,只是之前以为参数个数少,就从未有过那么去封装了,参数用对象的裨益就是可以无序,而且更易扩大,所有那一个进展二次封装的UI组件,文件命名我都加了前缀base-,其实其中的靶子命名我是加的后缀Obj,你也可以按照自己的喜爱设定,比如说集团名称简写作为前缀,不过毫无疑问确定了,就要社团成员服从约定。

日期组件同样举行封装base-Datetimepicker.js,那里的打印本人暂时就不曾去举行包装了。在js中国和日本常选取原型链的办法来贯彻持续,我那边没有运用,原因2点,一是本身对那块领会得不好,二是商店都是后端开发人士,就根据那种最简便易行的法门举行打包。

C语言 21C语言 22

//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程序员~