jQuery EasyUI DataGrid对象显示及分页、复选多选详解

本文主要介绍了如何使用jQuery EasyUI的DataGrid组件来展示数据，并结合了分页和复选框多选功能。通过源码摘要，我们可以深入理解DataGrid的配置和自定义方法。 jQuery EasyUI的DataGrid是一个强大的表格控件，它允许我们在Web应用中以网格形式展示数据，同时提供了分页、排序、过滤和编辑等功能。在标题提到的场景中，DataGrid用于显示对象，包括主键、复选框、用户信息、职位、部门等字段，并且支持用户点击标题进行排序。 首先，我们看到`<table id="dg" fit="true" width="100%">`，这定义了一个DataGrid，它的ID为"dg"，设置了全屏适应(`fit="true"`)以及100%的宽度。`thead`内的`<tr>`标签定义了列头，每个`<th>`标签对应DataGrid的一列。 对于列的配置，`<th field="aguid" hidden="true">主键</th>`表示字段名为"aguid"的列，设置为隐藏(`hidden="true"`)，通常主键不直接显示在界面上。`<th field="ck" checkbox="true"></th>`创建了一列复选框，用户可以多选行数据。 `sortable="true"`属性用于开启列的排序功能，例如`<th field="aname" sortable="true">用户名</th>`，用户点击"用户名"列头即可按姓名排序。 `formatter`属性用于自定义数据的显示方式，如`<th field="guid_job" sortable="true" formatter="formatterJob.Formatter_job">职位</th>`，这里的`formatterJob.Formatter_job`是一个自定义函数，用于将`guid_job`字段对应的ID转换为职位的名称。 同样，`<th field="guid_bm" sortable="true" formatter="formatterBm.Formatter_bm">部门</th>`也是通过`formatter`函数将部门ID转换为部门名称。其他如`<th field="isworking" sortable="true" formatter="formatterStatus.Formatter_status">状态</th>`和`<th field="isoperator" formatter="formatterisIsoperator.Formatter_isoperator">是否允许登录</th>`也是通过类似的方式对数据进行格式化处理，使显示更友好。 最后，`<th field="操作" formatter="datagridformatter.operformatte">`定义了一个操作列，通常包含编辑、删除等操作，`formatter`函数`datagridformatter.operformatte`会生成相应的操作按钮。 分页功能可以通过设置DataGrid的`pagination`属性为`true`来实现，配合`onLoadSuccess`事件，可以更新分页控件的状态。同时，可以使用`rowStyler`函数来定制行样式，比如根据数据状态改变行的背景色。 jQuery EasyUI的DataGrid结合了对象显示、分页、复选框多选等多种功能，通过合理的配置和自定义方法，可以创建出高效、易用的数据展示界面。开发者可以根据具体需求调整和扩展这些功能，以满足各种复杂的Web应用需求。