EasyUi之DataGrid(数据表格)

本文介绍了EasyUi的DataGrid组件,它是一款轻量级且功能强大的表格展示工具,支持选择、排序、分组和编辑数据。文章通过实例展示了如何从HTML元素创建DataGrid,如何实现查询功能,包括从数据库获取数据并展示在表格中,还涉及到了模糊查询的实现。最后,作者对分享的内容进行了简要总结。
摘要由CSDN通过智能技术生成

简介

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

使用案例

1、从现有的表格元素创建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>  

通过

标签创建DataGrid控件。在表格内使用
标签定义列。

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

2、使用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'}    
    ]]    
});  

json文件在我们之前在官网下载的文件中
在这里插入图片描述
将它放在与jsp文件同级的目录下

实现查询功能

查询数据库的数据将它放到我们的数据表格中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值