EasyUI常用总结

EasyUI 常用总结

treegrid

$('#treeGrid').treegrid({
url : 'sys/resource/treeGrid',
idField : 'id',
treeField : 'name',
frozenColumns : [ [
{
field : 'id',
title : '编号',
width : 80
}
...
] ],
columns : [ [{
width : '150',
title : '上级资源',
field : 'pid'
},
...
{
field : 'resourcetype',
title : '资源类型',
width : 100,
formatter : function(value, row, index) {
switch (value) {
case 1:
return '按钮';
case 0:
return '菜单';
}
}
} ,
toolbar : '#toolbar'
});

<table title="文件目录" class="easyui-treegrid" style="width:700px;height:250px"
data-options="url: 'queryFileTree.do',
method: 'get',
rownumbers: true,
idField: 'fullPath',
treeField: 'label'">
<thead>
<tr>
<th data-options="field:'label'" width="220">label</th>
<th data-options="field:'fullPath'" width="150">fullPath</th>
<th data-options="field:'type'" width="100" align="center">type</th>
</tr>
</thead>
</table>

[ { idFieldName:val1,treeFieldName:val2,...,children:[...] }, {...},... ]

tooltip

$("#controlId").tooltip({
position: 'left|right|top|bottom',
content: 'html代码',//无该属性，默认显示控件title值
trackMouse:true,//跟随鼠标移动
onShow: function () {
//自定义tooltip样式（最大宽度为500px，超过则自动换行）
$(this).tooltip('tip').css({
maxWidth: '500px',
wordWrap: 'break-word',
wordBreak: 'normal'
});
}
});

<span class="easyui-tooltip"
data-options="trackMouse:true,onShow:function () {...}"
title="提示内容">内容</span>

layout

$('#layout').layout('collapse','west');