详解DataGrid使用的方法（重要）

最新推荐文章于 2025-06-30 13:19:08 发布

专注打码中

最新推荐文章于 2025-06-30 13:19:08 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/m0_61580275/article/details/128385311

本文详细介绍了如何使用EasyUI的DataGrid组件。首先讲解了如何通过静态HTML和ajax请求创建DataGrid，展示了json数据的使用。接着，通过API创建DataGrid，并添加了工具栏功能，包括添加、删除、修改和查询操作。此外，还讨论了分页查询的实现，涉及服务端响应的json结构调整。最后，提到了取派员管理功能，包括批量删除和修改操作的前后端实现步骤。

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

1.将静态HTML渲染为DataGrid样式

<!-- 方式一：将静态HTML渲染为datagrid样式 -->
	<table class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">编号</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>小明</td>
				<td>90</td>
			</tr>
			<tr>
				<td>002</td>
				<td>老王</td>
				<td>3</td>
			</tr>
		</tbody>
	</table>

2、发送ajax请求获取json数据创建datagrid 提供json文件

<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
           class="easyui-datagrid">
       <thead>
           <tr>
               <th data-options="field:'id'">编号</th>
               <th data-options="field:'name'">姓名</th>
               <th data-options="field:'age'">年龄</th>
           </tr>
       </thead>
   </table>

2、使用easyUI提供的API创建datagrid（掌握）

<script type="text/javascript">
       $(function(){
           //页面加载完成后，创建数据表格datagrid
           $("#mytable").datagrid({
               //定义标题行所有的列
               columns:[[
               {title:'编号',field:'id',checkbox:true},
               {title:'姓名',field:'name'},
               {title:'年龄',field:'age'},
               {title:'地址',field:'address'}
               ]],
               //指定数据表格发送ajax请求的地址
               url:'${pageContext.request.contextPath }/json/datagrid_data.json',
               rownumbers:true,
               singleSelect:true,
               //定义工具栏
               toolbar:[
               {text:'添加',iconCls:'icon-add',
                  //为按钮绑定单击事件
                  handler:function(){
                     alert('add...');
                  }
               },
               {text:'删除',iconCls:'icon-remove'},
               {text:'修改',iconCls:'icon-edit'},
               {text:'查询',iconCls:'icon-search'}