jquery easyui根据需求二次开发记录

运用easyui进行开发时新添加的个性化功能和对部分easyui自身bug的修复,由于easyui的半开源,有些还是有难度的,记录下来方便日后需要时查阅。

1、tree需要显示多个图标

实际需求:设备树上节点需搁三个图片,分别标识运行状态、告警状态、设备类型

解决方法:给tree的iconCls传入一个数组,分别是各状态下的class(css),然后要改动easyui关于tree节点组装部分的代码

if(item.iconCls ){
cc.push("<span class=\"tree-icon tree-folder "+(item.iconCls?item.iconCls:"")+"\"></span>");
};

这里增加对item.iconCls的判断稍作改动即可

2、treegrid各行记录定制是否需要checkbox

实际需求:设备树上只能让某些类型的设备添加到主面板上

解决方法:改动easyui关于treegrid的节点组装函数renderRow,if(col.checkbox){...}改为

if(col.checkbox && col.checkbox(row[_7ca],row)){...}

这样就可以类似formatter一样可以附加函数实现定制。

页面代码这样写:

<th data-options="field:'ck',checkbox:showCheck"></th>  
function showCheck(value,row){
if(row.type == 1){
return true;
} else{
return false;
}
}

3、propertyGrid name/value的汉化

在easyui/local/easyui-lang-zh_CN.js里增加

if($.fn.propertygrid){
$.fn.propertygrid.defaults.columns[0][0].title = "<span style='color: #000000;'>属性名</span>"; // 对应Name
$.fn.propertygrid.defaults.columns[0][1].title = "<span style='color: #000000;'>属性值</span>"; // 对应Value
}

4、easyui datagrid已选中行再点击操作按钮无效的bug

jquery easyui根据需求二次开发记录

原因分析:easyui datagrid在点击行中的按钮时,由于会先进入到点击行的事件处理中,对行进行反选操作(如行已选中则变为未选中),就不会触发按钮的点击事件。

解决方法:在按钮的小图片img上增加 class='noremoveselected',在grid的click事件里:

if(tr.hasClass("datagrid-row-selected") )

改为

if(tr.hasClass("datagrid-row-selected") && !tt.hasClass("noremoveselected")){...}

5、easyui combo的高度默认为自适应

combo.default中的panelHeight:200改为panelHeight:"auto"

上一篇:Spring4+Hibernate4事务小记


下一篇:JS判断终端