JQuery族谱图类控件是一种非常有用的控件，可以帮助我们更好地展示数据和信息。这种控件可以用于许多场景，例如组织结构图、家谱图等等。

在JQuery族谱图类控件中，使用pre标签可以帮助我们更好地展示代码。我们可以将代码直接粘贴在pre标签中，这样可以让其他人更容易地理解我们的代码。

$(function(){
  var datascource = {
    name: '爷爷',
    children: [
      {
        name: '爸爸',
        children: [
          {
            name: '我',
          },
          {
            name: '哥哥',
          },
          {
            name: '妹妹',
          }
        ]
      },
      {
        name: '叔叔',
        children: [
          {
            name: '表哥',
          },
          {
            name: '表弟',
          }
        ]
      }
    ]
  };
  $('#chart-container').orgchart({
    'data' : datascource,
    'nodeContent': 'name'
  });
});

在上面的代码中，我们使用JQuery的orgchart插件来绘制一个简单的家谱图。我们定义了数据源datascource，并使用orgchart插件绘制了这个家谱图。插件的实现非常简单，只需要传递数据源和节点的内容就可以了。

总之，JQuery族谱图类控件是非常有用的控件，可以帮助我们更好地展示数据和信息。我们可以使用pre标签来展示代码，让其他人更容易地理解我们的代码。