easyUI基础知识总结

方法

调用方法的语法：
$(‘selector’).plugin(‘method’, parameter);

解释：

• selector 是jQery对象选择器。
• plugin 是插件的名称。
• method 是相应插件现有的方法。
• parameter 是参数对象，可以是一个对象、字符串等。

下载程序库

并导入EasyUI的CSS和Javascript文件到您的页面。

    <!-- jquery核心库 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
    <!-- easyui核心库 --> 
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <!-- easyui核心UI文件 css -->  
    <link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- easyui图标 -->
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css"/>

一旦你导入了EasyUI必须的文件，你就可以通过标记或Javascript定义一个EasyUI组件。例如：定义一个带可折叠功能的面板，你需要写的HTML代码如下：

  // title定义在面板头部显示的标题文本，collapsible定义是否显示可折叠按钮，cionCls设置一个16x16图标的CSS类ID显示在面板左上角
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
            title="My Panel" iconCls="icon-save" collapsible="true">   
        The panel content    
    </div>  

当通过标记创建一个组件的时候从1.3版开始’data-options’属性可以用来支持HTML5兼容属性名称，data-options就是来定义各种组件的样式和内容、事件的。所以你可以改写上面的代码为：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">   
    The panel content    
</div>  

下面的代码演示了如何创建一个组合框，并绑定onSelect事件。

<input class="easyui-combobox" name="language"   
        data-options="    
            url:'combobox_data.json',    
            valueField:'id',    
            textField:'text',    
            panelHeight:'auto',    
            onSelect:function(record){    
                alert(record.text)    
            }" />  

JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的)

EasyUI体系结构

 EasyUI所有的插件主要分为六大部分。Base基础、Layout布局、Menu&Button、Form表单、Window窗口、DataGrid and Tree表格和树、Extension扩展。从最基础的开始先掌握EasyUI基础部分。Base部分包含了八个基础插件分别为:

parser(解析器)
easyloader(加载器)
draggable(拖动)
droppable(放置)
resizable(大小调整)
pagination(分页)
progressbar(进度条)
searchbox(搜索框)