easyUI——DataGrid&&Form

最新推荐文章于 2024-04-28 15:06:39 发布

原创最新推荐文章于 2024-04-28 15:06:39 发布 · 438 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui #前端 #javascript

easyui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用$.fn.form进行表单操作，包括设置默认值、验证提交和DataGrid组件的使用，展示了如何创建、配置及与服务器交互。同时涵盖了DataGrid的功能如数据展示、筛选和编辑，适合快速开发和简化工作。

Form

1.概述：

使用$.fn.form.defaults重写默认值对象

form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

2.用法：

创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。

<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>

做一个提交操作。

$('#ff').form('submit', {   
    url:...,   
    onSubmit: function(){   
        // do some check   
        // return false to prevent submit;   
    },   
    success:function(data){   
        alert(data)   
    }   
});

提交额外的参数。

$('#ff').form('submit', {    
    url:...,    
    onSubmit: function(param){    
        param.p1 = 'value1';    
        param.p2 = 'value2';    
    }    
});

处理提交响应

提交一个ajax表单是非常简单的。用户可以在提交完成后获取响应数据。注意，响应的数据是来自服务器的原始数据。A parse action to the response data is required to get the correct data.

例如，响应数据假设为JSON，一个典型的响应数据格式如下：

{   
    "success": true,   
    "message": "Message sent successfully."  
}

现在在'success'回调函数中处理JSON字符串。

$('#ff').form('submit', {   
    success: function(data){   
        var data = eval('(' + data + ')');  // change the JSON string to javascript object   
        if (data.success){   
            alert(data.message)   
        }   
    }   
});

DataGrid

1.概述

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

2.使用案例

从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

<table class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'code'">编码</th>  
            <th data-options="field:'name'">名称</th>  
            <th data-options="field:'price'">价格</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>001</td><td>名称1</td><td>2323</td>  
        </tr>  
        <tr>  
            <td>002</td><td>名称2</td><td>4612</td>  
        </tr>  
    </tbody>  
</table>

通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<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>

此外，也允许使用Javascript去创建DataGrid控件。

<table id="dg"></table>  
$('#dg').datagrid({   
    url:'datagrid_data.json',   
    columns:[[   
        {field:'code',title:'代码',width:100},   
        {field:'name',title:'名称',width:100},   
        {field:'price',title:'价格',width:100,align:'right'}   
    ]]   
});

使用一些参数查询数据。

$('#dg').datagrid('load', {   
    name: 'easyui',   
    address: 'ho'  
});

改变的数据保存到服务器之后，刷新当前数据。

$('#dg').datagrid('reload');    // 重新载入当前页面数据