easyui formatter实现超链接效果

最新推荐文章于 2023-05-12 12:04:41 发布

随心更博

最新推荐文章于 2023-05-12 12:04:41 发布

阅读量5.8k

点赞数 3

分类专栏： ☀ 成长经历 ---------【组织部系统】

本文链接：https://blog.csdn.net/fxq8866/article/details/51645036

版权

☀ 成长经历同时被 2 个专栏收录

74 篇文章 0 订阅

订阅专栏

---------【组织部系统】

8 篇文章 0 订阅

订阅专栏

formatter是格式化的意思，也就是以何种形式呈现的意思。项目中需要在easyui-datagrid的某一列做成超链接的效果，点击并能够出现一个弹出框；

formatter该属性是一个函数，它包含两个参数: value: 对应字段的当前列的值，record: 当前行的记录数据。

页面代码：

<span style="font-family:SimSun;font-size:18px;"><table id="dg" class="easyui-datagrid" style="width: 1000px"
    data-options="
    rownumbers:true,striped:true,loadMsg:'正在加载用户信息',singleSelect:true,method:'get',pagination:true,url:'/CadresRate/queryAllDocument',pageSize:20,pageList:[10,20,30,40,50],pageNumber:1,toolbar:toolbar">
    <thead>
        <tr style="width: 100%">

            <th data-options="field:'DocumentName',width:180 ,<strong>formatter:FileUrl</strong>">文件名称</th>

        </tr>
    </thead>
</table></span>

JS代码：

<span style="font-family:SimSun;font-size:18px;"><script type="text/javascript">

    function FileUrl(value, rowData) {
        if (value == null || value == "") {
            return "<a href='javascript:void(0)'οnclick=showImg('" + value + "');><a/>";
        } else {
            return "<a href='javascript:void(0)'οnclick=showImg('" + value + "');>" + value + "<a/>";
        }
    }

</script></span>

注意事项

formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的