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