jqgrid 4.6 treeReader 构建本地JSON 加载数据

时间: 2023-10-09 18:10:15 浏览: 180

jqgrid加载本地数据分页Demo

5星 · 资源好评率100%

jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它支持多种数据源，包括本地数据和远程数据（如JSON、XML、CSV等）。在这个"jqgrid加载本地数据分页Demo"中，我们将深入探讨如何利用jqGrid实现本地数据的分页显示。 1. **jqGrid的基本结构** jqGrid由Tomasz Wegrzan开发，基于jQuery库。它的核心功能包括数据的加载、排序、搜索、编辑以及分页。在HTML页面中，我们需要创建一个`<table>`元素，并通过JavaScript设置其属性来初始化jqGrid。 2. **加载本地数据** 要加载本地数据，首先你需要准备一个二维数组或JSON对象，其中包含你要显示的数据。每行数据通常是一个对象，包含了对应列的键值对。例如： ```javascript var myData = [ {id: "1", name: "John Doe", age: "30", city: "New York"}, {id: "2", name: "Jane Smith", age: "25", city: "Los Angeles"} // 更多数据... ]; ``` 3. **配置jqGrid** 初始化jqGrid时，你需要指定数据源、列信息和其他配置项。对于本地数据分页，设置`data`参数为你的数据数组，`datatype`为"local"，并启用`pager`和` rowNum`属性。例如： ```javascript $("#grid").jqGrid({ data: myData, datatype: "local", colNames: ["ID", "Name", "Age", "City"], colModel: [ {name: "id", index: "id", width: 50}, {name: "name", index: "name", width: 100}, {name: "age", index: "age", width: 60}, {name: "city", index: "city", width: 90} ], pager: "#pager", rowNum: 10, // 每页显示10条记录 rowList: [10, 20, 30], // 分页选项 sortname: "id", // 默认排序字段 sortorder: "asc" // 默认排序顺序 }); ``` 4. **分页功能** jqGrid内置了完整的分页功能，通过`pager`参数我们指定了分页控件的容器。当用户点击页码或改变每页记录数时，jqGrid会自动处理数据的加载和显示。`rowNum`参数定义了每页默认显示的记录数，`rowList`则提供了用户可选择的不同记录数选项。 5. **事件监听** jqGrid提供了一系列事件回调，如`loadComplete`，可以在数据加载完成后执行自定义逻辑。你可以使用这些事件来处理额外的需求，比如数据格式化、自定义样式等。 6. **本地数据的排序和搜索** jqGrid不仅支持分页，还允许用户对数据进行排序和搜索。只需点击列头即可对相应列进行升序或降序排序。通过设置`search`参数为`true`和定义`searching`选项，可以开启内置的搜索功能。 7. **示例代码分析** 在这个"jqgrid本地数据分页"的示例中，我们可以看到一个完整的jqGrid实例，包括数据加载、列定义、分页设置以及可能的事件处理。通过学习这个Demo，开发者可以更好地理解如何在实际项目中应用jqGrid，实现本地数据的动态分页显示。总结来说，jqGrid是一款强大的表格插件，特别适合处理大量的数据展示和操作。通过本地数据分页的配置，我们可以提高网页的响应速度，同时提供良好的用户体验。这个Demo将帮助我们掌握如何使用jqGrid进行本地数据的分页加载和展示。

以下是一个简单的本地 JSON 数据的 jqGrid 4.6 的 demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqGrid 4.6 TreeReader Demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script> <script> var mydata = [ {id: "1", name: "Node 1", parent: "0", level: "0", isLeaf: false, expanded: true}, {id: "2", name: "Node 2", parent: "1", level: "1", isLeaf: true, expanded: false}, {id: "3", name: "Node 3", parent: "1", level: "1", isLeaf: false, expanded: true}, {id: "4", name: "Node 4", parent: "3", level: "2", isLeaf: true, expanded: false}, {id: "5", name: "Node 5", parent: "3", level: "2", isLeaf: true, expanded: false}, {id: "6", name: "Node 6", parent: "0", level: "0", isLeaf: false, expanded: true}, {id: "7", name: "Node 7", parent: "6", level: "1", isLeaf: true, expanded: false}, {id: "8", name: "Node 8", parent: "6", level: "1", isLeaf: true, expanded: false}, {id: "9", name: "Node 9", parent: "0", level: "0", isLeaf: true, expanded: false} ]; $(function () { $("#list").jqGrid({ data: mydata, datatype: "local", colModel: [ {name: "id", width: 50}, {name: "name", width: 150}, {name: "parent", width: 100, hidden: true} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "name", ExpandColClick: true, caption: "jqGrid 4.6 TreeReader Demo", height: "auto", rowNum: 10000, jsonReader: { repeatitems: false, root: function (obj) { return obj; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { return obj.length; } }, treeReader: { parent_id_field: "parent", level_field: "level", leaf_field: "isLeaf", expanded_field: "expanded" } }); }); </script> </head> <body> <table id="list"></table> </body> </html> ``` 上述示例中，我们构建了一个包含简单树形结构数据的 `mydata` 数组。每个节点都包含了 `id`、`name`、`parent`、`level`、`isLeaf` 和 `expanded` 属性。其中 `id` 用于表示节点的唯一标识，`name` 用于显示节点的名称，`parent` 用于表示节点的父节点 ID，`level` 用于表示节点的层级，`isLeaf` 用于表示节点是否为叶子节点，`expanded` 用于表示节点是否展开。在 jqGrid 的配置中，我们使用 `data` 和 `datatype` 来指定加载本地数据，并使用 `colModel` 来定义表格的列模型。使用 `treeGrid` 和 `treeGridModel` 来启用 jqGrid 的树形功能，并使用 `ExpandColumn` 和 `ExpandColClick` 来使树形结构可以展开和收缩。`jsonReader` 和 `treeReader` 分别用于解析 JSON 数据和树形结构的数据。在 `jsonReader` 中，我们将 `root` 属性设置为返回整个 JSON 数据，将 `records` 属性设置为返回 JSON 数组的长度，而其他属性则按默认值设置即可。在 `treeReader` 中，我们使用了 `parent_id_field`、`level_field`、`leaf_field` 和 `expanded_field` 来指定树形结构中每个节点的父节点 ID、层级、是否为叶子节点和是否展开。这些属性的值需要在 `mydata` 数组中提供。你可以根据需要修改 `mydata` 数组的内容。

阅读全文

jqgrid 4.6 treeReader 构建本地JSON 加载数据

相关推荐

加载与存储本地JSON文件

jqgrid加载本地数据并且分页例子

jqgrid 4.6 treeReader 怎么用c# 部门表构建符合的数据集合

c# 部门List数据怎么映射成treeReader jqgrid 4.6版本 展示树形数据

jqgrid treeReader 加载本地树形数据demo

c# 构建符合 jqgrid 中 treeReader标准的List数据

jqgrid 4.6 销毁并重新加载

c# 部门List数据怎么使用 jqgrid 4.6版本 展示树形数据

jqgrid4.6.zip

jqgrid4.6.rar

jqGrid4.6完整包

jqGrid 4.6和4.7版本

JqGrid 4.6英文chm离线文档

jqgrid 4.6 详细属性API

jqgrid 4.6 捕获 clearSearch 事件

jqgrid 4.6 捕获搜索事件

jqgrid 4.6 树形结构 设置多选

jqgrid 4.6 中 怎么使用自定义 treetable

jqgrid 4.6 defaultSearch 多个参数

最新推荐

JQGrid的用法解析(列编辑,添加行,删除行)

数学建模学习资料 姜启源数学模型课件 M04 数学规划模型 共85页.pptx

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

c# 部门List数据怎么映射成treeReader jqgrid 4.6版本展示树形数据

c# 部门List数据怎么使用 jqgrid 4.6版本展示树形数据

jqgrid 4.6 树形结构设置多选

jqgrid 4.6 中怎么使用自定义 treetable

数学建模学习资料姜启源数学模型课件 M04 数学规划模型共85页.pptx