行にいくつかのメモが表示されている列があります。メモが大きいので、コントローラー自体のメモを短くして、aspxページに送信しました。私が達成したいのは、グリッド行の上にマウスを置いて(または可能であれば正確にセルに)ツールチップの形式で完全なメモを表示したいということです。これを達成する方法はありますか?どんな助けでも大歓迎です。前もって感謝します。
質問する
16636 次
3 に答える
13
誰にでも役立つ可能性があるため、回答を投稿します。
これを行った後、私はそれを機能させました...
columns.Bound(p => p.partialNotes).Title("Description").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:left" }).Width("8%").HtmlAttributes(new { title = "#= completeNotes #" });
HtmlAttributes(new { title = "#= completeNotes #" })を追加しました
これで、[説明] 列のデータの上にマウスを置くと、完全なメモがツール ヒントとして表示されます。
于 2012-09-21T07:04:44.670 に答える
3
サードパーティのウィジェットを使用することも可能です。このような列ヘッダーにqtipのヒントを追加しました
KendoUI グリッド列配列アイテム
{
field:"property",
headerTemplate:kendo.template($("#h_Entity_property").html())
},
ヘッダー テンプレート
<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.css"/>
<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/util/qtip.util.css"/>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Dialogues.js"></script>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Qtip2Util.js"></script>
<script type="text/x-kendo-template" id="h_Entity_property">
Property
<img onclick="Qtip.local(this, 'i_Entity_property')" src="img/info.gif"/>
<div id="i_Entity_property" style="display:none;">
Elaborate a bit...
</div>
</script>
ツールチップジェネレーター
var Qtip = {
local:function (element, contentId) {
$(element).qtip($.extend({}, qTipSharedOptions, {
content:{
text:$('#' + contentId).html(),
title:{
text:' ',
button:true
}
}
}
));
},
...
};
var qTipSharedOptions = {
position:{
at:'top right', // Position the tooltip above the link
my:'bottom left',
viewport:$(window), // Keep the tooltip on-screen at all times
effect:false // Disable positioning animation
},
style:{
classes:'ui-tooltip-tipsy ui-tooltip-shadow'
},
show:{
ready:true,
event:false,
solo:true // Only show one tooltip at a time
},
hide:false
};
于 2012-11-01T03:27:59.680 に答える
0
あなたは以下のようにすることができます:
$("#Kendo-grid-div-id").kendoTooltip({
filter: "td:nth-child(2),td:nth-child(3)", //comma separated multiple columns
position: "bottom", //possible values: bottom,top,left,right,center
content: function(e){
var content = e.target.html();
return content;
}
}).data("kendoTooltip");
于 2019-12-19T12:20:42.773 に答える