文档章节

easyui的menu接收后台集合,并且根据集合利用appendItem动态生成菜单项,判断菜单项的字数大于指定长度,则多余字符以。。。显示,并且悬浮提示

文文1
 文文1
发布于 07/04 18:55
字数 547
阅读 55
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

JSP:

<a id="bb" href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_stMenu222',iconCls:'icon-cologne-sign-out'" >导出</a>
<div id="aaa" style="width: 100px; display: none;">
	<div id='mdm0'>到清单
	</div>
</div>

JS:

var url="...发送post请求";
$.post(url,data,function(data){
	if (data.rows && data.total>0){//每个菜单项是一个row
		if($('#bb').length > 0){
			var menubutton = $($('#bb').menubutton('options').menu);
			var menu = menubutton.menu('findItem','到'+costTypeNameArr[index]);//增加父菜单项
			for(var i=0;i<data.total;i++)
			{
                //循环增加子菜单项
				menubutton.menu('appendItem',{
					parent:menu.target,//指定父菜单项
					text:data.rows[i].name,
					iconCls: 'icon-hamburg-docs',
					onShow:formatterMenuItemFun(data),
					onclick:(function(i){
						return function(){
							alert(i);
						};
					})(i)
				});
			}
		}
	}
});

var initItemFlag = false;//判断是否已经初始化,要不每次显示菜单都会切割超出长度的字符串
var isSetMaxWeight = null;
function formatterMenuItemFun(data){
	if(initItemFlag){//只需要初始化一次
		return false;
	}
	initItemFlag = true;
	setTimeout(function(){
		var $itemsParent = $("#aaa").nextAll('div.menu');//查找所有菜单项集合的父节点
		var $menuItems = $itemsParent.find('div.menu-text');//查找所有菜单项
        var maxLength = 15;//设置需要截取的字符串以“。。。”显示的最大长度
		$menuItems.each(function(i,e){
			var text = $(this).text();
			text = detialFormatter(text, maxLength);//指定菜单显示文字最大为15
			$(this).html(text);
		});
        //判断是否需要重新设置菜单面板的宽度
		var setMaxWeightFlag = isMaxWeight(data.rows,length,maxLength);
		if(setMaxWeightFlag){
			$itemsParent.width('auto');
			$itemsParent.next().width('auto');
		}
	},10);
}

/**
 * 设置每个菜单项的文字和悬浮提示内容
 * @param text 菜单项的文字
 * @param length 超出length则以。。。替换
 * @returns
 */
function detialFormatter(text,length){
	var abValue = text;  
	var content = "";
    if (text.length>=length) {  
        abValue = text.substring(0,length) + "...";  
        content = '<span title="'+text+'"  class="easyui-tooltip">'+abValue+'</span>';
    }else{
    	content = abValue;
    }  
    return content;  
}

/**
 * 是否需要设置菜单项的最大长度
 * @param items 菜单项集合
 * @param length 判断是否超出length长度,如果超出,则需要指定重新设置菜单面板宽度为auto(原来的长度已经为auto)
 * @returns
 */
function isMaxWeight(items,length){
	var setMaxWeightFlag = false;
	for(var i=0;i<items.length;i++){
		var text = items[i].name;
		if (text.length>=length) {  
			setMaxWeightFlag = true;
			break;
		} 
	}
    return setMaxWeightFlag;  
}

显示效果:(鼠标移到。。。的文字上面有悬浮效果,截图的时候显示不出来。。。)

文文1
粉丝 26
博文 523
码字总数 173865
作品 0
长沙
程序员
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.3K
6
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.8K
18
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
576
1
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.2K
16
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
21

没有更多内容

加载失败,请刷新页面

加载更多

深入分析ES存储原理

es写数据 es写数据的过程 1、客户端选择一个 node 发送请求过去,这个 node 就是 coordinating node(协调节点)。 2、coordinating node 对 document 进行路由,将请求转发给对应的 node(有...

tankXiao
5分钟前
0
0
【1121】shell(下)

【1121】shell(下) 5.39 函数 5.40 shell 数组 数组赋值 数组的删除 数组分片 数组替换 5.39 函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直...

飞翔的竹蜻蜓
6分钟前
0
0
在JavaScript中定义枚举的首选语法是什么? [关闭]

问题: What is the preferred syntax for defining enums in JavaScript? 在JavaScript中定义枚举的首选语法是什么? Something like: 就像是: my.namespace.ColorEnum = { RED : 0,......

技术盛宴
27分钟前
14
0
linux 手动挂载硬盘没有移到回收站解决方法

linux 手动挂载硬盘没有移到回收站解决方法 修改挂载硬盘的文件夹权限为当前用户即可

小熊宝宝
32分钟前
24
0
spring集成kafka

1、引入依赖jar包 <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId></dependency> 2、配置kafka信息 spring: kafka: bootstra......

简到珍
35分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部