`

easyui tree checkbox tree-hit

阅读更多
文笔不好,部分代码.只为笔记用!
主要功能: 单击条目可选中对应的checkbox,单击非末节点展开/合并.
$(function() {
	$('body').layout();
	$('#tree').tree({
		url : '<%=doName%>?active=<%=active%>',
		checkbox:true,
		onClick:function(node){
			// 单击展开/合并
			var hit = $(node.target).children("span.tree-hit");
			if (hit.hasClass("tree-collapsed")) {
				hit.removeClass("tree-collapsed").addClass("tree-expanded");
				hit.next().addClass('tree-folder-open');
				var ul = $(node.target).next();
				ul.css('display','block');
			} else if (hit.hasClass("tree-expanded")) {
				hit.removeClass("tree-expanded").addClass("tree-collapsed");
				hit.next().removeClass('tree-folder-open');
				var ul = $(node.target).next();
				ul.css('display','none');
			} else {  //单击选中checkbox
				var checkbox = $(node.target).children("span.tree-checkbox");
				if(checkbox.hasClass("tree-checkbox0")) {
					checkbox.removeClass("tree-checkbox0").addClass("tree-checkbox1");
				} else {
					checkbox.removeClass("tree-checkbox1").addClass("tree-checkbox0");
				}
			}
		},
		//数据加载完成后对数据进行处理
	    onLoadSuccess:function(){
	    	getChecked();
	    }
	});
});
	
function getChecked(){
	 //循环判断
	 var nodes = $('.tree-node');//树形div的class
	 if(nodes.length>0) //过滤第一次加载时没有数据
	 {   
	    var u_id = "<%=oI%>".split(",");
	    $('.tree-node').each(function(i){
		    var node_id = $(this).attr("node-id");//树形div中node-id,其中保存的是数据的ID
		    if(u_id !="null"|| u_id != null || u_id !="" || u_id != "undefined"){
			    for(var i=0; i < u_id.length; i++) {
				    if(node_id == u_id[i]) {
				        //$(this).addClass("tree-node-selected");//修改class为选定状态
				        //var node = $('#tree').tree('find',u_id[i]);
				       	$(this).children(".tree-checkbox").addClass("tree-checkbox1");
				    }
			    }
			}
	  	});   
	 }
}
function process(){
	// 获取所有树节点
	var node = $('#tree').tree('getChecked');
	var nodes = "";
	for(var i=0;i<node.length;i++){
		// 树节点ID
		nodes += "'" + node[i].id + "'" + ",";
	}   
	nodes = nodes.substring(0,nodes.length-1);
		var map = new Map();
              map.put("active", "GETFJD");
              map.put("Ug_id", nodes);
		AjaxSend("<%=sysPath%>/PT_FX_FAX.do", "json", map,delNode); 
}
// 实现同步传输,服务器响应完毕后继续向下执行
function AjaxSend(url, wdataType, data,successFunction) {
    wdataType = wdataType==""?"Intelligent Guess":wdataType;
    $.ajax({
        url:url,
        type:'POST',
        dataType:wdataType,
        async:false,			//-----
        data: data.Objects(),
        beforeSend:function(){
            jBeforeSend()
        },
        complete :function(){
            jCompleted()
        },
        error:function(event){
            jError(event)
        },
        success:function(event){
            jSuccess(event,successFunction)
        }
    });
}


<div id="dataShow" region="center" border="false" style="overflow: auto">
      <ul id="tree" style="padding:20px"></ul>
</div>
  • 大小: 50.8 KB
分享到:
评论

相关推荐

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    解决EasyUI中Tree的CheckBox不能设置为禁用的问题

    //解决的问题是Tree控件的checkbox不能设置为不允许用户勾选 //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 /...

    easyUI-springmvc-tree-demo

    在HTML中,我们可以定义一个div作为树的容器,并设置相应的class为"easyui-tree"。然后在JavaScript中,通过$(selector).tree()方法初始化并配置Tree组件。 二、SpringMVC支持 SpringMVC作为Java Web开发中的主流...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件,它扩展了原生 HTML 的 `input` 元素...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    jquery-easyui-EDT-1.4.2-中文文档

    在 `jquery-easyui-EDT-1.4.2-中文文档` 中,我们主要会探讨以下几个关键知识点: 1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)...

    jquery-easyui-EDT-1.4-build1-附带各种主题

    在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的压缩包中,我们不仅获得了 jQuery EasyUI 的核心库,还得到了一套丰富多样的主题资源,这将为我们的网页设计带来极大的灵活性和视觉吸引力。 1. **...

    很好用的jquery-easyui-EDT-1.4.5-build1

    这个“jquery-easyui-EDT-1.4.5-build1”版本是EasyUI的一个特定构建,被广泛认为是好用的版本。本文将详细介绍这个框架以及其组件,帮助读者深入理解其功能和应用。 一、jQuery EasyUI概述 jQuery EasyUI 是一套...

    EasyUI_of_InsdepTheme-1.5.1-1.0.0-rc2

    3. `jquery.easyui-plus.min.js`:这可能是 EasyUI 的扩展或增强版本,可能包含了一些额外的插件或功能,比如自定义组件或改进的性能。 `index.html` 文件通常作为主入口点,用于展示 EasyUI 组件的使用示例。在这...

    jquery-easyui-EDT-1.4.2-build1.rar 包含中文文档

    jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...

    easyui tree 例子

    在这个“easyui tree 例子”中,我们可以探讨几个关键的知识点,包括EasyUI Tree的基本使用、数据绑定、事件处理以及如何与后端数据交互。 1. **EasyUI Tree的基本结构** EasyUI Tree的基本HTML结构通常包含`&lt;ul&gt;`...

    jquery-easyui-tree学习

    《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中,为了构建用户友好的交互界面,我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们...

    easyui1.7 官网示例大全

    easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    ### easyui tree扁平化扩展详解 #### 一、引言 在开发Web应用程序时,树形结构(Tree)是常见的UI组件之一,用于展示层级关系的数据。EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树...

    easyui tree使用方式

    EasyUI Tree 是一款功能強大且灵活的树状选择控件,它可以实现多种选择方式,例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件说明 EasyUI Tree 是基于 ...

    EasyUI Tree Combotree 模糊搜索

    EasyUI Tree Combotree 的模糊所搜

    easyui-bootstrap-gh-pages.zip

    《深入解析EasyUI-Bootstrap-gh-pages项目》 在当今的Web开发领域,前端框架扮演着至关重要的角色,它们能够帮助开发者快速构建出美观、功能丰富的界面。本篇文章将聚焦于"easyui-bootstrap-gh-pages.zip"这个...

    easyUI模板-easyui云平台-easyuiDemo-网站.zip

    EasyUI是一款基于jQuery的UI库,专为Web开发者设计,提供了丰富的组件和便捷的API,使得构建美观且功能强大的Web应用变得更为简单。在“easyUI模板-easyui云平台-easyuiDemo-网站.zip”这个压缩包中,我们可以找到一...

    jquery-easyui-EDT-1.4-build1.rar

    在"jquery-easyui-EDT-1.4-build1.rar"这个压缩包中,包含了对开发者极有帮助的资源,包括CHM格式的API文档和相关的接口HTML演示文件,这将为我们深入学习和应用jQuery EasyUI提供强有力的支持。 首先,CHM格式的...

    EasyUI_05-datagrid-src.zip

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,尤其在企业级Web应用中广泛应用。这个名为 "EasyUI_05-datagrid-src.zip" 的压缩包文件很可能包含的是EasyUI框架中关于datagrid组件的源代码和相关资源...

Global site tag (gtag.js) - Google Analytics