范例:设置静态数据集
<input type="button" value="更新数据集" onclick="updateDataset()"> <br><br><textarea id="currentRow" rows="4" cols="100"></textarea> <br>行单击事件、行双击事件、字段默认显示值 <br><br><div id="div1" style="width:850px;"></div>
<script language="javascript"> //双击数据行触发该事件方法 var onDblClickRow = function(id, index, data){ jQuery("#currentRow").val("onDblClickRow: " + id + "," + index + "," + data.orgName); } var config = { "show_summary": true, "columns":[ {"title": "组织名称", "field": "orgName"}, {"title": "组织编号", "field": "orgCode", "align": "center", "width": "60"}, {"title": "描述", "field": "orgDesc", "align": "center", "width": "100"}, {"title": "操作人", "field": "operator", "align": "center", "width": "60"}, {"title": "总人数", "field": "count", "align": "center", "width": "60", "defaultValue": "0", "fieldCal": true, "calStyle": "sum"}, {"title": "薪水", "field": "salary", "align": "center", "width": "60", "defaultValue": "0.0", "fieldCal": true, "calStyle": "avg"} ], onClickRow: function(id, index, data){ //单击数据行触发该事件方法 jQuery("#currentRow").val("onClickRow: " + id + "," + index + "," + data.orgName); }, onDblClickRow: onDblClickRow }; var treeGrid = jQuery("#div1").showTreeGrid(config); function updateDataset(){ var ds = [ {"id": 1,"orgName": "城区分公司", "orgCode": "CQ", "operator": "cjm", "children":[]}, {"id": 2,"orgName": "清新分公司", "orgCode": "QX", "operator": "", "children":[]}, {"id": 3,"orgName": "英德分公司", "orgCode": "YD", "operator": "", "children":[]}, {"id": 4,"orgName": "佛冈分公司", "orgCode": "FG", "operator": "", "children":[ {"id": 7,"orgName": "chlid1", "count": 30, "salary": 1000.00}, {"id": 8,"orgName": "chlid2", "count": 20, "salary": 900.00} ]} ]; treeGrid.setDataset(ds); treeGrid.show(); } </script>
相关推荐
在官网上下了个treegrid-dnd.js实现拖拽,发现并没有太多条件限制,自己修改了一下,限制只能拖拽到比自己高一级别的父节点中,希望大家有用
- 配置TreeGrid:定义元素ID,设置数据源、列配置、事件处理等参数,然后调用layui.treeGrid()方法创建TreeGrid实例。 - 数据加载:可以通过异步请求或直接传入数据来填充TreeGrid。异步请求时,通常采用layui的...
Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件,用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者...
TreeGrid是一种特殊的表格展示方式,它...综上所述,"TreeGrid-1.0.zip"可能包含了一个实现上述功能的TreeGrid组件,通过解压和研究其内部文件,开发者可以学习和利用这个组件来提升他们的项目中数据展示和管理的能力。
6. **文件结构与资源**:虽然未提供具体文件内容,但通常一个名为"TreeGrid-1.1"的压缩包可能包含源代码、样式文件(CSS)、脚本文件(JavaScript)、示例数据、文档说明和可能的测试案例。这些资源可以帮助开发者...
easyui+jquery,其他组件数据(这里用的是列表ul)往treegrid树形表格里拖放数据,形成新的树形表格数据,自行引入css和js就可运行
- 数据分析:数据挖掘和报告中的复杂关系展示。 3. **二次开发** - 功能扩展:基于现有的treetable库,可以添加新的功能,如搜索、过滤、拖放排序等。 - 性能优化:针对大数据量的场景,可以优化数据加载策略,...
TreeGrid表格是一种在WPF(Windows Presentation Foundation)框架下实现的高级数据展示控件,它结合了树形结构和网格视图的特点,提供了一种既能够展现层次关系又可以进行行列布局的数据展示方式。这种控件在处理...
$(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的,但是对于要保存更改到数据库显然走不通,需要向其他办法 //启用拖动排序 //enableDnd($('#datagrid_depttree')); } 就行了
@ agile-central-technical-services / utils-treegrid派生的列 此模块提供Rally.ui.grid.TreeGridView的替代,它增加了对derivedColumnCfgs配置的支持,该配置接受从模型数据“派生”但不是模型本身上的字段的列...
- `datatype`:数据类型,如'json'、'xml'等。 - `colModel`:定义表格列的属性,如字段名、宽度、是否可编辑等。 - `pager`:分页器的ID,用于显示分页控件。 - `sortname`和`sortorder`:默认排序的列名和顺序。 -...
4. 数据加载:数据可以静态写入,也可以动态加载。静态加载时,直接在`data`选项中设置数据;动态加载则需要配置URL,TreeGrid会自动发送请求获取数据。数据格式通常是JSON,包含`id`、`parent`(父节点ID)和可选的...
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
- `maxazan-jquery-treegrid-447d662` 这个版本号可能是项目的一个特定提交ID,意味着你可以从源码仓库获取到这个特定版本的源代码,以确保使用的版本与描述一致。 - **版本更新**:随着时间的推移,开发者会发布新...
- Meta标签用于设置页面的基本信息,如viewport用于优化移动设备显示,charset指定字符编码。 - CSS和JS文件的引用,确保页面样式和行为的正确加载。 总结,这个博客系统采用现代Web开发技术,前后端分离,同时...
- 通过treeGrid插件展示,此插件支持层次化的数据展示。 **菜单编辑页面中上级菜单数据的呈现方式:** - 通过zTree插件展示上级菜单,便于选择和编辑。 #### 三、部门模块 **部门模块的主要作用:** - 维护部门...
bootstrap-table-treegrid.js
6. **异步加载**:对于大型数据集,为了提高性能,可以采用异步加载策略,只在需要时加载子节点。这需要用到Ajax技术,通过`$.ajax()`或`$.getJSON()`方法从服务器获取数据。 7. **性能优化**:由于树状表格可能...
flask-admin 树状表格示例 快速开始 ...cd flask-admin-tree-table-demo pipenv install pipenv shell python app.py ...首先树状数据模型需要设计成左右值数据结构,本示例直接使用 sqlalchemy_mptt 扩
- `loadXmlPath`:数据源XML路径。 - `imagePath`:图片路径。 - `expandImage`:展开节点的图片名称。 - `closeImage`:折叠节点的图片名称。 - `isDisplayHead`:是否显示表头,默认为true。 - `isLine`:...