点击列表数据执行js脚本

发布于 2020-06-14 00:13:28

WTM为列表提供了MakeAction和MakeStandardAction,我们可以很方便地为每行数据添加特定处理逻辑,但是这需要在列表末尾添加按钮,用户点击末尾的按钮才能执行相应的操作。

能不能让用户直接点击数据就执行操作呢?目前WTM还没有提供直接的功能支持,不过我们可以利用SetFormat函数来实现,实现起来也很简单,但其中有一个小坑需要注意,下面结合具体例子说明一下。

假设我们要给用户表中的姓名加上链接,点击姓名打开一个对话框,显示用户的详细信息,要求对话框的标题显示用户的名字。

首先,在视图中定义一个js函数,用于打开对话框用户明细信息(其实可以做任何需要的操作),如下所示:

<script>
    function show_user(id, name) {
        ff.OpenDialog('/User/Details/' + id, 'user' + id, name + '明细', 800, 600);
    }
</script>

它需要用户的id和name两个参数,需要我们在列表点击操作中传过来。

然后,在UserListVM中InitGridHeader函数里,给UserName列添加SetFormat操作,如下所示:

this.MakeGridHeader(x => x.UserName).SetFormat((e,v)=> $"<a href='javascript:show_user({e.UserId},{HttpUtility.HtmlEncode($"\"{v}\"")})'>{HttpUtility.HtmlEncode(v)}</a>"),

通过SetFormat生成链接并传递参数,其中的v就是用户名。代码很短也很直观,但有一点需要说明:必须对特殊字符进行转义,否则会导致显示异常。所以我们需要自己对SetFormat的内容进行转义。用户名中可能会包含各种字符,需要转义,双引号也需要转义,所以在上面的代码中双引号和v都放在了HtmlEncode中。

1 条评论

发布
问题