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格式书写，以免造成执行偏差；