JQuery EasyUI的常用组件

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，该框架提供了创建网页所需的一切，帮助您轻松建立站点。本文和大家分享的就是JQuery EasyUI常用组件相关内容，一起来看看吧，希望对大家学习jquery有所帮助。
　　注：本次介绍的JQuery EasyUI版本为1.5版。
　　一.表单
　　form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
　　用法：
　　使用form标签创建
　　<form id="ff" method="post">   
    <div>   
        <label for="name">Name:</label>   
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
    </div>   
    <div>   
        <label for="email">Email:</label>   
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />   
    </div>     
</form>
　　使用jquery实现表单的异步提交：
　　$('#ff').form({
　　url:...,
　　onSubmit: function(){
　　//提交表单时执行的操作
　　},
　　success:function(data){
　　//提交成功后返回的结果
　　}
　　});    // 提交表单
　　$('#ff').submit();
　　通过以上操作就可以使用form表单将数据提交到后台。
　　二.数据表格（数据表格）
　　DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
　　用法：
　　html标签：
　　<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>
　　用jquery接受数据：
　　$('#dg').datagrid({
　　url:'datagrid_data.json',
　　});
　　就可以将后台数据以表格的方式展现到前台。
　　三.可编辑数据表格
　　首先需要加载edatagrid扩展，加载完成后才能使用。
　　在HTML标签里面创建数据表格：
　<table id="tt" style="width:600px;height:200px"   
        title="Editable DataGrid"   
        singleSelect="true">   
    <thead>   
        <tr>   
            <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>   
            <th field="productid" width="100" editor="text">Product ID</th>   
            <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>   
            <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>   
            <th field="attr1" width="150" editor="text">Attribute</th>   
        </tr>   
    </thead>   
</table>
　　jquery操作：
　　$('#tt').edatagrid({
　　url: 'datagrid_data.json',
　　saveUrl: ...,
　　updateUrl: ...,
　　destroyUrl: ...
　　});
　　就可以通过双击修改表格数据。
　　常用方法：
　　$('#tt').edatagrid("saveRow");//保存编辑行并发送到服务器
　　$('#tt').edatagrid("destroyRow");//销毁当前选择的行
　　$('#tt').edatagrid("addRow");//添加一个新的空行
　　以上就是jquery easyui的一些常用组件。


来源：博客园