我们要搭建的框架是企业级开发框架，适用用企业管理信息系统的开发，如：OA、HR等
1、框架名称：sampleFrame。
2、搭建原则：最少知识原则。
3、先定义一个简单的编码规范：除类名和接口名外，其余首字母小写。
4、准备开发环境：vs2010及以上（mvc4）、sqlserver、jquery2.0和easyui1.4.5
首先来看一下列表页面的效果图：
我们期望简洁带前台代码，如下：
<table url="getList" toolbar="#toolbar"> <thead> <tr> <th field="customerId" sortable="true" data-options="sortable:true"> customerId </th> <th field="companyName" data-options="sortable:true"> companyName </th> <th field="phone"> phone </th> <th field="address"> address </th> </tr> </thead> </table> <div> <div> <a iconcls="icon-add">添加</a> <a iconcls="icon-edit">修改</a> <a iconcls="icon-remove">删除</a> </div> <div> <input buttonicon="icon-search" data-options="onClickButton:function(){loadList(loadListSettings);}" /> <a iconcls="icon-find"> 详细查询</a> </div> </div> <script type="text/javascript"> var loadListSettings = { searchFields: "customerId,companyName", prompt: "请输入客户Id或公司名称" }; </script> <script type="text/javascript"> pageInit(); </script>
为了这样简洁的前台，我们需要准备：
1、通用的布局模板_Layout.cshtml。base.css、base.js、defaultSettings.js、tool.js和private.js见后面
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <link href='https://www.jb51.net/webResource/easyui/themes/default/easyui.css' type='text/css' /> <link href='https://www.jb51.net/webResource/easyui/themes/icon.css' type='text/css' /> <link href='https://www.jb51.net/webResource/base.css' type='text/css' /> <script src="https://www.jb51.net/webResource/jquery/jquery.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/jquery/json2.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/tool.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/base.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/defaultSettings.js" type="text/javascript"></script> <script src="https://www.jb51.net/webResource/private.js" type="text/javascript"></script> @RenderSection("scripts", required: false) </head> <body> @RenderBody() </body> </html>
2、平台样式表base.css
.icon-find { background: url('icons/find.png') no-repeat center center; } .datagrid-toolbar div:nth-child(1) { float: left; width: 60%; } .datagrid-toolbar div:nth-child(2) { margin-left: 60%; margin-right: 10px; width: auto; text-align: right; }
3、基本方法脚本base.js
//取消自动渲染 $.parser.auto = false; function pageInit() { //改变控件默认值 $.fn.linkbutton.defaults.plain = true; $.fn.datagrid.defaults.fit = true; $.fn.datagrid.defaults.fitColumns = true; $.fn.datagrid.defaults.pagination = true; //显示ajax异常信息 $(document).ajaxError(function (event, xhr, options, exc) { $.messager.alert({ title: '异步请求出错', msg: xhr.responseText, icon: "error" }); }); //地址栏传参允许中文 jQuery(document).ajaxSend(function (event, request, options) { options.url = encodeURI(options.url); }); $.parser.parse(); } function loadList(settings) { var settings = $.extend(true, {}, loadListDefaultSettings, settings); if ($("#" + settings.gridId).length == 0) $.messager.alert({ title: "系统异常", msg: "DataGrid：" + settings.gridId + "不存在！", icon: "error" }); var quickQueryData = []; if ($("#" + settings.queryBoxId).length > 0) { var val = $("#" + settings.queryBoxId).textbox("getValue"); if (settings.searchFields && val) { var keys = settings.searchFields.split(','); for (i = 0, len = keys.length; i < len; i++) { quickQueryData.push({ field: keys[i], method: 'inLike', value: val }); } } } var queryData = []; //详细查询预留 //加载数据 $("#" + settings.gridId).datagrid("load", { quickQueryData: JSON.stringify(quickQueryData), queryData: JSON.stringify(queryData) }); }
4、基本脚本默认值defaultSettings.js