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/

    三石出品,必属精品 

  • 相关阅读:
    电脑出现的问题以及解决方法
    [2] 立方体(Box)图形的生成算法
    [1] 平面(Plane)图形的生成算法
    [0] 各类图形的数据大小获得
    3D几何图形的生成算法
    3D几何图形生成的DEMO
    花了两天时间为我的引擎实现了性能分析的界面显示
    游戏:贪吃虫(GreedyMaggot)
    相声段子:求爱总动员
    三维体数据分割算法
  • 原文地址:https://www.cnblogs.com/sanshi/p/13491421.html
Copyright © 2011-2022 走看看