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格式書寫，以免造成執行偏差；