FineUICore扩展（二）

上一篇给F增加了扩展，后台生成了三个按钮放到了F.Toolbar().Items()中，今天把前台触发方法写好，让生成的按钮用起来

导言

上一篇给F增加了扩展，后台生成了三个按钮放到了F.Toolbar().Items()中，今天把前台触发方法写好，让生成的按钮用起来

在这之前要定义新增修改删除按钮都干什么，我习惯于把修改页面单独用F.Window控件弹出，然后用url传值把选中的ID传到编辑页面，所以，新增就是弹出空页面（不传参数），修改就弹出页面（传选中的ID），删除按钮直接触发后台方法，前台就用F.doPostBack(url, {});

1. 为Grid扩展一个Window

单独一个Window控件？当然不需要，Grid自带一个window是我想要的，要用一行代码就建一个Window控件，前台要这样：

.EditWindow(@Url.Content("~/Grid/GridEdit"), 450, 350, "表格1修改")

我只要制定URL，大小，标题，就足够了，为F.Grid扩展，鼠标点击F.Grid()按F12，飞，这次没有重载

//
// 摘要:
//     表格控件扩展
public GridExtension Grid();

GridExtension就是这个，为他做扩展：

/// <summary>
/// 为Grid 增加 窗体 
/// </summary>
/// <param name="f"></param>
/// <param name="url">修改页面的地址</param>
/// <param name="width">宽</param>
/// <param name="height">高</param>
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height)
{}

Window控件作为属性动态输出，我选择js，所以Window的显示需要扩展F.Grid，这回是js扩展：

if (F.Grid) {
    $.extend(F.Grid.prototype, {
        editWidth: 800,//修改窗口的宽
        editHeight: 650,//修改窗口的高
        editTitle: "编辑",//修改窗口的标题
        //显示编辑页面
        showEdit: function (b, data, title, w, h) {
            var t = this;
            //默认属性
            var editurl = F.ui[t.id].editurl;
            title = title || t.editTitle;
            w = w || t.editWidth;
            h = h || t.editHeight;
            //没有地址返回
            if (!editurl) { return; }
            //增加随机参数
            if (editurl.indexOf('?') < 0) {
                editurl += "?_reg=" + Math.random();
            }
            //是否验证选择项
            if (b) {
                var selectids = F.ui[t.id].getSelectedRows();
                if (selectids.length != 1) {
                    notifyEx("请选择一行进行编辑");
                    return;
                }
                //将选择的id作为参数拼接
                editurl += "&id=" + selectids[0];
            }
            //其他的参数 [a=x,b=x]
            if (data) {
                if ($.isArray(data)) {
                    for (var d in data) {
                        editurl += "&" + d;
                    }
                } else {
                    editurl += "&" + data;
                }
            }
            //执行显示
            F.ui[t.id + 'GridEdit'].show(editurl, title, w, h);
        }
    });
}

js执行F.ui.Grid.showEdit() 就可以了。下面补齐FineUIEx.cs，注意EditWindow方法的多中重载，满足不同场景

/// <summary>
/// 为Grid 增加 窗体
/// </summary>
/// <param name="f"></param>
/// <param name="b">是否启用修改页面</param>
/// <param name="url">修改页面地址</param>
private static GridExtension EditWindow(this GridExtension f, bool b, string url)
{
    StringBuilder str = new StringBuilder();
    if (b)
    {
        str.Append("F.appendFormNode('<div class=\"f-window-wrap\" id=\"" + f.Source.ID + "GridEdit_wrapper\"></div>');");
        str.Append("new F.Window({");
        str.Append("id: '" + f.Source.ID + "GridEdit',");
        str.Append("renderTo: '#" + f.Source.ID + "GridEdit_wrapper',");
        str.Append("hidden: true,");
        str.Append("width: 1000,");
        str.Append("height: 600,");
        str.Append("iframe: true,");
        str.Append("title: '编辑',");
        str.Append("iconFont: 'edit',");
        str.Append("resizable: true,");
        str.Append("target: '_self',");
        str.Append("maximizable: true,");
        str.Append("closeAction: 'hide'");
        str.Append("});");
    }
    if (!string.IsNullOrEmpty(url))
    {
        str.Append("F.ui." + f.Source.ID + ".editurl = '" + url + "';");
    }
    PageContext.RegisterStartupScript(str.ToString());
    return f;
}

/// <summary>
/// 为Grid 增加 窗体
/// </summary>
/// <param name="f"></param>
/// <param name="b"></param>
public static GridExtension EditWindow(this GridExtension f, bool b)
{
    return f.EditWindow(true, "");
}

/// <summary>
/// 为Grid 增加 窗体
/// </summary>
/// <param name="f"></param>
/// <param name="url">修改页面的地址</param>
public static GridExtension EditWindow(this GridExtension f, string url)
{
    return f.EditWindow(true, url);
}
/// <summary>
/// 为Grid 增加 窗体 
/// </summary>
/// <param name="f"></param>
/// <param name="url">修改页面的地址</param>
/// <param name="width">宽</param>
/// <param name="height">高</param>
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height)
{
    StringBuilder str = new StringBuilder();
    str.Append("F.ui." + f.Source.ID + ".editWidth=" + width + ";");
    str.Append("F.ui." + f.Source.ID + ".editHeight=" + height + ";");
    PageContext.RegisterStartupScript(str.ToString());
    return f.EditWindow(true, url);
}


/// <summary>
/// 为Grid 增加 窗体 
/// </summary>
/// <param name="f"></param>
/// <param name="url">修改页面的地址</param>
/// <param name="width">宽</param>
/// <param name="height">高</param>
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height,string title)
{
    StringBuilder str = new StringBuilder();
    str.Append("F.ui." + f.Source.ID + ".editWidth=" + width + ";");
    str.Append("F.ui." + f.Source.ID + ".editHeight=" + height + ";");
    str.Append("F.ui." + f.Source.ID + ".editTitle='" + title + "';");
    PageContext.RegisterStartupScript(str.ToString());
    GridExtension gex = f.EditWindow(true, url);
    return gex;
}

2. 按钮触发实现

有了编辑窗口，下面写js方法为让按钮触发就行了，新增修改弹出编辑窗口，代码如下

//新增 修改 删除 由后台自动引用，通过传入的GirdID执行前台或者后台方法
//新增
GridAdd_click = function (gridid) {
    //下回说这句
    eval("var fun;try{fun=" + gridid + "new_Click;}catch(ex){}");
    if (fun) {
        fun(F.ui[gridid]);
    } else {
        //显示
        F.ui[gridid].showEdit();
    }
};
//修改
GridEdit_click = function (gridid) {
    //下回说这句
    eval("var fun;try{fun=" + gridid + "edit_Click;}catch(ex){}");
    //得到选择的ID 判断
    var selectids = F.ui[gridid].getSelectedRows();
    if (selectids.length != 1) {
        notifyEx("请选择一行进行编辑");
        return;
    }
    if (fun) {
        fun(F.ui[gridid], selectids[0]);
    } else {
        //显示
        F.ui[gridid].showEdit(true);
    }
}

//删除 这里要注意，删除的url要从程序传 后台需要有删除方法 gridid + 'Del_Click' 命名
GridDel_click = function (pburl, gridid) {
    eval("var fun;try{fun=" + gridid + "delete_Click;}catch(ex){}");
    var selectids = F.ui[gridid].getSelectedRows();
    if (selectids.length == 0) {
        notifyEx("请选择一行进行编辑");
        return;
    }
    confirmEx("是否删除选中项", function () {
        if (fun) {
            fun(F.ui[gridid], selectids);
        } else {
            F.doPostBack(pburl + "/" + gridid + 'Del_Click', {
                id: selectids,
                fields: F.ui[gridid].fields
            });
        }
    });
}

将DefaultGridBtn方法补齐，实现触发前台的js

/// <summary>
/// 返回默认Grid增删改按钮的默认配置 参数（GridID,增加的其他按钮）
/// new_Click  edit_Click delete_Click
/// </summary>
/// <param name="F"></param>
/// <param name="gridid"></param>
/// <param name="items"></param>
/// <returns></returns>
public static ControlBase[] DefaultGridBtn(this UIExtension<dynamic, dynamic> F, string gridid, params IControlBaseExtension[] items)
{
    //var F = new UIExtension<dynamic, dynamic>();
    List<ControlBase> DefaultBtn = new List<ControlBase>();
    var v = F.Button().ID(gridid + "new").Text("新增").OnClientClick("GridAdd_click('" + gridid + "')").IconFont(IconFont.Plus).Source;
    DefaultBtn.Add(v);
    v = F.Button().ID(gridid + "edit").Text("修改").OnClientClick("GridEdit_click('" + gridid + "')").IconFont(IconFont.Pencil).Source;
    DefaultBtn.Add(v);
    string url = ((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)((Microsoft.AspNetCore.Http.DefaultHttpContext)((Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper)F.CurrentHtmlHelper).ViewContext.HttpContext).Request).Path;
    v = F.Button().ID(gridid + "delete").OnClientClick("GridDel_click('" + url + "','" + gridid + "')").Text("删除").IconFont(IconFont.Minus).Source;
    DefaultBtn.Add(v);
    foreach (var t in items)
    {
        DefaultBtn.Add(t.Source);
    }
    return DefaultBtn.ToArray();
}


/// <summary>
/// 返回默认Grid增删改按钮的默认配置 参数（GridID,增加的其他按钮）
/// new_Click  edit_Click delete_Click
/// </summary>
/// <param name="f"></param>
/// <param name="gridid"></param>
/// <param name="items"></param>
/// <returns></returns>
public static ControlBase[] DefaultBeforGridBtn(this UIExtension<dynamic, dynamic> f, string gridid, params IControlBaseExtension[] items)
{
    var F = new UIExtension<dynamic, dynamic>();
    List<ControlBase> DefaultBtn = new List<ControlBase>();
    foreach (var t in items)
    {
        DefaultBtn.Add(t.Source);
    }
    var v = F.Button().ID(gridid + "new").Text("新增").OnClientClick("GridAdd_click('" + gridid + "')").IconFont(IconFont.Plus).Source;
    DefaultBtn.Add(v);
    string url =((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)((Microsoft.AspNetCore.Http.DefaultHttpContext)((Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper)f.CurrentHtmlHelper).ViewContext.HttpContext).Request).Path;
    v = F.Button().ID(gridid + "edit").Text("修改").OnClientClick("GridEdit_click('" + gridid + "')").IconFont(IconFont.Pencil).Source;
    DefaultBtn.Add(v);
    v = F.Button().ID(gridid + "delete").OnClientClick("GridDel_click('" + url + "','" + gridid + "')").Text("删除").IconFont(IconFont.Minus).Source;
    DefaultBtn.Add(v);
    return DefaultBtn.ToArray();
}

具体效果，可以在FineUIMVC扩展中查看。

没想好的个人博客

导言

1. 为Grid扩展一个Window

2. 按钮触发实现

FineUICore扩展（一）