(function($) {
//默认往下联动,但是不往上联动
$.fn.checkTree = function(settings) {//不存在往上联动而不往下联动即不支持withUP=true,widthDown=false的情况
defaults = $.extend({
url:'',
withUp:false,
withDown:true,
onExpand: null,//TODO
onCollapse: null,//TODO
onCheckChange: null,//TODO checkBox改变事件
/* Valid choices: 'expand', 'check' */
labelAction: "check"//TODO
}, settings);
var $tree = $(this).find(">ul");
var $lis = $tree.find('li');
var $checkboxes = $lis.find("a");
$tree.liClick();
$tree.liOverClick();
$tree.checkClick();
};
$.fn.checkClick=function(){
var settings = $.extend({
}, defaults);
this.find("a").click(function() {
var _$$ = $(this);
//联动上下级
if(settings.withUp||settings.withDown){
_$$.toggleClass('unchecked')
.toggleClass('checked')
.siblings('ul:first').find("a").attr('class',_$$.hasClass('checked') ? 'checked' : 'unchecked');
if(!settings.withUp){//不往上联动,那肯定往下联动了
if(_$$.hasClass('checked')){//被选择的时候
_$$.children("a").removeClass("unchecked").addClass("checked");
}else{
_$$.children("a").removeClass("checked").addClass("unchecked");
}
}else{
if(_$$.hasClass('checked')){//被选择的时候
_$$.parents("li").each(function () {
if($(this).children("ul").find("a:not(.checked):eq(0)").size() > 0) {
$(this).parents("li").andSelf().children("a").removeClass("unchecked checked").addClass("undetermined");
return false;
}
else $(this).children("a").removeClass("unchecked undetermined").addClass("checked");
});
}else{//没被选择的时候
_$$.parents("li").each(function () {
if($(this).find("a.checked, a.undetermined").size() > 1) {
$(this).parents("li").andSelf().children("a").removeClass("unchecked checked").addClass("undetermined");
return false;
}
else $(this).children("a").removeClass("checked undetermined").addClass("unchecked");
});
}
}
}else{//最简单的方式:都不联动
$(this).toggleClass('unchecked').toggleClass('checked');
}
return false;
});
}
$.fn.liClick=function(){
var settings = $.extend({
}, defaults);
this.find('li:has(ul)').addClass('closed').click(function(){
var ul=$(this).find(">ul");
$(this).toggleClass('closed').toggleClass('open').slideDown();
if(ul.hasClass('ajax')){//TODO ajax
var data="<li class=\"leaf\"><a href=\"#\" class='checked'> <ins> </ins>root node insert</a><ul class=\"ajax\"/></li><li class=\"leaf\"><a href=\"#\"> <ins> </ins>root node insert</a></li><li class=\"last leaf\"><a href=\"#\"><ins> </ins>root node insert</a></li>";
ul.removeClass("ajax").append($(data));
ul.liClick();
ul.liOverClick();
ul.checkClick();
//如果父节点已经被选择,则打开的所有ajax请求的节点都将被选择
//联动上下级
if(settings.withUp||settings.withDown){
if(ul.parent("li").find(">a").hasClass("checked")){
if(settings.withDown){
ul.find("a").addClass("checked");
}
}else{//否则找到一个被选择的ajax节点,然后点击两次
ul.find("a.checked:eq(0)").click().click();
}
}
}
return false;
});
}
$.fn.liOverClick=function(){
this.find('li:not(:has(ul))').click(function(){//屏蔽没有子元素的节点事件
return false;
});
}
})($);
- 大小: 38 KB
分享到:
相关推荐
《jQuery CheckTree:构建动态树形复选框的利器》 在Web开发中,实现具有交互性和层次结构的用户界面是常有的需求,而树形结构则是表达这种层次关系的有效方式。jQuery CheckTree是一个用于创建树形复选框的插件,...
jQuery CheckTree 是一个针对 jQuery 的扩展,它允许开发者创建可选的、可折叠的树形结构,支持通过 AJAX 动态加载子节点,极大地提升了用户体验。该插件的主要特点包括: - **复选框支持**:每个树节点都可以设置...
1. 获取当前选中的父节点信息,可能需要使用 layui.tree 的 API,如 `tree.checkStatus('demo')` 来获取选中状态。 2. 发送 AJAX 请求到后台,携带父节点的相关信息(例如 ID),请求新建子分类。 3. 在后台处理请求...
- CheckTree 是带有复选框的jQuery Tree插件,适合需要多选功能的场景。 - 也是开源的。 5. **dhtmlxTree** - dhtmlxTree 是一个功能丰富的Tree Menu控件,支持AJAX和拖放操作。 - 提供多浏览器支持,包括多选...
通过以上步骤,我们就可以创建一个动态加载、支持多选和单选功能的Ext Tree Panel实例。这个名为"treedemo"的压缩包文件很可能包含了实现这一功能所需的代码和资源文件,包括XML数据文件、CSS样式和JavaScript脚本。...
5. **数据源**:jstree支持多种数据源,可以是JSON、HTML或者AJAX请求。你可以根据实际需求,动态加载或更新树的数据。 6. **主题与插件**:jstree支持自定义主题,可以改变节点的样式以适应不同的界面设计。此外,...
#### Gmail Style Check Username AJAX Demo - **功能介绍**:一个类似Gmail用户名验证的AJAX示例。 - **应用场景**:适用于用户注册、账户设置等场景。 #### Google Web Toolkit Example Projects - **功能描述*...
由于Checkbox Tree支持多级节点,因此在处理全选/全不选或者级联选中时,需要使用递归算法遍历所有子节点,同步它们的选中状态。 9. **样式和模板**: 复选框的样式可以通过CSS自定义,如改变选中、未选中和三态...
这可以通过JavaScript的Ajax技术实现,如jQuery的`$.ajax()`方法,或者使用现代浏览器支持的`fetch` API。 此外,为了提高可维护性和可扩展性,可以考虑使用现有的JavaScript库或框架,如jQuery UI的Treeview插件,...
4. **操作方法**:EasyUI Tree提供了丰富的API,如`tree.expand(node)`展开节点,`tree.collapse(node)`折叠节点,`tree.select(node)`选择节点,`tree.unselect(node)`取消选择,`tree.check(node, checked)`勾选或...
它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...
它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...
在众多模块中,Layui的tree模块能够轻松实现树形控件,支持诸如多选、单选、拖拽等交互特性。本文档将深入探讨如何使用Layui框架中的tree模块来实现具有checkbox复选框功能的目录树,这对于构建具有层级关系的选中...
- **异步加载**:Ext.jstree支持按需加载节点,减少初次加载时的数据量,提高性能。 - **拖放操作**:允许用户通过拖放来重新组织树的结构。 - **可选节点**:节点可以被设置为可选,用户可以通过复选框选择特定...
4. **JSON数据支持**:支持静态和Ajax异步加载节点数据。 5. **皮肤和图标定制**:可通过CSS实现任意更换皮肤和自定义图标。 6. **复选框和单选按钮选择功能**:提供灵活的checkbox或radio选择模式。 7. **事件回调*...
配置对象中可以设置树的基本属性,如expandAll(是否全部展开)、check.enable(是否启用复选框)、callback事件等。 4. **节点操作**:ZTree提供了丰富的API接口,用于对树进行操作,如添加节点(`treeObj.add...
通过`check`属性,可以实现复选框功能,支持全选/全不选等操作。 六、zTree的实际应用 在实际项目中,zTree常被用于文件管理、目录导航、权限分配、组织结构展示等多个场景。通过与后台服务的配合,可以实现动态...
- **事件处理**:利用提供的事件API,如`select_node`或`check_node`,来响应用户的操作,如选择或取消选择节点。 - **样式定制**:根据项目UI风格,自定义节点的样式,包括复选框的样式。 - **性能优化**:对于大型...
$.fn.zTree.init($("#treeDemo"), setting, zNodes); ``` 而使用Ajax动态加载数据,你可以在`beforeAsync`回调函数中处理请求,并在`onAsyncSuccess`或`onAsyncError`中更新zTree: ```javascript var setting = {...
4. 监听JSTree的“check”或“uncheck”事件,以处理用户的多选操作。 5. 使用AJAX或JSON数据来动态加载地区信息,确保级联效果。 6. 实现保存用户选择的功能,将选中的节点ID或名称序列化为服务器可识别的格式。 ...