（札记）EasyUI 基本使用方法

逃离我推掉我的手 2022-08-06 06:14 11阅读 0赞

先说明：EasyUI是基于jQuery框架来封装的，离开jQuery的话，EasyUI就玩不转了。

而jQuery最核心的功能就是选择器！

--------------------

EasyUI中，相关 方法的使用 ：

<table style=""> 
 <tbody style=""> 
 <tr style=""> 
 <td style=""> 
 <div style=""> 
 例子 
 
 </div> </td> 
 <td style=""> 
 <div style=""> 
 $ 
 ( 
 '#cc' 
 ). 
 layout 
 ( 
 'collapse' 
 , 
 'north' 
 );//折叠north面板 
 
 </div> </td> 
 </tr> 
 <tr style=""> 
 <td style=""> 
 <div style=""> 
 格式 
 
 </div> </td> 
 <td style=""> 
 <div style=""> 
 使用jq获取相关id.要控制的组件('方法','参数'); &nbsp; &nbsp;&nbsp; 
 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

--------------------

EasyUI中，相关 属性和事件 的使用 ：

例子 格式 var datagrid = $('#datagrid').datagrid({
                
    url:"testCm!listTest.action", idField:'row',//多选时，通过row记录行号 toolbar:"#toolbar",//工具栏调用 loadMsg:'正在加载数据..',
    //双击事件 'onDblClickRow':function (Index, row){
                
    editUser();
    }
    }); 使用jq获取相关id.要控制的组件名({       属性名：参数,       '事件名'：function(参数){              //相关操作        } })

在配置相关方法或者属性时，要注意区分该方法是属于html、css、js、jq、easyui中的哪种？

<table style=""> 
 <tbody style=""> 
 <tr style=""> 
 <td style=""> 
 <div style="">
 例子 
 </div> </td> 
 <td style=""> 
 <div style="">
 说明 
 </div> </td> 
 </tr> 
 <tr style=""> 
 <td style=""> 
 <div style=""> 
 <pre style="">var&nbsp;datagrid&nbsp;=&nbsp;$('#datagrid').datagrid({ url:"testCm!listTest.action",//标号1 fit:true,//自动填充满 border:false,//去除边框 pagination:true,//分页栏 pageSize:20,//默认选择项 pageList:[10,20,50,100],//下拉框数值 rownumbers:true,//是否显示行号 fitColumns:false,//是否让浏览器自动控制列宽 singleSelect:false,//是否单选 idField:'row',//多选时，通过row记录行号 toolbar:"#toolbar",//工具栏调用 loadMsg:'正在加载数据..', //列模型 columns:[[ { field:'row',checkbox:true}, { field:'id',title:'ID',width:180,align:'center'}, { field:'passtime',title:'Passtime',width:130,align:'center',sortable:true, formatter:function(value,rowData,rowIndex){ //标号2 var&nbsp;Timestamp&nbsp;=&nbsp;new&nbsp;Date(value).toLocaleDateString();//标号3</pre> 
 <pre style="">//将时间格式转换成本地格式 return&nbsp;Timestamp; } }, { field:'cpys',title:'cpys',width:80,align:'center'}, { field:'cphm',title:'cphm',width:80,align:'center'}, { field:'csys',title:'csys',width:80,align:'center'}, { field:'ckFlag',title:'ckFlag',width:80,align:'center', formatter:function(value){ if(value)&nbsp;return&nbsp;"&lt;font color='green'&gt;通过&lt;/font&gt;";//标号4</pre> 
 <pre style="">//格式化内容，true-&gt;通过，false-&gt;禁止，并配上颜色 else return&nbsp;"&lt;font color='red'&gt;禁止&lt;/font&gt;"; }} ]], //双击事件 'onDblClickRow':function&nbsp;(Index, row){ //标号5 editUser(); } });</pre> 
 
 </div> 
 <div style=""> 
 
 </div> 
 <div style="">
 例2： 
 </div> 
 <div style=""> 
 &lt; 
 div&nbsp; 
 id 
 ="win"&nbsp; 
 class 
 ="easyui-dialog" 
 style 
 =" 
 width 
 : 
 330 
 px 
 ; 
 height 
 : 
 250 
 px 
 " 
 </div> 
 <div style=""> 
 <pre style="">data-options="iconCls:'icon-save',modal:true,buttons:[{ text:'保存', handler:function(){saveUser();} },{ text:'关闭', handler:function(){closeUser();} }]"&nbsp;&gt;</pre> 
 <pre style="">&lt;/div&gt;</pre> 
 <pre style="">$('#win').window('close');//标号6</pre> 
 
 </div> </td> 
 <td style=""> 
 <div style=""> 
 <ul style=""> 
 <li style="">//标号1</li> 
 </ul> 
 <div style=""> 
 此处的url这些属性是属于datagrid本身的属性 
 </div> 
 <div style=""> 
 
 </div> 
 <div style=""> 
 
 </div> 
 <ul style=""> 
 <li style="">//标号2</li> 
 </ul> 
 <div style=""> 
 此处的formatter、firld这些属性属于列模式的 
 </div> 
 <div style=""> 
 
 </div> 
 <ul style=""> 
 <li style="">//标号3</li> 
 </ul> 
 <div style=""> 
 new Date()和toLocaleDateString()是属于javascript的方法 
 </div> 
 <div style=""> 
 
 </div> 
 <ul style=""> 
 <li style="">//标号4</li> 
 </ul> 
 <div style=""> 
 &lt;font&gt;是属于html的标签 
 </div> 
 <div style=""> 
 color=''是属于css的样式 
 </div> 
 <div style=""> 
 
 </div> 
 <ul style=""> 
 <li style="">//标号5</li> 
 </ul> 
 </div> 
 <div style=""> 
 ' 
 onDblClickRow 
 '是属于datagrid的方法 
 </div> 
 <div style=""> 
 
 </div> 
 <div style=""> 
 
 </div> 
 <div style=""> 
 <ul style=""> 
 <li style="">//标号6</li> 
 </ul> 
 </div> 
 <div style="">
 比如在&lt;body&gt;中创建了一个dialog面板， 
 </div> 
 <div style="">
 在 
 <pre style="">&lt;script&nbsp;type="text/javascript"&gt;</pre> 
 <pre style="">中使用window的组件来控制dialog面板是可以的。</pre> 
 <pre style="">原因是因为dialog面板依赖于window的面板，所以</pre> 
 <pre style=""><pre style="">$('#win').window('close');</pre>这句语句还可以写成</pre> 
 <pre style=""><pre style="">$('#win').dialog('close');</pre></pre> 
 </div> 
 <div style=""> 
 
 </div> </td> 
 </tr> 
 </tbody> 
</table>