FineUI Core Grid按钮模板列-2

继上一次分享模板列扩展JS之后，进行了部分优化和新增，现在放出代码；增加了异步列的示例，以及相关代码；

完整代码需要配合以上两个分享；

先看使用示例，再看源码

第一种用法，先显示等待的图标，异步请求后显示结果

实际项目中也可能会重置等待图标，有时候等待图标会放在原始值前面有时候放在后面或不显示，第二个参数可以接收方法尝试修改默认行为，在实际中这样使用


renderEx = function (fn) {
    //创建模板
    let model = {
        /**
         * 按钮
         * @param {Object} opt {id,text必填;icon图标 拼接 f-;beforRender;click;hidetype[visibility]}
         */
        btn(opt) {
            const _btn = (_opt = opt) => {
                //按钮和text 默认 是value
                if (!_opt.id) {
                    _opt.id = GetGuid();
                }
                let oldid = _opt.id;
                _opt.id = `${_opt.id}_${this.params.rowId.replace("/", "")}_${this.params.columnId}`;
                _opt.text = _opt.text || this.value;

                //绘制按钮
                _opt.el = $(`<a id="${_opt.id}">`).addClass("f-btn f-btn-small f-state-default");
                _opt.el.attr("data-type", oldid);

                //<i class="f-btn-icon f-icon f-icon-pencil" style="display: inline-block;color: #3d80b3;"></i>
                if (_opt.icon) {
                    _opt.el.append(`<i class="f-btn-icon f-icon f-icon-${_opt.icon}" style="display: inline-block;color: #409eff;"></i>`);
                    //如果有图标 btn缩小
                    _opt.el.css("padding-left", '5px');
                }
                //触发绘制前方法
                let b = _opt.beforRender && _opt.beforRender.apply(this, [_opt]);
                _opt.el.append(`<span>${_opt.text}</span>`);

                //注册按钮事件 注意由于还没有绘制所以只能延迟
                (b || F.isEMP(b)) && _opt.click && setTimeout(() => {
                    //可以自己加入其他事件
                    $('#' + _opt.id).on('click', function () {
                        doCallback(_opt.click, [_opt]);
                    })
                }, 0);

                //返回html
                if (b || F.isEMP(b)) {
                    return _opt.el[0].outerHTML;
                } else if (_opt.hidetype && _opt.hidetype == 'visibility') {
                    _opt.el.css("visibility", 'hidden');
                    return _opt.el[0].outerHTML;
                } else { //如果绘制的方法回发fasle就没有html
                    return "";
                }
            }

            //如果不是数组
            if (!F.isARR(opt)) {
                return _btn();
            } else {
                //如果是数组 加入到组里 加个间距的样式
                let btndiv = $('<div class="GridRowBtns">');

                opt.forEach(item => {
                    btndiv.append(_btn(item));
                })
                //返回html
                return btndiv[0].outerHTML;
            }
        },
        //返回是否
        bool() {
            return this.value == 1 ? '是' : '否';
        },
        //性别
        gender() {
            return this.value == 1 ? '男' : '女';
        },
        //a标签
        link(opt) {
            const _link = (_opt = opt) => {
                //按钮和text 默认 是value
                if (!_opt.id) {
                    _opt.id = GetGuid();
                }
                _opt.id = `${_opt.id}_${this.params.rowId}_${this.params.columnId}`;
                _opt.text = _opt.text || this.value;

                //绘制按钮
                _opt.el = $(`<a id="${_opt.id}">`).addClass("grid-row-link").append(`<span>${_opt.text}</span>`);

                //触发绘制前方法
                let b = _opt.beforRender && _opt.beforRender.apply(this, [_opt]);

                //注册按钮事件 注意由于还没有绘制所以只能延迟
                _opt.click && setTimeout(() => {
                    //可以自己加入其他事件
                    $('#' + _opt.id).on('click', function () {
                        doCallback(_opt.click, [_opt]);
                    })
                }, 0);

                //返回html
                if (b || F.isEMP(b)) {
                    return _opt.el[0].outerHTML;
                } else { //如果绘制的方法回发fasle就没有html
                    return "";
                }
            }

            //如果不是数组
            if (!F.isARR(opt)) {
                return _link();
            } else {
                //如果是数组 加入到组里 加个间距的样式
                let btndiv = $('<div class="GridRowBtns">');

                opt.forEach(item => {
                    btndiv.append(_link(item));
                })
                //返回html
                return btndiv[0].outerHTML;
            }
        },
        //异步列标记，先返回一个等待的图标，然后 执行异步方法 
        promise(fun, msg = "") {
            //准备一个等待的图标
            let icon = $(`<i class="f-icon f-icon-refresh loading-iocn f-grid-cell-inner-loading-iocn"></i>`);
            //准备一个ID
            let id = GetGuid();
            //异步方法
            const asyncFun = async () => {
                let res = await fun();
                //方法执行后将ID替换
                res && $(`#${id}`).parent().html(res);
            }
            //执行
            asyncFun();
            //如果不是文本 尝试当方法调用 并返回
            if (!F.isSTR(msg)) {
                try {
                    //可能出现没有加载图标的情况 将ID绑到固定标签上
                    return doCallback(msg, [icon[0].outerHTML, icon]) +
                        `<span id="${id}"></span>`;
                } catch (e) {}
            }
            //非函数 将加载图标附上ID
            icon.attr({
                id
            });
            //直接返回
            return icon[0].outerHTML + msg;
        }
    }
    /*柯里化
     * 最后还是返回一个方法，
     * 这个方法将被正常的RendererFunction执行，
     * 但是扩展了一个参数
     * 懂的都懂
     * */
    return function (value, params) {
        //先给model赋值
        Object.assign(model, {
            value,
            params,
        });

        //再本示例中触发的是renderBtns方法 自己缕一缕，
        return doCallback(fn, [value, params, model, this]);
    }

    //apply的写法
    //doCallback = function (fn, args) {
    //    return fn.apply(this, args);
    //}
}
/**异步绘制方法 */
renderExAsync = function (fun, msg = "") {
    return renderEx((v, p, m, g) => 
        m.promise(() =>
            doCallback(fun, [v, p, m, g]), msg)
    );
}

CSS


/*加载图标*/
.loading-iocn {
    color: #2c4359;
    animation: spin 2s infinite linear;
}

.f-grid-cell-inner-loading-iocn {
    min-width: 12px;
    height: 12px;
    font-size: 12px;
    display: inline-flex;
    line-height: 10px;
    justify-content: center;
    align-items: center;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(359deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg)
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(359deg)
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}

.cs


/// <summary>
/// 绘制回调方法 参数为JS名称
/// </summary>
/// <param name="f"></param>
/// <param name="fn"></param>
/// <returns></returns>
public static RenderFieldExtension RendererFunctionEx(this RenderFieldExtension f, string fn)
{
    f.RendererFunction("renderEx(" + fn + ")");
    return f;
}

/// <summary>
/// 绘制异步回调方法 参数为JS名称
/// </summary>
/// <param name="f"></param>
/// <param name="fn">最终执行的js</param>
/// <param name="msg">预占文字</param>
/// <returns></returns>
public static RenderFieldExtension RendererFunctionAsnync(this RenderFieldExtension f, string fn, string msg = "")
{
    f.RendererFunction($"renderExAsync({fn},'{msg}')");
    return f;
}