easyui_快速入门04_easyui-datagrid options-CSDN博客

本文链接：https://blog.csdn.net/m0_67888923/article/details/124636023

本文详细介绍了EasyUI中的DataGrid组件，包括其作为表格展示数据的基本功能、各种属性设置，如列宽自适应、行号显示，以及事件处理如双击行事件和按钮查询操作。此外，还讲解了DataGrid的分页配置和请求响应参数格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、DataGrid

概述：

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

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

案例：

从现有的表格元素创建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控件。

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

二、DataGrid

DataGrid基本属性

url : '',        // 初始化请求路径
fitcolumns : false,    // 列宽自适应
singleSelect : true,    // 是否选中单行
checkOnSelect : true,    // 点击行选中时该checkbox选中或取消选中
rownumbers:true,   // 行号
fit : true,        // 高宽自适应
border : false,    // 是否显示边框
title : '书本列表',    // datagrid标题
striped : true,    // 显示斑马线效果

toobar属性（增删改）

toolbar : "#tb", // 自定义工具栏

formatter单元格格式化

styler单元格样式

sorter

editor

三、DataGrid事件

onDblClickRow双击行事件
onDblClickRow:function(index,row){}

按钮点击查询
//查询参数
var param={
'bookName':$('#bookname').val(),
'methodName':'query'
};
var options = $('#dg').datagrid('options');
//指定请求Url地址
options.url="bookAction.action";
//开始加载数据
$('#dg').datagrid('load', param);