jqgrid treetable 详细使用步骤

时间: 2023-10-11 15:08:21 浏览: 39
以下是 jqGrid treetable 的详细使用步骤: 1. 引入依赖文件 在页面中引入 jQuery、jqGrid 的 JavaScript 和 CSS 文件。你可以从官网下载最新版本的 jqGrid,也可以使用 CDN 引入。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/css/ui.jqgrid.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/js/i18n/grid.locale-cn.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/js/jquery.jqGrid.min.js"></script> ``` 2. 创建表格容器 在页面中创建一个 div 元素,它将被用于呈现 jqGrid。你可以设置该元素的 ID,以便在 JavaScript 中引用。 ```html <div id="grid"></div> ``` 3. 初始化 jqGrid 在 JavaScript 中初始化 jqGrid。你需要设置以下属性: - url:指向你的接口地址。 - datatype:设置为“json”。 - mtype:设置为“GET”。 - colNames:设置表格的列名,应该包含你想要显示的所有列。 - colModel:设置每列的属性,包括名称、宽度、对齐方式等。 - rowNum:设置每页显示的行数。 - rowList:设置可供选择的每页行数。 - pager:设置分页控件所在的元素 ID。 - sortname:设置默认排序的列名。 - sortorder:设置默认排序的顺序。 - treeGrid:设置为“true”,表示这是一个 treetable。 - treeGridModel:设置为“adjacency”。 - ExpandColumn:设置展开按钮所在的列。 - ExpandColClick:设置为“true”,表示单击展开按钮时展开/折叠行。 - treeIcons:设置树形图标的样式。 以下是一个示例代码: ```javascript $("#grid").jqGrid({ url: "api/departments", datatype: "json", mtype: "GET", colNames: ["部门名称", "部门编号", "上级部门", "负责人"], colModel: [ { name: "Name", width: 200 }, { name: "Code", width: 80 }, { name: "ParentName", width: 200 }, { name: "Manager", width: 100 } ], rowNum: 10, rowList: [10, 20, 30], pager: "#gridPager", sortname: "Code", sortorder: "asc", treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "Name", ExpandColClick: true, treeIcons: { plus: "ui-icon-plus", minus: "ui-icon-minus", leaf: "ui-icon-document-b" } }); ``` 4. 获取数据 在服务器端创建一个返回 JSON 数据的接口,该接口应该返回一个符合 treetable 格式的 JSON 数据,包含所有部门的信息。 你可以使用 C# 的 List 集合表示所有部门,然后将其转换为 JSON 数据返回给前端。具体的转换方法可以参考前面的回答。 5. 显示表格 在页面中添加分页控件,并在 JavaScript 中调用表格的显示方法。 以下是一个示例代码: ```html <div id="grid"></div> <div id="gridPager"></div> ``` ```javascript $("#grid").jqGrid("navGrid", "#gridPager", { edit: false, add: false, del: false }); ``` 通过以上步骤,你就可以在页面中显示一个带有树形结构的表格了。注意,以上代码仅供参考,实际实现时可能需要根据具体情况进行修改。

相关推荐

最新推荐

jqGrid与Struts2 详细文档

jqGrid与Struts2 详细文档jqgrid 3.8详细文档 翻页,查询排序。

jqgrid参数中文说明

Jqgrid网上的api很少而且基本上都是英文的,中文的特别少,这个是jqgrid的中文使用说明,上面罗列的jqgrid的说明比较详细

ASP.NET中使用JqGrid完整实现.docx

qGrid的一些说明 • 外观时髦,功能齐全 ...• 使用AJAX方式 • 可以被集成到任何服务器端技术,例如ASP, JavaServelets, JSP, PHP 等等. • 由Trirand公司Tony Tomov开发. • 和ASP.NET集成非常简单

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

本文是对JQGrid的用法--列编辑,添加行,删除行。进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

Oracle数据库实用教程第三章 PL/SQL程序设计.pptx

Oracle数据库实用教程第三章 PL/SQL程序设计.pptx

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

粒子群多目标算法matlab代码【MATLAB代码实现】定义优化问题参数

# 1. 粒子群多目标算法简介 ## 1.1 什么是粒子群算法? 粒子群算法是一种基于群体智能的优化算法,灵感来源于鸟群或鱼群等生物群体的行为。每个“粒子”代表问题空间中的一个候选解,而整个粒子群代表了候选解的一个群体。粒子在解空间中搜索最优解,通过个体的经验和群体的协作来不断调整自身位置和速度,从而逐步靠近最优解。 ## 1.2 粒子群算法在多目标优化中的应用 粒子群算法最初是针对单目标优化问题提出的,但后来被扩展应用到了多目标优化领域。与单目标优化不同,多目标优化需要考虑多个冲突的目标函数,因此粒子群算法的应用在多目标优化中具有一定的挑战性。 ## 1.3 粒子群多目标算法原理解

具体操作:你可以将 PyTorch 安装路径添加到环境变量中,或者使用 PyCharm 等集成开发环境来设置 Python 解释器。

好的,以下是具体的操作步骤: 添加 PyTorch 安装路径到环境变量中: 1. 打开计算机的属性,点击高级系统设置; 2. 在弹出的窗口中,点击环境变量; 3. 在系统变量中,找到 PATH 变量,点击编辑; 4. 在编辑系统变量窗口中,点击新建; 5. 输入 PyTorch 安装路径,例如 `C:\Program Files\PyTorch`,点击确定; 6. 点击确定,保存设置。 设置 PyCharm 的 Python 解释器: 1. 打开 PyCharm,点击 File -> Settings 进入设置界面; 2. 在设置界面中,选择 Project -> Project I

TS16949发展史及五大手册的意义.pptx

TS16949发展史及五大手册的意义.pptx

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

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动,互动学习以行动为中心的强化学习学会互动,互动学习,以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授:智囊团论文联合主任菲利普·普雷教授,大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授,Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士,Deepmind对于那些及时看到自己错误的人...3谢谢你首先,我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔,"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲,你知道在这篇论文的(许多)错误中,你是我可以依