[EASYUI] tooltip的扩展使用
2023-09-27 14:25:13 时间
讲完使用范围。本来是要開始解说一些使用方法,只是杰哥我就不再次多啰嗦了,官网上有,地址例如以下:千万表要点我哦
废话不多说,首先就选要去创建一个加入tooltip的函数:
<span style="white-space:pre"> </span>//加入tooltip function addTooltip(tooltipContentStr,tootipId){ //加入对应的tooltip $('#'+tootipId).tooltip({ position: 'bottom', content: tooltipContentStr, onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: 'white', borderColor: '#97CBFF' }); } }); }
假设你须要将所有的列都用tooltip,那直接在上上面tootipId那处直接改动成datagrid的ID就可以,更简单的网上方法好多。太没技术含量我就不多讲了。
我将的是你须要那列出现tooltip。那列就出现。详细思路例如以下:
1)将须要出现tooltip的那列看作是一个操作列,则须要在初始化dataGrid的时候加入
<th field="DCatRemark" formatter='remarkFormater' width="200" sortable="true" align="center">类型描写叙述</th>
我以标签的形式写出,你也能够用js写,都一样的效果。
2)写完后接下俩就写该操作列相应的函数。
// 设置类型描写叙述的信息 function remarkFormater(value,row,index){ if(value&&value.length>15) { var DCatRemark=value.substring(0,15)+"..."; return '<div id="DCatRemark-'+index+'" style="width:auto;">' + DCatRemark + '</div>'; }else{ return value; } }3)接下来就是最重要的步骤了。一般直接运行这些代码无法显示出预定的tooltip效果。
动态产生datagrid后,对tooltop未又一次渲染,于是用$.parse又一次绚烂,但还是得不到预期的效果。须要在datagrid的onLoadSuccess事件中产生tooltip,例如以下:
onLoadSuccess : function(data1) { for ( var i = 0; i < data1.rows.length; i++) { if (data1.rows[i].DCatRemark!= undefined) { var reason = data1.rows[i].DCatRemark; toolReason = "<tr><td>类型描写叙述:" + reason + " </td></tr>"; } //拼写tooltip的内容 tooltipReason = "<table style='height:55px;width:165px;color:black'>" + toolReason + "</table>"; addTooltip(tooltipReason, 'DCatRemark-' + i); }}};
大概就是如此,须要源代码的能够留下邮箱~不会的地方也能够留下问题,争取在线解决!!!
相关文章
- Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之八(五十七)
- abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试(九)
- easyui datagrid 禁止选中行 EF的增删改查(转载) C# 获取用户IP地址(转载) MVC EF 执行SQL语句(转载) 在EF中执行SQL语句(转载) EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
- EasyUi开发
- EasyUI日期时间框DateTimeBox
- EasyUI-EasyUI框架入门学习
- jquery easyui textbox onblur事件,textbox blur事件无效解决方案
- jquery easyUI 日期格式化,DateBox只显示年
- easyui-treegrid移除树节点出错
- EasyUI datagrid 过滤时间段
- jQuery Easyui扩展CheckBox组件
- easyui MenuButton