Easyui combobox下拉项过长的处理

原文链接： http://www.cnblogs.com/victor-grace/p/7253630.html

  在easyUI中，datagrid中的列内容过长时，可以设置属性来进行个性设置，比如超过多少字之后用“...”代替。但是在combobox中没有该属性，那么应该如何处理呢？

  解决思路：

    在加载完下拉框内容时，使用combobox中的formatter函数进行数据处理。处理数据时，根据其长度进行截取，当超过自定义的长度之后，再进行截取。

  实现代码： 

$("#ClassPaperName").combobox({
		url : 'queryAllPaper',
		method : 'post',
		valueField : 'id',
		textField : 'examinationName',
		groupField : 'group',
		panelHeight : 200,
		editable : false,
		onLoadSuccess : function(data) {
		    if (data.length > 0) {
			// 设置默认选择第一套试卷
			$('#ClassPaperName').combobox('select',	data[0].id);
		    }
		},
		formatter : function(row) {
		   // 试卷名称过长时截取前一段，剩余的使用..替代
		   if (row.examinationName != null) {
			if (row.examinationName.length > 15) {
				var opts = $(this).combobox('options');
				var examinationName = row[opts.textField];

				row.examinationName = examinationName.substring(0, 15)+ "...";
				// 将截取到的内容及全部内容设置到tip提示框中，
                                //title表示提示框的内容，是截取前的值；
                                //li中的value值表示下拉项的值，是截取后的值
				
				return '
'
					+ row[opts.textField] + '
';
				}
			}
			return '
' + row.examinationName
					+ '
';

		},
						
	});

    也可以为提示框添加样式效果：     

onLoadSuccess : function(data) {
	$(".tip").tooltip({
	position : 'right',
	onShow : function() {
	  $(this).tooltip('tip').css({									
		width : 'auto',

	  });
	}
	})
}

   最终显示效果：

     

转载于:https://www.cnblogs.com/victor-grace/p/7253630.html