EasyUI 常用总结

• treeGrid
• tooltip
• layout

treegrid

• js代码：

$('#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'        });

• html代码：

<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>

• json数据格式：[ { idFieldName:val1,treeFieldName:val2,...,children:[...] }, {...},... ]
• 节点折叠: 设置节点状态state=’closed|open’

tooltip

• js代码：

 $("#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'                 });            }        });

• html代码

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

layout

• 折叠左侧导航: $('#layout').layout('collapse','west');