`
raymond.chen
  • 浏览: 1437003 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

treegrid-3.0范例:checkbox单选

 
阅读更多

范例:checkbox单选

 

<input type="button" value="展开/折叠 所有节点" onclick="expandAll()">
<input type="button" value="取得选中的checkbox" onclick="getSelectedCheckboxValues()">
<input type="button" value="取得当前行的数据" onclick="getSelected()">

<br><br>

<textarea id="currentRow" rows="4" cols="100"></textarea>

<br><br><div id="div1" style="width:850px;"></div>

 

<script language="javascript">
	var config = {
		"id_field": "id",
		"chk_show": true,
		"chk_only_selected": true,
		"show_summary": true,
		"columns":[
			{"title": "组织名称", "field": "orgName"},
			{"title": "ID", "field": "id", "align": "center", "width": "30", fieldCal: true, calStyle: "min"},
			{"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", fieldCal: true, calStyle: "sum"},
			{"title": "薪水", "field": "salary", "align": "center", "width": "60", fieldCal: true, calStyle: "avg", digit: 2},
			{"title": "查看", "handler": "customLook", "align": "center", "width": "120"}
		],
		"dataset":[
			{"id": 1,"orgName": "城区分公司", "orgCode": "CQ", "operator": "cjm", "count": 200, "salary": 3000.50, "children":[
				{"id": 5,"orgName": "城区卡品分销中心", "count": 100, "salary": 2000.00},
				{"id": 6,"orgName": "先锋服务厅", "count": 50, "salary": 1000.00, "children":[
					{"id": 7,"orgName": "chlid1", "count": 30, "salary": 1000.00},
					{"id": 8,"orgName": "chlid2", "count": 20, "salary": 900.00},
					{"id": 9,"orgName": "chlid3", "count": 20, "salary": 800.00, "children": [
						{"id": 10,"orgName": "chlid3-1", "count": 10, "salary": 500.00},
						{"id": 11,"orgName": "chlid3-2", "count": 10, "salary": 500.00},
						{"id": 12,"orgName": "chlid3-3", "count": 10, "salary": 500.00},
						{"id": 13,"orgName": "chlid3-4", "count": 10, "salary": 500.00}
					]}
				]},
				{"id": 14,"orgName": "半环服务厅", "count": 10, "salary": 500.00}
			]},
			{"id": 2,"orgName": "清新分公司", "orgCode": "QX", "operator": "", "count": 10, "salary": 500.00},
			{"id": 3,"orgName": "英德分公司", "orgCode": "YD", "operator": "", "count": 10, "salary": 500.00},
			{"id": 4,"orgName": "佛冈分公司", "orgCode": "FG", "operator": "", "count": 10, "salary": 500.00}
		]
	};

	var treeGrid = jQuery("#div1").showTreeGrid(config);

	//方法返回单元格的显示内容
	function customLook(trid, ptrid, row, col){
		return "<a href='javascript:void(0);' style='color:blue;'>查看</a>&nbsp;&nbsp;<a href='javascript:void(0);' style='color:blue;'>编辑</a>&nbsp;&nbsp;<a href='javascript:alert(0);' style='color:blue;'>删除</a>";
	}

	function getSelectedCheckboxValues(){
		jQuery("#textarea1").val("");
		
		var s = "values: " + treeGrid.getSelectedCheckboxValues() + "\n";
		s += "level: " + treeGrid.getSelectedRowLevel() + "\n";
		
		var items = treeGrid.getSelections();
		if(items && items.length > 0){
			s += "selections length: " + "\n";
			s += "id,pid,index,level,orgname" + "\n";
			for(var i=0; i<items.length; i++){
				var item = items[i];
				s += item.id + ", " + item.pid + ", " + item.index + ", " + item.level + ", " + item.data.orgName + "\n";
			}
		}
		
		jQuery("#currentRow").val(s);
	}
	
	//取得当前选中的行,方法返回TreeGridItem对象
	function getSelected(){
		jQuery("#textarea1").val("");
		
		var val = "";
		var treeGridItem = treeGrid.getSelected();
		if(treeGridItem != null){
			val += "id,pid,index,level,orgname" + "\n";
			
			//获取父数据行
			var parent = treeGrid.getParent();
			if(parent != null){
				val += parent.id + ", " + parent.pid + ", " + parent.index + ", " + parent.level + ", " + parent.data.orgName + "\n"; 
			}

			//获取当前数据
			val += treeGridItem.id + ", " + treeGridItem.pid + ", " + treeGridItem.index + ", " + treeGridItem.level + ", " + treeGridItem.data.orgName + "\n"; 
			
			//获取子数据行集
			var children = treeGrid.getChildren();
			if(children != null && children.length > 0){
				for(var i=0; i<children.length; i++){
					var c = children[i];
					val += c.id + ", " + c.pid + ", " + c.index + ", " + c.level + ", " + c.data.orgName + "\n"; 
				}
			}
		}
		jQuery("#currentRow").val(val);
	}
	
</script>

 

 

  • 大小: 77.9 KB
分享到:
评论

相关推荐

    easyui treegrid-dnd插件修改版

    在官网上下了个treegrid-dnd.js实现拖拽,发现并没有太多条件限制,自己修改了一下,限制只能拖拽到比自己高一级别的父节点中,希望大家有用

    基于layui的树表格-treeGrid

    layui提供了一系列丰富的组件,其中“树表格”(TreeGrid)是结合了表格和树形结构的一种特殊展示形式,常用于数据层级关系的展示。本篇文章将深入探讨基于layui的树表格-treeGrid的实现原理、使用方法以及相关的...

    TreeGrid-1.0.zip

    "TreeGrid-1.0.zip"很可能是一个包含TreeGrid相关组件或库的压缩包,版本号为1.0,可能是某个开发者或团队发布的早期版本。 TreeGrid的基本概念: 1. **树形结构**:TreeGrid的基础是树形结构,每个节点可以有子...

    bootstrap-treegrid实现树形表格.zip

    Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件,用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者...

    TreeGrid-1.1

    在"TreeGrid-1.1"中,我们看到了一个优化过的版本,旨在提供更好的用户体验,支持多种功能,包括子节点分页、列宽拖拽调整、勾选选择以及延迟加载。 1. **子节点分页**:在处理大量数据时,子节点分页是一种高效的...

    checkbox treegrid,重写treegrid,第一列为checkbox

    在IT领域,Checkbox TreeGrid是一种常见的数据展示控件,它结合了树形结构和表格的特点,其中第一列通常包含复选框,用户可以通过选择复选框来操作或筛选树形结构中的节点。这个主题主要涉及前端开发,尤其是...

    easyui-treegrid-其他格式组件拖放

    easyui+jquery,其他组件数据(这里用的是列表ul)往treegrid树形表格里拖放数据,形成新的树形表格数据,自行引入css和js就可运行

    树形表格 treetable 完整版 带演示demo例子

    在IT领域,树形表格(TreeTable)是一种特殊的数据展示方式,它结合了表格和树状结构的优点,常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”,包括它的特点、应用场景、二次...

    jQuery Easyui Treegrid实现显示checkbox功能

    jQuery Easyui Treegrid 是一个强大的数据展示组件,它结合了树形结构和表格的优点,常用于管理层次结构的数据。在实际应用中,我们经常需要添加复选框(checkbox)功能,以便用户可以多选操作。本文将详细介绍如何...

    treegrid-dnd.js

    $(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的,但是对于要保存更改到数据库显然走不通,需要向其他办法 //启用拖动排序 //enableDnd($('#datagrid_depttree')); } 就行了

    utils-treegrid-derived-columns:扩展Rally.ui.grid.TreeGridView以支持“派生的列”(列不属于数据模型)

    @ agile-central-technical-services / utils-treegrid派生的列 此模块提供Rally.ui.grid.TreeGridView的替代,它增加了对derivedColumnCfgs配置的支持,该配置接受从模型数据“派生”但不是模型本身上的字段的列...

    jquery.treegrid.extension.js

    扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载

    TreeGrid表格

    TreeGrid表格是一种在WPF(Windows Presentation Foundation)框架下实现的高级数据展示控件,它结合了树形结构和网格视图的特点,提供了一种既能够展现层次关系又可以进行行列布局的数据展示方式。这种控件在处理...

    jqgrid序列

    **正文** `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能,包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。...

    4.博客系统代码文档1

    - FancyTree的treeGrid:用于展示树形结构的表格。 2. 后端技术: - Mapper:实体与ViewModel之间的映射工具,可能使用了AutoMapper或其他类似的库。 - Autofac:依赖注入容器,帮助管理对象生命周期和依赖关系...

    动吧项目笔记保存云端

    - 通过treeGrid插件展示,此插件支持层次化的数据展示。 **菜单编辑页面中上级菜单数据的呈现方式:** - 通过zTree插件展示上级菜单,便于选择和编辑。 #### 三、部门模块 **部门模块的主要作用:** - 维护部门...

    很好的EXT英文学习文档

    - **新组件**: 新增了多个实用组件,如TreeGrid、DataView等,进一步丰富了开发者的选择。 - **API改进**: API接口得到优化,使得开发者能够更加方便地调用和管理各种组件。 - **主题与样式**: 提供了更多主题和样式...

    jquery-treegrid 树形表格组件

    - `maxazan-jquery-treegrid-447d662` 这个版本号可能是项目的一个特定提交ID,意味着你可以从源码仓库获取到这个特定版本的源代码,以确保使用的版本与描述一致。 - **版本更新**:随着时间的推移,开发者会发布新...

    EASY-UI示例;EASY-UI示例

    EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例

    TreeGrid开发手册

    TreeGrid是一种将表格和树形结构结合的数据展示控件,常用于Java和JavaScript开发中,以提供更加灵活和丰富的数据展示方式。它允许用户在单个视图中查看层次结构数据,同时支持展开、折叠、排序和筛选等功能。在本...

Global site tag (gtag.js) - Google Analytics