在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',
});
}
})
}
最终显示效果: