`
zhengcaihai529
  • 浏览: 47282 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

支持ajax的checktree

阅读更多

(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>&nbsp;</ins>root node insert</a><ul class=\"ajax\"/></li><li class=\"leaf\"><a href=\"#\"> <ins>&nbsp;</ins>root node insert</a></li><li class=\"last leaf\"><a href=\"#\"><ins>&nbsp;</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

    《jQuery CheckTree:构建动态树形复选框的利器》 在Web开发中,实现具有交互性和层次结构的用户界面是常有的需求,而树形结构则是表达这种层次关系的有效方式。jQuery CheckTree是一个用于创建树形复选框的插件,...

    Jqurey checktree

    jQuery CheckTree 是一个针对 jQuery 的扩展,它允许开发者创建可选的、可折叠的树形结构,支持通过 AJAX 动态加载子节点,极大地提升了用户体验。该插件的主要特点包括: - **复选框支持**:每个树节点都可以设置...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    1. 获取当前选中的父节点信息,可能需要使用 layui.tree 的 API,如 `tree.checkStatus('demo')` 来获取选中状态。 2. 发送 AJAX 请求到后台,携带父节点的相关信息(例如 ID),请求新建子分类。 3. 在后台处理请求...

    27款jQuery Tree 树形结构插件

    - CheckTree 是带有复选框的jQuery Tree插件,适合需要多选功能的场景。 - 也是开源的。 5. **dhtmlxTree** - dhtmlxTree 是一个功能丰富的Tree Menu控件,支持AJAX和拖放操作。 - 提供多浏览器支持,包括多选...

    Ext tree json 动态加载完美实例

    通过以上步骤,我们就可以创建一个动态加载、支持多选和单选功能的Ext Tree Panel实例。这个名为"treedemo"的压缩包文件很可能包含了实现这一功能所需的代码和资源文件,包括XML数据文件、CSS样式和JavaScript脚本。...

    js tree,checkbox tree

    5. **数据源**:jstree支持多种数据源,可以是JSON、HTML或者AJAX请求。你可以根据实际需求,动态加载或更新树的数据。 6. **主题与插件**:jstree支持自定义主题,可以改变节点的样式以适应不同的界面设计。此外,...

    70个流行的AJAX 应用演示和源码下载

    #### Gmail Style Check Username AJAX Demo - **功能介绍**:一个类似Gmail用户名验证的AJAX示例。 - **应用场景**:适用于用户注册、账户设置等场景。 #### Google Web Toolkit Example Projects - **功能描述*...

    ExtJs4 Checkbox tree

    由于Checkbox Tree支持多级节点,因此在处理全选/全不选或者级联选中时,需要使用递归算法遍历所有子节点,同步它们的选中状态。 9. **样式和模板**: 复选框的样式可以通过CSS自定义,如改变选中、未选中和三态...

    自动生成树型结构,易懂

    这可以通过JavaScript的Ajax技术实现,如jQuery的`$.ajax()`方法,或者使用现代浏览器支持的`fetch` API。 此外,为了提高可维护性和可扩展性,可以考虑使用现有的JavaScript库或框架,如jQuery UI的Treeview插件,...

    easyui Tree系统管理

    4. **操作方法**:EasyUI Tree提供了丰富的API,如`tree.expand(node)`展开节点,`tree.collapse(node)`折叠节点,`tree.select(node)`选择节点,`tree.unselect(node)`取消选择,`tree.check(node, checked)`勾选或...

    ztree树形菜单

    它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...

    JQuery zTree v3.0 下载

    它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...

    layui实现checkbox的目录树tree的例子

    在众多模块中,Layui的tree模块能够轻松实现树形控件,支持诸如多选、单选、拖拽等交互特性。本文档将深入探讨如何使用Layui框架中的tree模块来实现具有checkbox复选框功能的目录树,这对于构建具有层级关系的选中...

    extjstree

    - **异步加载**:Ext.jstree支持按需加载节点,减少初次加载时的数据量,提高性能。 - **拖放操作**:允许用户通过拖放来重新组织树的结构。 - **可选节点**:节点可以被设置为可选,用户可以通过复选框选择特定...

    ztree连接数据库的一些增删该查

    4. **JSON数据支持**:支持静态和Ajax异步加载节点数据。 5. **皮肤和图标定制**:可通过CSS实现任意更换皮肤和自定义图标。 6. **复选框和单选按钮选择功能**:提供灵活的checkbox或radio选择模式。 7. **事件回调*...

    ZTree v3.x (JQuery Tree插件)

    配置对象中可以设置树的基本属性,如expandAll(是否全部展开)、check.enable(是否启用复选框)、callback事件等。 4. **节点操作**:ZTree提供了丰富的API接口,用于对树进行操作,如添加节点(`treeObj.add...

    ztree树形控件实例

    通过`check`属性,可以实现复选框功能,支持全选/全不选等操作。 六、zTree的实际应用 在实际项目中,zTree常被用于文件管理、目录导航、权限分配、组织结构展示等多个场景。通过与后台服务的配合,可以实现动态...

    两款带复选框的树形结构

    - **事件处理**:利用提供的事件API,如`select_node`或`check_node`,来响应用户的操作,如选择或取消选择节点。 - **样式定制**:根据项目UI风格,自定义节点的样式,包括复选框的样式。 - **性能优化**:对于大型...

    结合ztree的下拉框树形结构数据多选,单选

    $.fn.zTree.init($("#treeDemo"), setting, zNodes); ``` 而使用Ajax动态加载数据,你可以在`beforeAsync`回调函数中处理请求,并在`onAsyncSuccess`或`onAsyncError`中更新zTree: ```javascript var setting = {...

    js树状地区三级级联带复选框

    4. 监听JSTree的“check”或“uncheck”事件,以处理用户的多选操作。 5. 使用AJAX或JSON数据来动态加载地区信息,确保级联效果。 6. 实现保存用户选择的功能,将选中的节点ID或名称序列化为服务器可识别的格式。 ...

Global site tag (gtag.js) - Google Analytics