easy ui in action 两个月总结

定义： jquery easy ui 是以jq为基础一个前端ui框架，通过easy ui相关插件的混合使用，可以高效搭建出一个漂亮的系统管理平台，或门户网站。与此框架相同类型的前端框架有bootstrap,jquery ui ,ext js等。

jquery ui 与 jquery easy ui 的不同之处：在于，jq ui 可以使用的组件相对比较多，比如他还提供了门户的搭建框架，管理系统框架，比easy ui 多了些选择，但应该会比较重。

easy ui 的使用并不复杂，当初使用的时候只是简单看一下文档就可以立刻上手操作。前提是要有一定的js基础与jq基础，这也是我需要恶补的地方，有一些使用因为一些语法问题而导致了花费很长的时间。

每个easy ui 插件都有三个东西

属性：决定了插件的表现出来的东西
在标签里面使用data-options属性定义属性，这时，描述的时候按照“属性名：属性值”的格式，使用”,”隔开。

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>  

而当你使用js描述一个组件的时候，你只需要查看相关文档，然后把属性名，属性值写到对应的json里面就行，格式按照json格式

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});  

事件：是当插件被触动的时候被调用的方法
事件可以看作一个特殊的属性，后面可以带一个方法体
在标签里面使用data-options属性定义时间，这时，描述的时候按照“事件：方法体”的格式，使用”,”隔开，与属性写到一起。

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

而当你使用js描述一个事件的时候，你只需要查看相关文档，然后把事件名，方法体写到对应的json里面就行，格式按照json格式

$('#dg').datagrid({
    onDblClickCell: function(index,field,value){
        $(this).datagrid('beginEdit', index);
        var ed = $(this).datagrid('getEditor', {index:index,field:field});
        $(ed.target).focus();
    }
});

方法：是用户插件之间交互调用的接口，调用方法的语法：

$('selector').plugin('method', parameter); 

当参数为空时，可以不填入参数如：

$('selector').plugin('method');

$('#ff').form('load','get_data.php');  // 读取表单的URL

使用的时候直接参考文档

里面有详细的例子，只要我们掌握了使用的方法，立即可以上手，但是如果构建一个漂亮的网页，就需要查查demo或者问问前端了。

个人的学习导图：