zoukankan      html  css  js  c++  java
  • 【新特性速递】快速为RenderField增加提示信息(无需借助RendererFunction)

    FineUIPro/Mvc/Core的下个版本(v7.0.0),我们为RenderField增加了ShowToolTip属性,再也无需仅仅为了一个提示信息就写RendererFunction了。

    这个需求来自知识星球的网友:https://t.zsxq.com/Z7UjYrB

    也就是说,为了给RenderField列增加提示信息,我们需要通过 RendererFunction 来添加,如下代码所示:

    // 超链接标签 - 所学专业
    function renderMajor(value, params) {
        var url = 'http://gsa.ustc.edu.cn/search?q=' + F.urlEncode(value);
        return F.formatString('<a href="{0}" data-qtip="{1}" target="_blank">{1}</a>', url, F.htmlEncode(value));
    }
    

    其中HTML标签属性data-qtip会被 FineUI 识别,并在光标移动到目标节点时,显示提示信息。

    当然这个例子是为了渲染一个超链接,如果需求是生成一个包含提示信息的普通文本,则同样需要借助于RendererFunction:

    <f:RenderField HeaderText="所学专业" DataField="Major" RendererFunction="renderMajor" Width="150px" />
    

    对应的列渲染函数:

    function renderMajor(value) {
    	return F.formatString('<span data-qtip="{0}">{0}</span>', F.htmlEncode(value));
    }

    虽然能够实现功能,但是代码却有点啰嗦。

    下个版本,我们会针对这种情况进行优化,仅仅通过一个属性ShowToolTip就能实现上面的功能:

    <f:RenderField HeaderText="所学专业" DataField="Major" ShowToolTip="true" ToolTipPosition="TopStart" Width="150px" />
    

    是不是很简洁,而且还能指定提示信息的显示位置(ToolTipPosition)。  

      

    页面显示效果:

     

    欢迎入伙:https://fineui.com/fans/

    三石出品,必属精品 

  • 相关阅读:
    CS224n笔记12 语音识别的end-to-end模型
    Vue组件
    关于网站
    Vue问题区
    数组的增、删、改、查
    Tree全部展开/折叠
    python 中UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-7: ordinal not in range(128)的解决方法
    python安装wxPython
    python中的迭代器和生成器
    python中的re正则表达式和模板系统
  • 原文地址:https://www.cnblogs.com/sanshi/p/13491421.html
Copyright © 2011-2022 走看看