我的第一个JQUERY 插件 tree3

自从接触了JUQYER这个东西,从此就深深喜欢上了她,平时都在用别人写的插件,今天我也贴一个自己的插件,这可是我的处女作阿...写的不怎么样,请大家多多指教.

 

这个插件的功能是把.NET的TREEVIEW控件的CHECKBOX增加三态控制,并选择父节点自动选择其子节点的功能.

 

先看看效果图吧:

 

插件源码代码地址: http://plugins.jquery.com/project/tree3

 

 

也可以复制下面内容保存为JS文件,这个插件是针对.NET的treeview控件设计的

/*! * jQuery tristate tree Plugin (with Transition Definitions) * Copyright (c) 2007-2009 刘君飞 * Version: 1.0 (2009-08-20) * Requires: jQuery v1.2.6 or later * 这个插件是针对.NET的treeview控件设计的带三态CHECKBOX功能的插件 * 使用方法： <div id="tree"> <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All"> </asp:TreeView> </div> $(document).ready(function() { $("#tree").tree3(); }); */ (function($) { $.fn.extend({ tree3: function() { return this.each(function() { InitChb($(this)); }); } }); function InitChb($pNode) { // 遍历当前所有子节点 $pNode.children("div").each(function() { var $node = $(this); var $cboxs = $node.children("table").find(":checkbox"); $cboxs.click(function() { // 设置子结节的复选框状态 $(this).parents("table:first").next("div:first").find(":checkbox").attr({ checked:$(this).attr("checked"),indeterminate:false }); // 设置父节点的复选框状态 SetParentChecked($node, $cboxs); }); // 递归当前节点 InitChb($node); }); } // 设置父节点 function SetParentChecked($pNode, $cboxs) { var v1 = true, v2 = false, v3 = false; $cboxs.each(function() { v1 &= $(this).attr("checked"); v2 |= $(this).attr("checked"); v3 |= $(this).attr("indeterminate"); }); $chb = $pNode.prev("table").find(":checkbox"); if ($chb.size() > 0) { $chb.attr({ checked: v1, indeterminate: !v1 && v2 || v3 }); SetParentChecked($pNode.parent(), $pNode.parent().children("table").find(":checkbox")); } } })(jQuery);