easyUI使用摘要

easyUI的编码方式主要有三种

一、在html代码中声明，在js代码中细化处理

<!--此处表示声明了一个Table容器-->
<table id="qualificationGrid"></table>
<!--接下来在js代码中来细化Table的一些属性、方法-->
$('#qualificationGrid').datagrid({
url:WEB_ROOT + '/quaData/list.jhtml',
//toolbar:toolbar,工具条
fitColumns:true,
resizable:true,
rownumbers:true,
//width:'100%',
//height:'100%',
pagination:true,
fit:true,
singleSelect:true,
pageSize:20,
method:'post',
striped:true,
loadMsg:'请稍后...',
columns:[
[
{field:'qualificationId', title:'用户Id号', hidden:true},
{field:'name', title:'姓名', width:30},
{field:'sex', title:'性别', width:20, align:'center'},
{field:'birthday', title:'出生日期', width:30, align:'center'},
{field:'idCard', title:'身份证号', width:50, align:'center'},
{field:'qualificationNum', title:'资格证编号', width:50, align:'center'}
]
]
});

二、直接在div中进行声明、初始化、事件监听等

<div id="quaWind" class="easyui-window" modal="true"
collapsible="false" iconCls="icon-save" title="更新用户信息"
closed="true"
style="width:600px;height:275px;padding:20px;"
onClose="function(){$('#quaForm').form('clear');}">
</div>
//当然调用的时候还是一样的
$("#quaWind").window("open");
$("#quaWind").window("close");

三、虽然可以使用，但是不推荐，以data-options的方式初始化，至于原因在下面的注意事项中会提到。

<input id="sexCombo" type="text" name="sex"
class="easyui-combobox"
data-options="
valueField: 'value',
textField: 'label',
editable:false,
required:'required',
data: [{
label: '女',
value: '0'
},{
label: '男',
value: '1'
}]"/>

1、easyui的两次请求问题：

对于datagrid的两次请求主要是因为在div中

<table id="queryUserInfoGrid" class="easyui-datagrid"></table>

添加了class，这个时候当加载到该div时，就会读取定义的URL，这是第一次请求;

而在js中初始化该datagrid的时候又会被读取一次，此为第二次。

解决方法为去掉div中的class；

对于tabs也会在页面加载的时候出现两次请求的情况，那么添加属性closed：true即可解决，这是表名初始化的时候这个panel是关闭的，他的加载是在iframe初始化的时候自行进行

2、对于某些版本的jquery框架，可能不支持data-options，那么在执行方法的时候就会有偏差，所以在easyui中最好使用属性=‘值’的形式书写，或者使用json格式书写，以免造成执行偏差；