jquery miniUi treeGrid 树动态加载问题,这里需要前台和后台交互
<div id="treegrid1" class="mini-treegrid" style="width:100%;height:480px;"
url="district-districtlist.htm" showTreeIcon="true"
treeColumn="taskname" idField="district_id" parentField="parent_id" resultAsTree="false"
showCheckBox="true" checkRecursive="false">
<div property="columns">
<div type="indexcolumn"></div>
<div name="taskname" field="district_name" headerAlign="center"
allowSort="true">
菜单名称
</div>
<div field="district_id" headerAlign="center"
allowSort="true">
地区编号
</div>
<div field="parent_id" headerAlign="center"
allowSort="true" >
父地区编号
</div>
<div field="icon" headerAlign="center"
allowSort="true">
菜单图标
</div>
</div>
</div>
url="district-districtlist.htm" 调用java 的查询方法(根据不同的语言而定)
后台的java的部分代码
District district = new District();
if(district_id == null)
district.setParent_id("0");
else
district.setParent_id(district_id);
int count = districtService.getDistrictCountByDistrict(district);
List<Map<String,Object>> res =new ArrayList<Map<String,Object>>();
if(count>0){
List<District> districts = districtService.getDistrictDistrictByDistrict(district);
for(District d : districts){
Map<String,Object> r = new HashMap<String,Object>();
r.put("district_id", d.getDistrict_id());
r.put("district_name", d.getDistrict_name());
r.put("parent_id", d.getParent_id());
r.put("isLeaf", false);
r.put("expanded", false);
res.add(r);
}
}
jsonData = PluSoft.Utils.JSON.Encode(res);
return SUCCESS;
根据传入的district_id 是否为null判断是否为第一的加载,null第一次加载,设置默认值0,根节点。
mini UI会在你点击展开的时候,传入自己的idField的值,这里需要接受,本人用的是struts2接收的。
int count = districtService.getDistrictCountByDistrict(district);
判断时候还有下节点如果该节点下有下节节点,那么,就循环遍历加载
没有节点,就返回一个空的结果集给前段
相关推荐
jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js
- **动态加载**:支持异步加载子节点,提高页面性能,特别是处理大量数据时。 - **排序**:提供了列排序功能,用户可以按某一列对数据进行升序或降序排列。 - **搜索与过滤**:内置搜索和过滤机制,帮助用户快速定位...
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
- **动态加载**:支持按需加载子节点,减少初次加载时的数据量,提高页面响应速度。 - **可定制性**:可以通过CSS样式自定义外观,通过API调整行为。 - **事件处理**:提供丰富的事件接口,如点击、展开、折叠等,...
在本教程中,我们将深入探讨 jQuery EasyUI TreeGrid 的使用,包括增、删、改、查的基本操作。 首先,我们需要引入 jQuery 和 jQuery EasyUI 的库文件。确保在 HTML 文件中添加以下链接: ```html ...
使用Bootstrap-table和JQuery TreeGrid插件展示树形表格,实现异步加载大数据量。
5. **扩展功能**: `jQuery.treeGrid` 提供了一些内置的扩展功能,如展开/折叠节点、添加/删除行、排序等。可以通过绑定事件或调用特定方法来实现这些功能。 **三、jQuery.treeGrid 主要配置项** 1. **colModel**: ...
- **数据绑定**:TreeGrid 可以与JSON、XML或其他数据源进行绑定,动态加载数据并构建树形结构。 - **事件处理**:提供了多种事件,如展开/折叠事件,方便开发者在特定操作时执行自定义逻辑。 3. **使用说明** -...
jquery easyui treegrid 拖拽demo
treegrid动态加载tree级联更新下拉列表,保存让下拉列表显示名称,不是id,和动态计算数量乘以单价的和,和总合计,添加一列删除一列,撤回,保存的合计。
2. **扩展API**:如果源码不易修改或不希望直接修改,可以考虑扩展jQuery.treeGrid的API,增加一个新的方法,如`treeGrid.expandAll()`和`treeGrid.collapseAll()`,分别用于展开和折叠所有节点。 3. **事件监听**...
4. **数据绑定**:TreeGrid.js可以轻松地与各种数据源(如JSON、XML或AJAX)结合,动态加载和更新表格内容。用户只需配置数据源的URL和格式,插件会自动处理数据解析和渲染。 5. **排序功能**:用户可以对表格中的...
要求:动态加载;级联勾选;通关类型判断显示包库/还是镜像(列有所不同,镜像共4列),勾选一个复选框,后面的复选框变为不可勾选状态。 下面是具体代码: 1,初始化treegrid,(其中有几个type列,是由后台人员...
jQuery异步treeTable插件是用于在网页上实现这种功能的一种高效工具,它结合了表格与树形结构的优点,可以动态加载数据,节省页面资源,提升用户体验。本文将深入探讨这一插件的工作原理、使用方法以及实际应用中的...
总的来说,"GridView+Jquery实现的TreeGrid"是一个结合了前后端技术,实现高效、动态的数据展示的实例。它利用了GridView的表格布局和JQuery的灵活性,提供了用户友好的树状数据浏览体验。在实际项目中,可以根据...
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...