在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 '<li title="' + examinationName
+ '" class="tip">'
+ row[opts.textField] + '</li>';
}
}
return '<li title="' + row.examinationName
+ '" class="tip">' + row.examinationName
+ '</li>';
},
});也可以为提示框添加样式效果：
onLoadSuccess : function(data) {
$(".tip").tooltip({
position : 'right',
onShow : function() {
$(this).tooltip('tip').css({
width : 'auto',
});
}
})
}最终显示效果：
转播
