## 交互插件
#### 日期选择:`DateSwitch`
**生成两个日期选择控件(“开始日期”,“结束日期”),以及下拉菜单(今日,本周,本月等)。**
```javascript
$.fn.DateSwitch
//e.g.
$(".dateSwitch").DateSwitch
```
*容器的`data-init`属性控制是否有初始时间范围,默认为`true`,有初始值(本月)。*
---------
####消息提示:`MsgBox`
**展示浮动消息提示,通常在操作行为后显示(提交、保存等)**
```typescript
interface AjaxResult {
IsSuccess: Boolean,//是否成成功
Data: any,//返回数据
Msg: string;//消息
}
//根据返回结果显示消息,成功后执行方法
MsgBox.Show(result:Sail.AjaxResult,successText:string,act?:Function)
ShowMessage(result:Sail.AjaxResult,successText:string,act?:Function)
//successText为成功后提示的文本,为空时显示默认消息(result.Msg)
//成功后执行方法
MsgBox.Action(result: Sail.AjaxResult, act?: Function)
//显示信息(蓝色)
MsgBox.Info(text:string)
ShowInfo(text:string);
//显示成功消息(绿色)
MsgBox.Success(text:string)
ShowSuccess(text:string);
//显示错误消息(红色)
MsgBox.Error(text:string)
ShowError(text:string);
//e.g.
var result = {
IsSuccess:true,
Data:[],
Msg:'hello'
};
MsgBox.Show(result,function(result){console.log(result.Msg);});
/*显示浮动消息"hello"(绿色)
'hello'*/
MsgBox.Action(result,function(result){console.log(result.Msg);});
//效果同上
MsgBox.Info('hello');
//显示浮动消息"hello"(蓝色)
MsgBox.Success('hello');
//显示浮动消息"hello"(绿色)
MsgBox.Error('hello');
//显示浮动消息"hello"(红色)
```
*text为提示的文本信息;*
---------
####弹窗选择:`SelectModal`
**分页列表,点击按钮后弹窗显示,可查询/选择。**
```typescript
$.fn.ModalSelect(set: Sail.IModalSelectSetting);
interface IModalSelectSetting {
defaultId: string,//预设model.Id
id: string;//弹窗Id
resultTarget: string;//选择后渲染的容器,默认为输入框
resultTmpl: string;//选择后渲染模板
title: string;//标题
modalTmpl: string;//弹窗模板
api: string;//api
href: string;//新增按钮跳转链接(如果有)
pageSet: IPaginationSetting;//弹窗列表分页设置
onSelect: Function;//选择后执行的函数
onClear: Function;//清除后执行的函数;
isAllowClear: boolean;//是否允许清除,默认true
}
interface IPaginationSetting {
bodyContainer?: any;//列表容器
getPostKey?: Function;//设置ajax参数
pageSize?: number;//分页大小
handleName: any;//ajax路径
headContainer?: any;//列表标题容器
footContainer?: any;//页脚容器
ajaxType?: Function;//ajax类型,默认get
bodyTmpl?: any;//列表模板
footTmpl?: any;//页脚模板
queryed?: any;//查询后行为
titles?: Array<string>;//列表标题
titleWidth?: Array<number>;//列表标题宽度
events?: Array<IEvent>;//事件定义
reQueryHandle?: string;//查询按钮
}
//e.g.
$("[data-target=ProjectId]").ModalSelect({
id: "ProjectModal",
title: "选择监管项目",
modalTmpl: "#ProjectModalTmpl",
pageSet: {
titles: ["项目名称", "项目地址"],
handleName: "/api/project/GetModalList",
bodyTmpl: "#ProjectListTmpl"
},
onSelect: function (data) {
console.log(data);
$(tool.$Editor).find("#DeveloperId").SetValue(data.DeveloperId);
$(tool.$Editor).find("#EnterpriseName").SetValue(data.Developer.EnterpriseName);
$(tool.$Editor).find("#Purpose").SetValue(data.Purpose);
}
});
```