1. EasyUI常用組件的基本用法
1.1 layout布局
<!-- 布局面板 大小自適應父容器 --> <div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;"> <!-- 區域面板 --> <div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div> <div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div> <div data-options="region:'east',title:'東',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div> <div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div> <div data-options="region:'center',title:'中',iconCls:'icon-reload',collapsible:false" style="padding:5px;background:#eee;"></div> </div>
Js實現頁面小功能
<script type="text/javascript"> //瀏覽器加載web頁面時觸發 $(function() { //將北邊面板折疊，字符串雙引單引均可 $('#cc').layout('collapse', 'north'); //休息3秒 window.setTimeout(function() { //將南邊面板折疊，字符串雙引單引均可 $('#cc').layout('collapse', 'south'); }, "3000"); }); </script>
實現頁面嵌套
<body class="easyui-layout"> <!-- 北 --> <div data-options="region:'north'" style="height:150px"></div> <!-- 中 --> <div data-options="region:'center'"> <!-- 將中拆分邊西和中二部份 --> <!-- center里增加新的嵌套時，需要將新的嵌套內容包含在新的div里 聲明class為easyui-layout fit為true <div class="easyui-layout" data-options="fit:true"> </div> --> <div class="easyui-layout" data-options="fit:true"> <!-- 西 --> <div data-options="region:'west'" style="width:200px">西部</div> <!-- 中 --> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <!-- center里的div要求必須有一個設置寬或高，否則顯示不出 --> <div data-options="region:'north'" style="height:200px">中北部</div> <div data-options="region:'center'"></div> </div> </div> </div> </body>
1.2 accordion 分類
<!-- 容器 --> <div data-options="border:true,animate:true,multiple:false,selected:-1" id="aa" class="easyui-accordion" style="width:300px;height:500px;"> <!-- 面板 --> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">內容1</div> <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">內容2</div> <div title="Title3" data-options="iconCls:'icon-reload',collapsible:true">內容3</div>
</div>
幾點屬性：
增加一個4號面板並。。。。。
<script type="text/javascript"> $(function() { //增加一個面板 $("#aa").accordion("add", { "title" : "Title4", "content" : "內容4", "selected" : false, "iconCls" : "icon-search" }); //休息3秒 window.setTimeout(function() { //刪除4號面板 $("#aa").accordion("remove", 3); //取消選擇1號面板 $("#aa").accordion("unselect", 0); }, "3000"); }); </script>
1.3 linkbutton 按鈕
<a id="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-add'"> 增加 </a> <a id="btn-find" class="easyui-linkbutton" data-options="iconCls:'icon-search'"> 查詢 </a> <a id="btn-update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"> 修改 </a> <a id="btn-delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"> 刪除 </a> <script type="text/javascript"> /* $("#btn-add").click(function(){ //將該按失效 $("#btn-add").linkbutton("disable"); }); $("#btn-add").dblclick(function(){ //將該按失效 $("#btn-add").linkbutton("disable"); }); */ //參數一：字符串類型的事件，多個事件之間通過空格分隔，事件名稱符合jquery事件名寫法 //參數二：處理函數 $("#btn-add").bind("click dblclick", function() { //將該按失效 $("#btn-add").linkbutton("disable"); }); </script>
1.4 tabs 選項卡
<!-- 容器面板 --> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="plain:false,border:true,tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-remove', handler:function(){ alert('刪除') } }],selected:-1"> <!-- 選項卡面板 --> <div title="Tab1" data-options="closable:true" style="padding:20px"> tab1</div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">tab2</div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">tab3</div> </div>
頁面加載時增加一個tab4（屬性用 Json 格式）
<script type="text/javascript"> $(document).ready(function(){ $("#tt").tabs("add",{ "title":"Tab4", "content":"tab4", "selected":false, "closable":true }); }); </script>
1.5 pagination（分頁）
<!-- total：記錄總數100 pageSize：每頁顯示多少條記錄5 pageNumber：當前頁號1 pageList:[5,10,15]表示可供選擇中每頁顯示多少條記錄， 注意：pageSize的值必須是pageList數組值之一 --> <div id="pp" class="easyui-pagination" data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'頁'" style="background:#efefef;border:1px solid #ccc;width:400px"> </div>
該功能實現
<script type="text/javascript"> $("#pp").pagination({ //pageNumber當前頁號，例如1 //pageSize獲取多少條記錄，例如：5 //以上二個參數，需要誰，就接收誰，不一定二個都同時出現，參數名可以任意 "onSelectPage":function(pageNumber,pageSize){ alert(pageNumber + ":" + pageSize); } }); </script>
實現中文顯示可通過引入 easyui-lang-zh_CN.js 文件
