2：确定数据结构
var menudata = [{
id: “0.1”,//唯一的ID即可
text: “Beyondbit UI Demo”,
hasChildren: true,
isexpand: true,
complete: true,
ChildNodes: [{
id: “0.1.1”,
text: “日期选择”,
hasChildren: true,
isexpand: false,
complete: true,
ChildNodes: [{
id: “0.1.1.1”,
text: “控件演示”,
value: “Testpages/datepickerDemo.htm”,
hasChildren: false,
isexpand: false,
complete: true,
ChildNodes: null
},
…
]
这样的结构有个好处就数据本身是带层次的，非常利于遍历，在后面的级联关联中会看到
3： 面子做好了那就开始做里子了，编写脚本（Javascript）
我是JQuery得拥护者，所以自然js的框架自然是采用Jquery了
先上个完整代码，再逐一分析
/****************************************
author:xuanye.wan@gmail.com
page:http://xuanye.cnblogs.com/
***************************************/
(function($) {
$.fn.swapClass = function(c1, c2) {
return this.removeClass(c1).addClass(c2);
}
$.fn.switchClass = function(c1, c2) {
if (this.hasClass(c1)) {
return this.swapClass(c1, c2);
}
else {
return this.swapClass(c2, c1);
}
}
$.fn.treeview = function(settings) {
var dfop =
{
method: “POST”,
datatype: “json”,
url: false,
cbiconpath: “/images/icons/”,
icons: [“checkbox_0.gif”, “checkbox_1.gif”, “checkbox_2.gif”],
showcheck: false, //是否显示选择
oncheckboxclick: false, //当checkstate状态变化时所触发的事件，但是不会触发因级联选择而引起的变化
onnodeclick: false,
cascadecheck: true,
data: null,
clicktoggle: true, //点击节点展开和收缩子节点
theme: “bbit-tree-arrows” //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows
}
$.extend(dfop, settings);
var treenodes = dfop.data;
var me = $(this);
var id = me.attr(“id”);
if (id == null || id == “”) {
id = “bbtree” + new Date().getTime();
me.attr(“id”, id);
}
var html = [];
buildtree(dfop.data, html);
me.addClass(“bbit-tree”).html(html.join(“”));
InitEvent(me);
html = null;
//预加载图片
if (dfop.showcheck) {
for (var i = 0; i < 3; i++) {
var im = new Image(16,16);
im.src = dfop.cbiconpath + dfop.icons[i];
