UI常用接口使用规范

////////////////////////////////////////////////////////////////////////////////////////////////
/// Ajax 请求
////////////////////////////////////////////////////////////////////////////////////////////////
function doAjax(id, force) {
    $.ajax({
        url: '@("~/home/index".MapUrl())',
        data: { "id": id },
        dataType: "json",

        // 进度提示条相关的4个属性，一般在保存、提交数据等操作中仅定义 showProgressbar = true，其它三个属性使用默认值即可
        showProgressbar : false, //    是否显示进度提示条，默认值为 false，该属性不是必须的
        progressbarTitle : '', //    进度提示条的标题，默认值为 “提示”
        progressbarMsg : '', //        进度提示条的消息，默认值为 “”;
        progressbarText : '', //    进度提示条的提示，默认值为“正在处理，请稍等…”

        // confirm 方法仅在服务器返回 300 错误码时才会被调用，该方法被调用意味着用户已经确认确实要执行当前操作
        // 一般在该方法里将外层方法再次调用一遍即可
        confirm: function(){
            doTest(id, true);
        },
        // xhr: jquery Ajax 标准参数，一般不使用
        // status: jquery Ajax 标准参数，一般不使用
        // errObj: 错误对象,可通过其 code 属性判断具体是什么错误,通过其 message 属性获取错误的消息
        // 注意：在 error 方法里不需要再次提示消息给用户，因为执行到 error 方法之前，底层框架已经将消息提示给用户了
        error: function (xhr, status, errObj) {
            if(errObj && errObj.code){
                switch(errObj.code){
                    case 1001:
                        // do something, 比如：焦点定位到某个字段
                        break;
                    default:
                        break;
                }
            }
        },
        // data: 请求成功后返回的数据，json 对象，可直接使用
        // textStatus: jquery Ajax 标准参数，一般不使用
        success: function (data, textStatus) {
            if(data){
                // 通过 data.xxx 放回 data 属性
            }
            // do other something, 比如重新加载 Grid:  $('#dg').datagrid('reload');
        }
    })
}

////////////////////////////////////////////////////////////////////////////////////////////////
//  在选项卡区域中或直接打开新窗口，如果当前页面在选项卡容器中，则打开选项卡，否则，直接调用 window.open 方法打开新窗口。
//  参数说明：
//      id      :   id
//      options :   url
//                  title 标题，该参数的值显示为选项卡的标题，未提供则显示 url，如果是在非选项卡容器中，则忽略该参数
//                  features 如果是在选项卡容器中，则忽略该参数，否则，与标准的 window.open 方法的 features 参数意义相同
//                  replace 如果是在选项卡容器中，则忽略该参数，否则，与标准的 window.open 方法的 replace 参数意义相同
////////////////////////////////////////////////////////////////////////////////////////////////
$.open(id, options)
// 示例：
$.open("test", {"url":"/witbpm/test/index", "title":"测试", "replace":true});

////////////////////////////////////////////////////////////////////////////////////////////////
//  在选项卡区域中或新窗口中打开指定的菜单。
//  参数说明：
//      id      :   id
//      rootId  :   菜单项所属根级菜单的 id
//      options :   url
//                  title 标题，该参数的值显示为选项卡的标题，未提供则显示 url，如果是在非选项卡容器中，则忽略该参数
//                  features 如果是在选项卡容器中，则忽略该参数，否则，与标准的 window.open 方法的 features 参数意义相同
//                  replace 如果是在选项卡容器中，则忽略该参数，否则，与标准的 window.open 方法的 replace 参数意义相同
////////////////////////////////////////////////////////////////////////////////////////////////
$.openMenu(id, rootId, options)
// 示例：
$.openMenu(100, 1, {"url":"/witbpm/test/index", "title":"测试", "replace":true});

////////////////////////////////////////////////////////////////////////////////////////////////
/// 关闭窗口，如果当前页面在选项卡容器中，则关闭选项卡，否则，直接调用 window.close 方法关闭当前窗口。
////////////////////////////////////////////////////////////////////////////////////////////////
$.close()

////////////////////////////////////////////////////////////////////////////////////////////////
/// 刷新打开当前窗口的父窗口，如果当前页面在选项卡容器中，则刷新打开该选项卡的选项卡，否则，刷新父窗口。
/// 如果父窗口中定义了 doRefresh 方法，则在刷新时仅调用该方法，否则重新加载整个窗口。
////////////////////////////////////////////////////////////////////////////////////////////////
$.refreshOpener()

////////////////////////////////////////////////////////////////////////////////////////////////
/// 关闭指定 id 的选项卡
////////////////////////////////////////////////////////////////////////////////////////////////
$.closeTab(id)

////////////////////////////////////////////////////////////////////////////////////////////////
/// 刷新指定 id 的选项卡
////////////////////////////////////////////////////////////////////////////////////////////////
$.refreshTab(id)

////////////////////////////////////////////////////////////////////////////////////////////////
/// 弹出提示框、警告框、错误框、确认框等对话框的标准用法
////////////////////////////////////////////////////////////////////////////////////////////////
// 提示框
$.messager.alert($.messager.defaults.info, "删除成功", "info");
// 警告框
$.messager.alert($.messager.defaults.warn, "删除失败", "warn");
// 错误框
$.messager.alert($.messager.defaults.error, "服务器错误", "error");
// 确认框
$.messager.confirm($.messager.defaults.confirm, "您确认要删除xxx吗", function (r) {
            if (r) {
                // do something
            }
})

////////////////////////////////////////////////////////////////////////////////////////////////
/// 打开模态对话框    $.showModalDialog
/// 打开普通对话框    $.showWindow
////////////////////////////////////////////////////////////////////////////////////////////////
//  url:        url
//  options:    name 名称
//              data:       传入窗口的数据
//              onload:     当窗体加载完成时发生
//              buttons:    定义对话框中出现的按钮
//              toobar:     定义对话框中出现的工具条
//              content:    窗口中要现实的内容，如果设置了 url 参数，则忽略此属性。
//              iconCls:    窗口图标样式，默认值 icon-window
//              container:  窗口相对容器，用于定位窗口容器位置和大小，值可为 top、current、parent、offsetParent 或者 #id 形式的 html 元素之一, 默认值 top。
//              width:      窗口宽度，默认值 "auto"
//              height:     窗口高度，默认值 "auto"
//        备注：（除了上述属性，还支持所有 easyUI 的标准属性，同时，宽度和高度还支持百分比）
//  返回打开窗体的引用
// 示例：
//在主页面中：
$.showModalDialog("@("~/home/index".MapUrl())", {
    data    :   {"a":1111, "b":"bbbbb"},
    onLoad    :   function(target, options, win){
                    if(win){
                        win.doInit(target, options);
                    }
                },
    buttons    :   [{
                    text: 'OK',
                    iconCls: 'icon-ok',
                    handler: function(target, options, win){
                        if(win){
                            win.doOK(target, options);
                        }
                        if(options.returnValue){
                            target.close();
                        }
                    }
                },{
                    text: 'Cancel',
                    iconCls: 'icon-cancel',
                    handler: function(target, options, win){
                        if(win){
                            win.doCancel(target, options);
                        }
                        target.close();
                    }
                }
    ]});
}
//在对话框页面中：
    <script type="text/javascript">
        function doInit(target, options) {
            alert(options.data['a']);
        }

        function doOK(target, options) {
            options.returnValue = 'aaaaaaaaaaaaaaa';
        }

        function doCancel(target, options) {
        }
    </script>

////////////////////////////////////////////////////////////////////////////////////////////////
/// 弹框选择控件　    popupSelector
////////////////////////////////////////////////////////////////////////////////////////////////
属性：
    url                    // 弹出对话框中打开的选择页面 Url。
        title                // 控件的标题
        multiSelect        // 是否多选，默认值为 false。
        mode                // 选择模式，该参数被以查询参数的方式传递到目标 url　的页面中
        width            // 宽度，默认值 auto
        height            // 高度，默认值 22
        value            // 值
        text            // 显示文本
        prompt            // 提示文本，默认值为　"请选择{title}"
        required        // 是否必选，默认值为 false。
        minSelect            // 最小选择对象数，在 multiSelect 为 true 时有效，用于控制选择对象的最小个数，默认值 0（即忽略该参数）。
        maxSelect            // 最大选择对象数, 在 multiSelect 为 true 时有效，用于控制选择对象的最大个数，默认值 0（即忽略该参数）。
        maxLength            // 值的最小长度，用于控制值组成的字符串的存储长度超过该长度时将提示用户减少选择对象的数量，默认值 0（即忽略该参数）
        dialogOptions        // 控件弹出对话框的控制选项（支持所有 easyUI 的标准属性，宽度和高度支持百分比）

事件：
    onShow        : function (options) {}       //给传递的options对象进行赋值
        onValidate    : function (newValue) { }    // 在值发生变化前对值进行校验时发生，该方法如果返回 true，则校验成功，否则校验失败。
        onChanged    : function () { }            // 在值发生变化后发生
方法：
        options                // 获取控件内部维护的　options　对象
        valuebox            // 获取控件内部维护的用于存储控件值的文本框
        textbox                // 获取控件内部维护的用语存储文本值的文本框
        getValue            // 获取值，如果多选，则是 "," 连接的字符串
        getText                // 获取文本，如果多选，则是 "," 连接的字符串
        setValue(value)        // 设置值
        setText(text)        // 设置文本
        destroy                // 移除控件
        resize                // 重设控件大小

示例：
<input id="popupSelector1" name="popupSelector1" class="easyui-popupSelector" value='1'
 data-options="onValidate:doOnvalidate, onChanged:doOnchanged,
    title:'产品',text:'笔记本',
    multiSelect:false, required:true, minSelect:0, maxSelect:0, minLength:0, maxLength:0,
    url:'@("~/home/product/list".MapUrl())'，mode:'',
    dialogOptions:{width:'80%',height:'50%',maximized: true,title:'aaa'}"
/>
<script type="text/javascript">
    function doOnvalidate(newValue){
        var validSuccess = false;
        // 插入自定义检查逻辑
        // 可使用 $(this).popupSelector('getValue') 调用组件中定义的方法

        if(validSuccess){
            return true;
        }
        return false;
    }

    function doOnchanged(){
        alert($(this).employeeSelector('getValue'));
    }
</script>

////////////////////////////////////////////////////////////////////////////////////////////////
/// 职员选择器　    employeeSelector
///        继承自　popupSelector
////////////////////////////////////////////////////////////////////////////////////////////////
属性：
        url                    // 已重写，不需要指定 url　属性
        mode                // list、org、all 之一，默认值为　list
事件：
方法：

示例：
<input id="employeeSelector1" name="employeeSelector1" value='1' class="easyui-employeeSelector" style="width:300px"
 data-options="onValidate:doOnvalidate, onChanged:doOnchanged,
    title:'审批人',text:'翟雪东',
    multiSelect:false, required:true, minSelect:0, maxSelect:0, minLength:0, maxLength:0,
    mode:'list'
/>
<script type="text/javascript">
    function doOnvalidate(newValue){
        var validSuccess = false;
        // 插入自定义检查逻辑
        // 可使用 $(this).employeeSelector('getValue') 调用组件中定义的方法

        if(validSuccess){
            return true;
        }
        return false;
    }

    function doOnchanged(){
        alert($(this).employeeSelector('getValue'));
    }
</script>

////////////////////////////////////////////////////////////////////////////////////////////////
/// 部门选择器　    departmentSelector
///        继承自　popupSelector
////////////////////////////////////////////////////////////////////////////////////////////////
属性：
        url                    // 已重写，不需要指定 url　属性
事件：
方法：

示例：
<input id="departmentSelector1" name="departmentSelector1" value='1' class="easyui-departmentSelector" style="width:300px"
 data-options="onValidate:doOnvalidate, onChanged:doOnchanged,
    title:'通知部门',text:'产品部',
    multiSelect:false, required:true, minSelect:0, maxSelect:0, minLength:0, maxLength:0,
    mode:'tree'
/>
<script type="text/javascript">
    function doOnvalidate(newValue, newText){
        var validSuccess = false;
        // 插入自定义检查逻辑
        // 可使用 $(this).departmentSelector('getValue') 调用组件中定义的方法

        if(validSuccess){
            return true;
        }
        return false;
    }

    function doOnchanged(newValue, newText){
        alert($(this).departmentSelector('getValue'));
    }
</script>

////////////////////////////////////////////////////////////////////////////////////////////////
/// 部门通用选择调用方法
////////////////////////////////////////////////////////////////////////////////////////////////
$.fn.departmentSelector.show($(target), {
        mode:'tree',
        multiSelect:true,
        required:true,
        text:'东兰信息,技术部,开发组',
        minSelect:0,
        maxSelect:10,
        minLength:1,
        maxLength:0,
        onSelect : function(newValue, newText){
            $(this).val(newValue);
        },
        onChanged : function(newValue, newText){ },
        onValidate : function(newValue, newText){ return true; }
    }, '1,2,3'
);

////////////////////////////////////////////////////////////////////////////////////////////////
/// 附件 -- filebox(单文件上传）
////////////////////////////////////////////////////////////////////////////////////////////////
属性
    属性名:默认值
    id:null    

    name:null 表单提交时的参数名

    disabled:false 是否禁用

    url:''    http请求的url,必填项

    required:false    该项是否为必填项

    inputWidth:'97'        button前面input的宽度

    inputHeight:'15'    button前面input的高度

    buttonWidth:'66'    选择文件button的宽度

    buttonHeight:'15'    选择文件button的高度

    buttonText:'添加附件'    上传按钮的文字    

    fileSizeLimit: '10MB'     上传文件大小限制

    fileTypeExts:''    上传文件的类型限制，多个值之间以分号间隔。示例：'*.txt;*.js'。

    fileTypeDesc:'All files'    上传文件的类型语言描述，在用户选择错误的文件类型时，会作为提示消息的一部分弹框提示

    formData:{} 设置上传文件时的其他参数。

    map:{}    成功上传文件时，提供返回的json对象在当前dom中的保存方式。
            可接受的类型为 fn|object
            fn：function(jq,data){}jq为当前item的jquery对象，data为请求返回的json对象。
            object：例如{attachmentId:id,attachmentName:name}，则会把请求返回的json对象的id属性设置为item的attachmentId的属性，json对象的name属性设置为tiem的attachmentName属性。

###事件

    在下列所有事件方法中，this均指向该插件的jquery对象，可以直接对this调用data方法，取出该插件的state中this指向该插件的jquery对象，可以直接对this调用data方法，取出该插件的state

    file对象支持的属性name、size(单位 B)，其他属性并不能统一支持。

    onSelect(file,opts) 选择文件时触发 param 当前选择的文件 

    onSelectError(file,opts,errorMsg) 选择文件出错时触发，在onSelect之后触发 param 当前选择的文件、当前插件的options、错误信息

    onUploadStart(file,opts) 上传开始触发 param 当前上传的文件、当前插件的options

    onUploadError(file,opts,errorMessage) 上传失败时触发，与onUploadSuccess是互斥的 param 当前上传的文件、当前插件的options、错误消息

    onUploadSuccess(file,opts,data) 上传成功时触发，与onUploadError是互斥的 param 当前上传的文件、当前插件的options、请求返回的json对象

    onUploadComplete(file,opts,data) 上传完成时触发，不论成功还是失败，在onUploadError或者onUploadSuccess之后触发 param 当前上传的文件、当前插件的options、请求返回的json对象

    onCancel(file,opts) 取消上传时触发 param 取消上传的文件、当前插件的options

    onBeforeDestroy() 在销毁插件之前调用，在不是强制销毁的情况下，返回false，则能阻止销毁的进行

    onDestroy() 销毁完成之后调用

    onDisable() 插件禁用时触发

    onEnable() 插件启用时触发

###方法
    options : 返回当前插件对象的options

    singlefile : 返回当前的插件对象

    setFormData(data) :data object 设置上传文件同时上传的参数

    disable : 禁用当前插件

    enable : 启用当前插件

    destroy(bool) : 销毁当前插件 true 强制销毁，不会调用onBeforeDestroy事件；false会调用onBeforeDestroy，如果onBeforeDestroy的返回结果不是true，则停止销毁。

示例：
    <input name="xxx" class="witui-filebox" type="file" data-options="required:true,fileSizeLimit: '2GB'"/>

////////////////////////////////////////////////////////////////////////////////////////////////
/// 附件 -- filepanel(多文件上传）
////////////////////////////////////////////////////////////////////////////////////////////////
属性
    属性名:默认值

    id:null    

    name:null 表单提交时的参数名

    disabled:false 是否禁用

    url:''    http请求的url,必填项

    required:false    该项是否为必填项

    queueSizeLimit:10    允许同时上传的最大文件数

    buttonText:'添加附件'    上传按钮的文字    

    fileSizeLimit: '10MB'     上传文件大小限制

    fileTypeExts:''    上传文件的类型限制，多个值之间以分号间隔。示例：'*.txt;*.js'。

    fileTypeDesc:'All files'    上传文件的类型语言描述，在用户选择错误的文件类型时，会作为提示消息的一部分弹框提示

    formData:{} 设置上传文件时的其他参数。

    map:{}    成功上传文件时，提供返回的json对象在当前dom中的保存方式。
            可接受的类型为 fn|object
            fn：function(jq,data){}jq为当前item的jquery对象，data为请求返回的json对象。
            object：例如{attachmentId:id,attachmentName:name}，则会把请求返回的json对象的id属性设置为item的attachmentId的属性，json对象的name属性设置为tiem的attachmentName属性。

事件
    在下列所有事件方法中，this均指向该插件的jquery对象，可以直接对this调用data方法，取出该插件的state中this指向该插件的jquery对象，可以直接对this调用data方法，取出该插件的state

    file对象支持的属性name、size(单位 B)，其他属性并不能统一支持。

    onSelect(file,opts) 选择文件时触发 param 当前选择的文件 

    onSelectError(file,opts,errorMsg) 选择文件出错时触发，在onSelect之后触发 param 当前选择的文件、当前插件的options、错误信息

    onUploadStart(file,opts) 上传开始触发 param 当前上传的文件、当前插件的options

    onUploadError(file,opts,errorMessage) 上传失败时触发，与onUploadSuccess是互斥的 param 当前上传的文件、当前插件的options、错误消息

    onUploadSuccess(file,opts,data) 上传成功时触发，与onUploadError是互斥的 param 当前上传的文件、当前插件的options、请求返回的json对象

    onUploadComplete(file,opts,data) 上传完成时触发，不论成功还是失败，在onUploadError或者onUploadSuccess之后触发 param 当前上传的文件、当前插件的options、请求返回的json对象

    onCancel(file,opts) 取消上传时触发 param 取消上传的文件、当前插件的options

    onBeforeDestroy() 在销毁插件之前调用，在不是强制销毁的情况下，返回false，则能阻止销毁的进行

    onDestroy() 销毁完成之后调用

    onDisable() 插件禁用时触发

    onEnable() 插件启用时触发

方法
    options : 返回当前插件对象的options

    filepanel : 返回当前的插件对象

    setFormData(data) :data object 设置上传文件同时上传的参数

    disable : 禁用当前插件

    enable : 启用当前插件

    destroy(bool) : 销毁当前插件 true 强制销毁，不会调用onBeforeDestroy事件；false会调用onBeforeDestroy，如果onBeforeDestroy的返回结果不是true，则停止销毁。

示例：
    <input name="attachmentIds_3" class="witui-filepanel" type="file"
        data-options="fileSizeLimit: '2GB',onDisable:function(file){alert(this.attr('id')+'disabled')},onEnable:function(){alert(this.attr('id')+'enabled')}"
    />