定义: 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或者问问前端了。
个人的学习导图: