一步一步搭框架(asp.netmvc+easyui+sqlserver)-02
我们期望简洁带前台代码，如下：
<table id="dataGrid" class="easyui-datagrid" url="getList" toolbar="#toolbar"> <thead> <tr> <th field="customerId" sortable="true" data-options="sortable:true" width="50"> customerId </th> <th field="companyName" data-options="sortable:true" width="50"> companyName </th> <th field="phone" width="50"> phone </th> <th field="address" width="50"> address </th> </tr> </thead> </table> <div id="toolbar"> <div> <a class="easyui-linkbutton" iconcls="icon-add" onclick="add();">添加</a> <a class="easyui-linkbutton" iconcls="icon-edit" onclick="edit();">修改</a> <a class="easyui-linkbutton" iconcls="icon-remove" onclick="del();">删除</a> </div> <div> <input id="queryBox" class="easyui-textbox" buttonicon="icon-search" style="width: 200px;" data-options="onClickButton:function(){loadList(loadListSettings);}" /> <a class="easyui-linkbutton" iconcls="icon-find" onclick="showQueryWindow();"> 详细查询</a> </div> </div> <script type="text/javascript"> var loadListSettings = { searchFields: "customerId,companyName", prompt: "请输入客户Id或公司名称" }; </script> <script type="text/javascript"> pageInit(); </script>
为了这样简洁的前台，我们需要准备：
1、通用的布局模板_Layout.cshtml。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <link href='/webResource/easyui/themes/default/easyui.css' rel='stylesheet' type='text/css' /> <link href='/webResource/easyui/themes/icon.css' rel='stylesheet' type='text/css' /> <link href='/webResource/base.css' rel='stylesheet' type='text/css' /> <script src="/webResource/jquery/jquery.min.js" type="text/javascript"></script> <script src="/webResource/jquery/json2.js" type="text/javascript"></script> <script src="/webResource/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="/webResource/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="/webResource/tool.js" type="text/javascript"></script> <script src="/webResource/base.js" type="text/javascript"></script> <script src="/webResource/defaultSettings.js" type="text/javascript"></script> <script src="/webResource/private.js" type="text/javascript"></script> @RenderSection("scripts", required: false) </head> <body style="width: 100%; height: 100%; margin: 0px;"> @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
//查询参数设置 var loadListDefaultSettings = { url: "getList", gridId: "dataGrid", queryWindowId: "queryWindow", queryBoxId: "queryBox", searchFields: "Name", addQueryString: true, prompt: "请输入" };
5、可能需要使用的工具方法tool.js
//判断是否包含地址栏参数 function hasQueryString(key, url) { if (typeof (url) == "undefined") url = window.location.search; var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i"); var a = re.exec(url); if (a == null) return false; return true; } //获取地址栏参数,如果参数不存在则返回空字符串 function getQueryString(key, url) { if (typeof (url) == "undefined") url = window.location.search; var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i"); var a = re.exec(url); if (a == null) return ""; return a[1]; } //将当前地址栏参数加入到url function addUrlSearch(url) { var newParams = []; var paramKeys = window.location.search.replace('?', '').split('&'); for (var i = 0; i < paramKeys.length; i++) { var key = paramKeys[i].split('=')[0]; if (key == "" || key == "_t" || key == "_winid" || key == "isTab") continue; if (!hasQueryString(key, url)) newParams.push(paramKeys[i]); } if (url.indexOf('?') >= 0) return url + "&" + newParams.join('&'); else return url + "?" + newParams.join('&'); } //url增加参数 function addSearch(url, key, value) { if (!hasQueryString(key, url)) { if (url.indexOf('?') >= 0) return url + "&" + key + "=" + value; else return url + "?" + key + "=" + value; } else return url; } //获取数组中对象的某个值，逗号分隔 function getValues(rows, attr) { var fieldValues = []; for (var i = 0; i < rows.length; i++) { if (rows[i] != null) fieldValues.push(rows[i][attr]); } return fieldValues.join(','); }
6、可能需要使用的私有方法private.js，此文件包含的方法专供base.js使用，开发web时禁止使用
//替换掉Url中的{}参数 function replaceUrl(settings, pty) { if (!pty) pty = "url"; if (!settings[pty]) return; var str = settings[pty]; var guid = ""; var result = str.replace(/\{[0-9a-zA-Z_]*\}/g, function (e) { var key = e.substring(1, e.length - 1); if (key == "GUID") { if (!guid) { $.ajax({ url: "getGuid", type: "post", async: false, success: function (text, textStatus) { guid = text; } }); } return guid; } if (hasQueryString(key)) //从地址栏返回 return getQueryString(key); if (settings.currentRow && settings.currentRow[key])//从当前行返回 return settings.currentRow[key]; if (settings.paramFrom) { //从指定控件返回 var ctrl = mini.get(settings.paramFrom); if (ctrl == undefined) { $.messager.alert({ title: 'UI出错', msg: "Id为" + settings.paramFrom + "的控件不存在！", icon: "error" }); return; } else if (ctrl.showCheckBox) { return getValues(ctrl.getCheckedNodes(), key); } else if (ctrl.getSelecteds) return getValues(ctrl.getSelecteds(), key); else if (ctrl.getValue) return ctrl.getValue(); } return e; }); settings[pty] = result; return result; } //转化为全路径 function changeToFullUrl(settings) { var url = settings.url; if (url.indexOf('/') == 0 || url.indexOf("http://") == 0 || url.indexOf('?') == 0 || url == "") return url; currentUrlPathName = window.location.pathname; var currentPathNameParts = currentUrlPathName.split('/'); var pathNameParts = url.split('?')[0].split('/'); if (currentPathNameParts[currentPathNameParts.length - 1] == "") currentPathNameParts.pop(); //去掉一个反斜线 if (pathNameParts[pathNameParts.length - 1] == "") pathNameParts.pop(); //去掉一个反斜线 var index = currentPathNameParts.length - 1; for (var i = 0; i < pathNameParts.length; i++) { if (pathNameParts[i] == "..") { index = index - 1; if (index <= 0) { $.messager.alert({ title: "系统异常", msg: "Url错误：" + url + "！", icon: "error" }); return; } continue; } if (index < currentPathNameParts.length) currentPathNameParts[index] = pathNameParts[i]; else currentPathNameParts.push(pathNameParts[i]); index = index + 1; } var length = currentPathNameParts.length; for (var i = index; i < length; i++) { currentPathNameParts.pop(); } var result = currentPathNameParts.join('/'); if (url.indexOf('?') > 0) result += url.substring(url.indexOf('?')); settings.url = result; }
以上是目前的全部前台代码。
