Bootstrap Tree View，简单而优雅的树结构组件（2）

/* 树形省市 */
.treeview .list-group-item.node-checked {
  color: red;
}
.treeview .list-group-item.node-selected {
  color: red;
}

// 省市级数据
var procityTreeData = YUNM._set.procityTreeData;
// 用户已经选中的城市，比如河南洛阳。
var init_code = $this.next("input[name=area]").val();
// 如果用户有选中项，则对选中项进行规则展示
if (init_code) {
  // 初始化选中项目
  $.each(procityTreeData, function(index, value) {
    // 通过i和省级的节点length进行对比，判断是否全选、未全选、全未选三种状态
    var i = 0;
    $.each(value.nodes, function(index1, value1) {
      if (init_code.indexOf(value1.code) != -1) {
        // 选中时先初始化state，再把state.checked设为true
        value1["state"] = {};
        value1["state"]["checked"] = true;
        i++;
      } else {
        // 否则重置state，保证procityTreeData数据的不被更改
        // 这个地方其实有待优化，由于js我还不算精通，所以不知道怎么把数组复制到一个新数组里，保证原始属于不被更改
        value1["state"] = {};
      }
    });
    value["state"] = {};
    // 市级节点有选中，那么省级节点的状态需要变化，根据上面制定的规则来
    if (i > 0) {
      // 市级全选，那么此时省级节点打钩
      if (value.nodes.length == i) {
        value["state"]["checked"] = true;
      }
      // 根据selected来设定颜色
      value["state"]["selected"] = true;
    } else {
      value["state"]["selected"] = false;
    }
  });
}

$("#procitytree").treeview({
  data : procityTreeData,// 赋值
  highlightSelected : false,// 选中项不高亮，避免和上述制定的颜色变化规则冲突
  multiSelect : false,// 不允许多选，因为我们要通过check框来控制
  showCheckbox : true,// 展示checkbox
  }).treeview('collapseAll', {// 节点展开
  silent : true
});

onNodeChecked : function(event, node) {
  YUNM.debug("选中项目为：" + node);
  // 省级节点被选中，那么市级节点都要选中
  if (node.nodes != null) {
    $.each(node.nodes, function(index, value) {
      $this.treeview('checkNode', value.nodeId, {
        silent : true
      });
    });
  } else {
    // 市级节点选中的时候，要根据情况判断父节点是否要全部选中
    // 父节点
    var parentNode = $this.treeview('getParent', node.nodeId);
    var isAllchecked = true; // 是否全部选中
    // 当前市级节点的所有兄弟节点，也就是获取省下面的所有市
    var siblings = $this.treeview('getSiblings', node.nodeId);
    for ( var i in siblings) {
      // 有一个没选中，则不是全选
      if (!siblings[i].state.checked) {
        isAllchecked = false;
        break;
      }
    }
    // 全选，则打钩
    if (isAllchecked) {
      $this.treeview('checkNode', parentNode.nodeId, {
        silent : true
      });
    } else {// 非全选，则变红
      $this.treeview('selectNode', parentNode.nodeId, {
        silent : true
      });
    }
  }
},
onNodeUnchecked : function(event, node) {
  YUNM.debug("取消选中项目为：" + node);
  // 选中的是省级节点
  if (node.nodes != null) {
    // 这里需要控制，判断是否是因为市级节点引起的父节点被取消选中
    // 如果是，则只管取消父节点就行了
    // 如果不是，则子节点需要被取消选中
    if (silentByChild) {
      $.each(node.nodes, function(index, value) {
        $this.treeview('uncheckNode', value.nodeId, {
          silent : true
        });
      });
    }
  } else {
    // 市级节点被取消选中
    var parentNode = $this.treeview('getParent', node.nodeId);
    var isAllUnchecked = true; // 是否全部取消选中
    // 市级节点有一个选中，那么就不是全部取消选中
    var siblings = $this.treeview('getSiblings', node.nodeId);
    for ( var i in siblings) {
      if (siblings[i].state.checked) {
        isAllUnchecked = false;
        break;
      }
    }
    // 全部取消选中，那么省级节点恢复到默认状态
    if (isAllUnchecked) {
      $this.treeview('unselectNode', parentNode.nodeId, {
        silent : true,
      });
      $this.treeview('uncheckNode', parentNode.nodeId, {
        silent : true,
      });
    } else {
      silentByChild = false;
      $this.treeview('selectNode', parentNode.nodeId, {
        silent : true,
      });
      $this.treeview('uncheckNode', parentNode.nodeId, {
        silent : true,
      });
    }
  }
  silentByChild = true;
},