前端组件
<h4>封装常用js组件</h4>
<table>
<thead>
<tr>
<th>名称</th>
<th>代码</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格</td>
<td>$.table</td>
<td>表格封装处理</td>
</tr>
<tr>
<td>表单</td>
<td>$.form</td>
<td>表单封装处理</td>
</tr>
<tr>
<td>弹出层</td>
<td>$.modal</td>
<td>弹出层封装处理</td>
</tr>
<tr>
<td>操作方法</td>
<td>$.operate</td>
<td>封装常用操作方法</td>
</tr>
<tr>
<td>交互框</td>
<td>$.alert</td>
<td>弹出交互框</td>
</tr>
<tr>
<td>通用方法</td>
<td>$.common</td>
<td>通用方法封装处理</td>
</tr>
</tbody>
</table>
<h5>$.table</h5>
<ul>
<li>table封装的是EasyUI中的table。完全可以兼容EasyUI中的table，只是扩充了几个必要属性。具体见options中说明</li>
<li>如果自定义表格的弹出框上的按钮modalButtons选项，那么需要用户完成与服务端通信、表格刷新、关闭弹出框等操作</li>
</ul>
<pre><code class="language-javascript">/**
options:{
url: 表格请求地址（必填项）
tableId: 页面中表格的id，默认查找id=ey-grid的表格
idField: 表格列中使用哪个列作为主键列，默认是id
formId: 表格弹出框form的id，默认是ff
showSearch: 是否显示查询按钮，默认显示
showRefresh: 是否显示刷新按钮，默认显示
showColumn: 是否显示列操作按钮，默认显示
modalName: 修改或者添加弹出框的名字（必填项）
modalType: 弹出框的类型，例如 user，供下方构建统一的 url地址准备
modalTarget: 表格弹出框的目标对象，默认是top，如果设置为window，那么需要在当前页面中添加一个<div id="dlg"></div>，否则无法弹出
lazyLoad: 页面不会立马进行请求，必须要手动进行请求
addUrl: 添加弹出框页面，默认地址 "/" + modalType + "/add"
editUrl: 修改弹出框页面，格式为：/xx/xx/{id}，其中{id}是替换变量，默认地址 "/" + modalType + "/edit/{id}"
saveUrl: 表格添加弹出框点击确定按钮，提交的地址
updateUrl: 表格修改弹出框点击确定按钮，提交的地址
deleteUrl: 删除时请求地址，默认地址 "/" + modalType + "/delete"，请求中会自动添加参数ids，值为选中表格的ids以英文逗号隔开形式
importUrl: 导入弹出框页面，默认地址 "/attachment?attachment_type=" + modalType
uploadUrl: 导入页面中点击提交上传的URL，默认地址 "/attachment/upload"
downloadUrl: 下载导入模板地址，默认地址 "/attachment/download?attachment_type=" + modalType
exportUrl: 数据导出地址，默认地址 "/"+options.modalType+"/export"。 具体的导入和导出 请参考 后面章节。
onModalSubmit: 表格弹出框的提交按钮事件，默认为表单自带的 $.table.submit()，与下方modalButtons互斥
modalButtons: 表格弹出框底部按钮，默认为空，窗口默认提供两个按钮 “确认” 和 “取消”，点击 “确认” 时会调用 onModalSubmit 方法，与上方onModalSubmit互斥
modalButtonsAppend: 表格弹出框底部按钮显示方式，可选项 "cover","after","before" ，默认是cover 表示使用modalButtons中的按钮替换掉弹出框提供的两个按钮；after 表示 保留两个按钮，最尾部追加modalButtons中的按钮；before 表示保留两个按钮，在前面追加modalButtons中的按钮。
.... 其他的属性都是EasyUI中table的属性
}
*/
$.table.init(options);
// 重新设置自定义的options属性，easyUI table中的属性设置方法没有改变。
// 这个方法基本上被用做修改 addUrl,editUrl,saveURL,updateUrl 这四个属性。
$.table.setOptions(options);
/**表格的添加弹出框*/
$.table.add();
/**表格的修改弹出框，修改选中记录，向服务端发送GET请求，URL：/xx/xx/{id} 其中{id}替换为表格根据idField列选中取的值 */
$.table.edit();
/**删除表格选中记录，向服务端发送POST请求，其中参数key为"ids"，参数value为表格根据idField列选中取的值(数组).join(",")。
例如：{ids:1,2,3}*/
$.table.delete();
// 导出
$.table.export();
// 导入
$.table.import();
/**提交添加或者修改弹出框的表单*/
$.table.submit(url);</code></pre>
<h5>$.form 表单封装处理</h5>
<ul>
<li>form封装的是easyui中的form。</li>
<li>提交完成后，返回结果已经转换成json格式。</li>
<li>表单提交前会进行表单验证，成功后方可提交，表单验证使用的EasyUI的表单验证组件</li>
<li>根据后台Controller的要求，所有请求返回都必须加入state属性，因此在判断返回结果是否成功的时候参考下面示例。</li>
</ul>
<pre><code class="language-javascript">/**
options:{
form: jquery form对象，例如$("#myform")，与下面form_id互斥，优先级最高
formId: 不需要传入#，默认值是ff，表示获取id=ff的表单进行提交。此选项与上面form互斥，优先级最低
onBeforeSubmit: 提交之前进行验证，如果有该方法，则必须返回true或者false
queryParams: 提交时候的额外参数
url: 表单提交地址，默认值为form的action属性
success: 表单提交成功后的回调函数，返回参数为JSON格式
}
示例：
$.form.submit({
url:"http://x.x.x.x/tj",
success:function(result){
console.info(result.state == web_status.SUCCESS);
console.info(result.state == web_status.FAIL);
}
})
*/
$.form.submit(options);
/**重置表单，参数form可以是Jquery form对象或者Form ID，如果不填默认会查找id=sff的表单进行重置，例如：
$.form.reset($("#myform")); 或者 $.form.reset("myform");
*/
$.form.reset(form)
/**表单是否处于编辑状态，判断的是给定的input是否有值，如果有值则表单处于编辑状态。参数input可以是jquery input框对象或者Input 框ID，如果不填默认会判断input id=tid的值是否为空，例如：
$.form.isEditing($("#myinput")); 或者 $.form.isEditing("myinput");
*/
$.form.isEditing(input)</code></pre>
<h5>$.modal</h5>
<ul>
<li>modal封装的是easyui中的dialog。</li>
<li>前端采用的是iframe方式，在iframe内部的dialog框会阻挡在iframe内部，所以在源码中已经将modal框提升到top顶级，可以通过配置来修改。</li>
<li><strong>采用的是非iframe方式，如果弹出框显示在top顶级窗口后，在本系统中可以使用 $$("") 这种方式来获取当前iframe中的元素 </strong></li>
<li>窗口打开后会在 $.modal["alive"] 中保存当前打开的dialog对象，在关闭时直接关闭当前打开的对象。</li>
</ul>
<pre><code class="language-javascript">/**
options:{
url: 内容引入的url，必填项
title: 标题，默认为空
width: 宽度，默认为800px
height: 高度，模式是打开窗口目标对象的高度-100px
target: 打开窗口的目标对象，默认是当前window对象
onOpen: 窗口打开后调用，easyui中保留
onLoad: 内容加载完成后调用，easyui中保留
onClose: 关闭弹出框后调用，easyui中保留
onOkBtnClick: 点击弹出窗口确认按钮后调用，与下方buttons互斥
buttons: 弹出框底部按钮，默认为空，窗口默认提供两个按钮 “确认” 和 “取消”，点击 “确认” 时会调用 onSubmit 方法。与上方 onOkBtnClick 互斥
buttonsAppend: 弹出框底部按钮显示方式，可选项 "cover","after","before" ，默认是cover 表示使用modalButtons中的按钮替换掉弹出框提供的两个按钮；after 表示 保留两个按钮，最尾部追加modalButtons中的按钮；before 表示保留两个按钮，在前面追加modalButtons中的按钮。
}*/
$.modal.open(options);
/**关闭弹出框，关闭当前打开的窗口对象*/
$.modal.close()</code></pre>
<h5>$.operate 封装常用操作方法</h5>
<ul>
<li>异步回调的函数，返回的result已经是json格式</li>
<li>根据后台Controller的要求，所有请求返回都必须加入state属性，因此在判断返回结果是否成功的时候参考下面示例</li>
</ul>
<pre><code class="language-javascript">/**
url: 异步请求URL
type: POST 或者GET
dataType: JSON，直接填写 "json"
data: 传送的数据，json格式 {p1:data1,p2:data2}
callback: 回调函数，返回参数result为JSON格式。
示例：
$.operate.submit("","POST","json",{},function(result){
console.info(result.state == web_status.SUCCESS);
console.info(result.state == web_status.FAIL);
})
*/
$.operate.submit(url, type, dataType, data, callback);
/**异步post请求*/
$.operate.post(url,data,callback)
/**异步get请求*/
$.operate.get(url,callback)
/**同步get请求，返回结果直接就是get请求的结果*/
$.operate.sync(url)
/**使用新窗口发送post请求，params是json格式，isNewOpen 是否新打开网页提交*/
$.operate.wpost(url,params,isNewOpen)
/**通过选项卡方式打开一个链接，title 打开的选项卡名称*/
$.operate.openTab(title,url)</code></pre>
<h5>$.alert 弹出交互框</h5>
<ul>
<li>alert封装的是easyui中的messager。</li>
<li>前端采用的是iframe方式，在iframe内部的alert框会阻挡在iframe内部，所以在源码中已经将alert框提升到top顶级。</li>
</ul>
<pre><code class="language-javascript">$.alert.msg(content,type);/*type可选值包括：success，error，warning或者为空*/
/*也可以更快捷的使用：*/
$.alert.error(content); // 错误框
$.alert.success(content); // 成功框
$.alert.warn(content); // 警告框
$.alert.confirm(content,callBack); // 确认框
/**其中callback方法只是点击确认的时候触发；点击关闭的时候不会触发。*/
$.alert.confirm("确认删除",function(){
alert("点击了确认按钮");
});
$.alert.loading(content); // 加载框
$.alert.closeLoading(); // 关闭加载框</code></pre>
<h5>$.common 通用方法封装处理</h5>
<pre><code class="language-javascript">/**判断空*/
$.common.isEmpty(value);
/**判断非空*/
$.common.isNotEmpty(value);
/**判断是否是方法*/
$.common.isFunction(value);
/**去掉空格*/
$.common.trim(value);
/**生成随机数*/
$.common.random(min,max);
/**字符串以某开始*/
$.common.startWith(value, start);
/**字符串以某结束*/
$.common.endWith(value, end);
/**删除字符串*/
$.common.remove(value, c);
/**删除头部字符串*/
$.common.removeStart(value, c);
/**删除尾部字符串*/
$.common.removeEnd(value, c);
/**日期类型转换，默认类型yyyy-MM-dd hh:mm:ss。pattern可以为空*/
$.common.time(value,pattern);
/**休眠时间，单位微秒*/
$.common.sleep(value);
/**同步方式根据code获取地域的详细信息---此方法放在common中不是很合适*/
$.common.region(value);</code></pre>