datagrid 详细说明

DataGrid 是 EasyUI 框架中的一个重要组件，用于以表格形式展示大量结构化数据。它不仅支持基本的数据呈现功能，还集成了许多高级特性如排序、分页、编辑等。通过 DataGrid 可以为 Web 应用程序提供高效且美观的数据浏览界面。 ### 主要特点 #### 1. 数据源绑定 - **本地数组**：可以将 JavaScript 数组直接作为 DataGrid 的数据源。 ```javascript $('#dg').datagrid({ data: [ {"id":1,"name":"Alice"}, {"id":2,"name":"Bob"} ] }); ``` - **远程加载**：通常从服务器端获取 JSON 格式的数据，并动态填充到表格中。 ```javascript $('#dg').datagrid({ url: 'server/get-data.php' }); ``` #### 2. 列定义 (Columns) 用户可以通过列选项来定制每一列的表现形式和行为： | 属性 | 描述 | |-------------|----------------------------| | field | 字段名 | | title | 显示标题 | | width | 宽度 | | sortable | 是否允许按此列排序 | | formatter | 自定义单元格内容的渲染函数 | ```javascript columns:[[ {field:'id',title:'ID',width:80}, {field:'name',title:'姓名',sortable:true} ]] ``` #### 3. 分页(Pagination) 内置了强大的分页控件，可以让用户轻松地翻阅大数据量记录而不必一次性全部下载下来。 ```javascript $('#dg').datagrid({ pagination: true, }); ``` 此外还可以自定义每页大小以及总页数限制等功能。 #### 4. 排序(Sorting) 点击表头即可按照升序或降序排列相应字段的数据行。对于远程模式而言，则会在发起请求时附带排序参数交给服务端处理。 #### 5. 编辑(Editables) 允许某些特定行进入“编辑”状态，在其中修改单元格内的文本值然后保存更改。 ```javascript onDblClickRow : function(rowIndex){ $(this).datagrid('beginEdit', rowIndex); }, onClickCell: function(index, field){ if ($(this).datagrid('isEditing')){ var editor = $(this).datagrid('getEditor', { index:index, field:field }); // 进一步操作... } } ``` --- ### 基本使用步骤 1. 引入必要的 CSS 和 JS 文件（EasyUI）； 2. 创建 HTML `<table>` 元素并赋予唯一 ID； 3. 初始化 Datagrid 实例； 4. 设置初始属性（如宽度高度、是否有边框等），并通过 `loadData` 方法载入静态数据或配置 URL 加载远端数据； 5. 添加交互事件监听器，包括但不限于选择某一行、双击打开详情视图等等。 例如创建一个简单的订单管理系统的部分页面布局： ```html <table id="orders" style="height:auto"></table> <script type="text/javascript"> $(function(){ $('#orders').datagrid({ fitColumns: true, rownumbers: true, singleSelect: false, nowrap: false, striped: true, loadMsg: "正在加载...", columns:[[ {field:"order_id",title:"订单编号",align:'center'}, {field:"customer_name",title:"客户名称"}, {field:"total_price",title:"总价(元)",align:'right'} ]], toolbar:[ {- text: '添加', iconCls: 'icon-add', handler:function(){alert("add order");} }, '-','-','删除',{ text: '导出Excel', iconCls: 'icon-excel', handler:function(){} } ], url:'/api/orders.json' /* 注意这里的URL */ }) }) </script> ``` 以上就是一个较为完整的例子，涵盖了大部分常用的功能点。当然实际项目里还需要考虑更多的细节问题，比如性能优化、用户体验设计等方面的工作。 ---