EasyUI要点

EasyUI要点

一般在使用EasyUI的时候，需要先将对象转成jquery对象，再进行操作。

操作时需要导入的css和js

<!-- 引入easyui核心css -->
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">   
<!-- 引入easyui核心图标css -->
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">   
<!-- 引入jquery的核心js -->
<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>   
<!-- 引入easyui的核心js -->
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script> 
 <!--引入汉化js-->
<script type="text/javascript" src="/static/easyui/locale/easyui-lang-zh_CN.js"></script> 

layout布局

上左下右中，可以进行合并（去掉要合并的那部分），上面一般是logo之类，左边是菜单，下面是版权之类的，中和右一般合并起来作为主体

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>  

常用属性

fit:true,//自适应 
border:none //无边框

tabs选项卡

//tabs对应的jquery对象
var tt = $("#tt");
//判断参数对应的选项卡是否存在
tt.tabs("exists",参数)
//选中参数对应的选项卡
tt.tabs("select",参数)
//添加选项卡
tt.tabs("add",参数)

tree

url : "test.json" //源数据
animate : true //启用动画效果
lines : true //显示分层虚线

datagrid

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>  

datagrid的url中的字段需要和表格中的field一致

常用属性和方法

fit:true,//自适应
singleSelect:false,//单一选择
fitColumns:true,//列大小自适应，一般用百分比来控制列宽
url:"test.json",//源数据
pagination:true,//分页框
toolbar:"#tb"//工具栏


getSelections 返回选中的所有数据
getSelected 返回选中的第一条数据
reload 重新加载所有行 保持在当前页
load 重新加载第一页的所有行

字段中的自定义格式

<!--
如果我要上传头像，需要一个图像的路径，这个时候就要自定义格式来实现
在字段的后面加上formatter:自定义函数名
然后在JavaScript代码中写这个函数
-->
<script type="text/javascript">
/*
		value代表当前列对应的值
		row代表当前行对应的值
		index代表索引
	*/
	
	//处理头像
	function formatterHeadImage(value,row,index){
		/* console.debug(value);
		console.debug(row);
		console.debug(index); */
		//如果当前列有值，就添加img标签展示头像
		if(value){
			return "<img width='100px' heigth='50px' src='"+value+"'/>"
		}
	}
</script>
<th data-options="field:'headImage',width:'16%',align:'center',formatter:formatterHeadImage">头像</th>

messager消息框

常用方法

$.messager.alert(title,msg,icon,fn)
显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。 
代码示例：
$.messager.alert('我的消息','这是一个提示信息！','info');


$.messager.confirm(title,msg,fn)
显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。 
代码示例

$.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){
	if (r){
	    // 退出操作;
	}
});

dialog对话框

默认是打开的状态，可以通过设置defaults改变默认值

一般对话框都应该是模态框（在对话框期间无法点击其他），可以将modal属性默认设置为true

通用方法

dd.dialog("open");//打开窗口
dd.dialog("close");//关闭窗口
dd.dialog("setTitle","test");//设置标题
dd.dialog("resize",{//设置窗口大小
    width:300,
    height:250
})

combobox下拉框

valueField:'id' //对应option里面的value属性
textField:'name' //对应option展示的值
panelHeight:auto //自动调整高度

form表单

表单中验证的常用属性

required:true //必填
volidType:'Length[6,10]'//验证格式

方法

ff.form("submit",{
    //提交的地址
    url:"/data/save.json",
    //提交之前需要设置验证
    onSubmit:function(){
        //验证表单中设置了验证属性的字段
        return ff.form("validate");
    },
    //回调函数
    success:function(data){
        //返回的结果是一个字符串，转换成json对象
        var result = $.parseJSON(data);
        if(result.success){
            //关闭窗体
            dd.dialog("close");
            //重新加载页面
            dg.datagrid("reload");
        }
    }
});