datagrid使用和文字超出tip提示
Posted Minily
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datagrid使用和文字超出tip提示相关的知识，希望对你有一定的参考价值。
function LoadTable(queryData) {
$("#eventInfoTable").datagrid({
url: "/Dictionary/GetEventInfoListDo",
//iconCls: ‘icon-ok‘,
title: ‘活动信息‘,
height: document.documentElement.clientHeight - 115,
width: document.documentElement.clientWidth,
collapsible: true,
fitColumns: true,
singleSelect: true,
autoRowHeight: false,
pageSize: 20,
striped: true,
loadMsg: ‘正在加载信息...‘,
pagination: true,
rownumbers: true,
//sortName: ‘ID‘,
sortOrder: ‘asc‘,
remoteSort: false,
queryParams: queryData,
columns: [[
{ title: ‘活动名称‘, field: ‘EventCnname‘, width: 18, sortable: false },
{ title: ‘活动类型‘, field: ‘EventType‘, width: 20, sortable: false },
// { title: ‘活动所属领域‘, field: ‘Fied‘, width: 40, sortable: false },
{ title: ‘活动所含记录‘, field: ‘EventRecord‘, width: 40, sortable: false },
{ title: ‘活动类别‘, field: ‘EventClass‘, width: 14, sortable: false },
{ title: ‘活动频率‘, field: ‘EventFrequency‘, width: 16, sortable: false },
{title:‘窗口期‘,field:‘EventWindowPhase‘,width:20},
//{ title: ‘活动记录‘, field: ‘EventRecord‘, width: 40, sortable: false },
// { title: ‘活动所属部门‘, field: ‘Organize‘, width: 30, sortable: false },
//{ title: ‘活动所属岗位‘, field: ‘Role‘, width: 30, sortable: false }
{ title: ‘活动描述‘, field: ‘EventRemark‘, width: 30, sortable: false }
]],
toolbar: [
{ text: ‘增加‘, iconCls: ‘icon-add‘, handler: function () { AddEventClick(); } },‘-‘,
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () { EditEventClick(); } },‘-‘,
{ text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () { DeleteEventClick(); } }, ‘-‘,
{ text: ‘刷新‘, iconCls: ‘icon-reload‘, handler: function () { $(‘#eventInfoTable‘).datagrid("reload"); } }, ‘-‘]
,
onLoadSuccess: function (data) {
// $(this).datagrid(‘doCellTip‘,{‘max-width‘:‘300px‘,‘delay‘:500});
$(this).datagrid(‘doCellTip‘,
{onlyShowInterrupt: true,position: ‘top‘,//,//tipStyler: { ‘backgroundColor‘: ‘#fff000‘, width: ‘200px‘, borderColor: ‘#ff0000‘, boxShadow: ‘1px 1px 3px #292929‘ },//,//contentStyler: { backgroundColor: ‘#333‘, paddingLeft: ‘5px‘ }});
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
文本超出文本框的主要代码：
$(this).datagrid(‘doCellTip‘,
{onlyShowInterrupt: true,position: ‘top‘,//,//tipStyler: { ‘backgroundColor‘: ‘#fff000‘, width: ‘200px‘, borderColor: ‘#ff0000‘, boxShadow: ‘1px 1px 3px #292929‘ },//,//contentStyler: { backgroundColor: ‘#333‘, paddingLeft: ‘5px‘ }});其中：doCellTip为easyui内部封装，并非页面需要定义一个id=doCellTip的标签其他解说查看网站：http://www.zi-han.net/case/easyui/datagrid&tree.html使用以上代码需要引用js文件datagridTip.js
<script type="text/javascript" src="@Url.Content("~/js/datagridTip.js")"></script>代码如下：$.extend($.fn.datagrid.methods, { /** * 开打提示功能 by xiaoyu * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip: function (jq, params) { function showTip(showParams, td, e, dg) { //无文本，不提示。 if ($(td).text() == "") return; params = params || {}; // $(".tipcontent").show(); showParams.content = ‘<div class="tipcontent">‘ + showParams.content + ‘</div>‘; $(td).tooltip({ content: showParams.content, trackMouse: true, position: params.position, onHide: function () { $(this).tooltip(‘destroy‘); } , onShow: function () { var tip = $(this).tooltip(‘tip‘); //if (showParams.tipStyler) { // tip.css(showParams.tipStyler); //} if (showParams.content.length > 100) { tip.css({width:‘600px‘}); } if (showParams.contentStyler) { tip.find(‘div.tipcontent‘).css(showParams.contentStyler); } } }).tooltip(‘show‘); }; return jq.each(function () { var grid = $(this); var options = $(this).data(‘datagrid‘); if (!options.tooltip) { var panel = grid.datagrid(‘getPanel‘).panel(‘panel‘); panel.find(‘.datagrid-body‘).each(function() { var delegateEle = $(this).find(‘> div.datagrid-body-inner‘).length ? $(this).find(‘> div.datagrid-body-inner‘)[0] : this; $(delegateEle).undelegate(‘td‘, ‘mouseover‘).undelegate(‘td‘, ‘mouseout‘).undelegate(‘td‘, ‘mousemove‘).delegate(‘td[field]‘, { ‘mouseover‘: function (e) { //if($(this).attr(‘field‘)===undefined) return; // $(".tipcontent").hide(); $(".tooltip.tooltip-top").hide(); // $(".tooltip-arrow-outer").hide(); $(".tooltip-arrow").hide(); var that = this; var setField = null; if (params.specialShowFields && params.specialShowFields.sort) { for (var i = 0; i < params.specialShowFields.length; i++) { if (params.specialShowFields[i].field == $(this).attr(‘field‘)) { setField = params.specialShowFields[i]; } } } if (setField == null) { options.factContent = $(this).find(‘>div‘).clone().css({ ‘margin-left‘: ‘-5000px‘, ‘width‘: ‘auto‘, ‘display‘: ‘inline‘, ‘position‘: ‘absolute‘ }).appendTo(‘body‘).hide(); var factContentWidth = options.factContent.width(); params.content = $(this).text(); if (params.onlyShowInterrupt) { if (factContentWidth > $(this).width()) { showTip(params, this, e, grid); } } else { showTip(params, this, e, grid); } } else { panel.find(‘.datagrid-body‘).each(function() { var trs = $(this).find(‘tr[datagrid-row-index="‘ + $(that).parent().attr(‘datagrid-row-index‘) + ‘"]‘); trs.each(function() { var td = $(this).find(‘> td[field="‘ + setField.showField + ‘"]‘); if (td.length) { params.content = td.text(); } }); }); showTip(params, this, e, grid); } }, ‘mouseup‘: function(e) { if (options.factContent) { options.factContent.remove(); options.factContent = null; } }, ‘mouseout‘: function(e) { if (options.factContent) { options.factContent.remove(); options.factContent = null; } }, ‘mousemove‘: function(e) { if (options.factContent) { options.factContent.remove(); options.factContent = null; } } }); }); } else { if (options.factContent) { options.factContent.remove(); options.factContent = ""; options.factContent = null; } } }); }, /** * 关闭消息提示功能 * @param {} jq * @return {} */ cancelCellTip: function (jq) { return jq.each(function () { var data = $(this).data(‘datagrid‘); if (data.factContent) { data.factContent.remove(); data.factContent = null; } var panel = $(this).datagrid(‘getPanel‘).panel(‘panel‘); panel.find(‘.datagrid-body‘).undelegate(‘td‘, ‘mouseover‘).undelegate(‘td‘, ‘mouseout‘).undelegate(‘td‘, ‘mousemove‘).undelegate(‘td‘, ‘mouseup‘); }); } });
以上是关于datagrid使用和文字超出tip提示的主要内容，如果未能解决你的问题，请参考以下文章
Element-ui 之 解决表格中编辑与非编辑状态文字超出时弹出文字提示（利用Tooltip 组件）