Fatal编程技术网
  • javascript/
  • Javascript 突出显示并滚动引导树视图内部

Javascript 突出显示并滚动引导树视图内部

javascript jquery twitter-bootstrap-3

Javascript 突出显示并滚动引导树视图内部,javascript,jquery,twitter-bootstrap-3,treeview,bootstrap-treeview,Javascript,Jquery,Twitter Bootstrap 3,Treeview,Bootstrap Treeview,我正在引导模式中构建一个引导树。搜索时，将搜索所有节点，并在匹配发生时高亮显示。我的模态有固定的高度，如果搜索的元素出现在树的底部，我必须滚动查看元素。有匹配项时，是否可以自动滚动到第一个匹配的元素。这是我正在使用的插件。 一些代码供参考 <div class="row"> <hr> <h2>Searchable Tree</h2> <div class="col-sm-4"> <h2>

我正在引导模式中构建一个引导树。搜索时，将搜索所有节点，并在匹配发生时高亮显示。我的模态有固定的高度，如果搜索的元素出现在树的底部，我必须滚动查看元素。有匹配项时，是否可以自动滚动到第一个匹配的元素。这是我正在使用的插件。

一些代码供参考

<div class="row">
    <hr>
    <h2>Searchable Tree</h2>
    <div class="col-sm-4">
      <h2>Input</h2>
      <!-- <form> -->
        <div class="form-group">
          <label for="input-search" class="sr-only">Search Tree:</label>
          <input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-ignore-case" value="true" checked>
            Ignore Case
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
            Exact Match
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-reveal-results" value="true" checked>
            Reveal Results
          </label>
        </div>
        <button type="button" class="btn btn-success" id="btn-search">Search</button>
        <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
      <!-- </form> -->
    </div>
    <div class="col-sm-4">
      <h2>Tree</h2>
      <div id="treeview-searchable" class="treeview"></div>

    </div>
    <div class="col-sm-4">
      <h2>Results</h2>
      <div id="search-output"></div>
    </div>
  </div>

      <div id="tree"></div>




可搜索树
输入
搜索树：
忽略案例
精确匹配
揭示结果
搜寻
清楚的
树
结果
Javascript:

    var tree1 =[ {
    text:"GrandParent",
    nodes:[
    {
  text: "Parent 1",

},
{
  text: "Parent 2"
},
{
  text: "Parent 3"
},
{
  text: "Parent 4"
},
{
  text: "Parent 5",
   nodes: [
    {
      text: "Child 5",
      nodes: [
        {
          text: "Grandchild 4"
         },
        {
          text: "Grandchild 5"
        }
      ]
    },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 6",
      nodes: [
     {
        text: "Child 6",
        nodes: [
          {
            text: "Grandchild 8"
          },
          {
            text: "Grandchild 9"
          }
        ]
      },
      {
        text: "Child 10"
      }
    ]
  }
]
}];

 function getTree() {
  // Some logic to retrieve, or generate tree structure
  return tree1;
  }


  var $searchableTree = $('#treeview-searchable').treeview({
     data: getTree(),
  });

var search = function(e) {
var pattern = $('#input-search').val();
var options = {
  ignoreCase: $('#chk-ignore-case').is(':checked'),
  exactMatch: $('#chk-exact-match').is(':checked'),
  revealResults: $('#chk-reveal-results').is(':checked')
    };
   var results = $searchableTree.treeview('search', [ pattern, options ]);

   var output = '<p>' + results.length + ' matches found</p>';
   $.each(results, function (index, result) {
  output += '<p>- ' + result.text + '</p>';
  });
  $('#search-output').html(output);
 }

 $('#btn-search').on('click', search);
 $('#input-search').on('keyup', search);

 $('#btn-clear-search').on('click', function (e) {
 $searchableTree.treeview('clearSearch');
 $('#input-search').val('');
 $('#search-output').html('');
});

var myTree = [{
  text: "Parent1",
  nodes: [{
    text: "Child11",
    nodes: [{
      text: "GrandChild111"
    }, {
      text: "GrandChild112"
    }]
  }, {
    text: "Child12"
  }]
}, {
  text: "Parent2",
  nodes: [{
    text: "Child21"
  }, {
    text: "Child22"
  }]
}, {
  text: "Parent3",
  nodes: [{
    text: "Child31"
  }, {
    text: "Child32"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent4"
}, {
  text: "Parent5",
  nodes: [{
    text: "Child51"
  }, {
    text: "Child52"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent6"
}, {
  text: "Parent7",
  nodes: [{
    text: "Child71",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }, {
    text: "Child72",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }]
}, {
  text: "Parent8"
}, {
  text: "Parent9",
  nodes: [{
    text: "Child91"
  }, {
    text: "Child92"
  }]
}, {
  text: "Parent10"
}];

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return myTree;
}
$('#tree').bind('mousewheel', function(e) {
  $(this).scrollTop($(this).scrollTop() - e.originalEvent.wheelDeltaY);
  return false;
});
var $searchableTree = $('#tree').treeview({
  data: getTree(),
  levels: 1
});
var search = function(e) {
  var input, filter, div, ul, li, a, i;
  var pattern = $('#input-search').val();
  var options = {
    ignoreCase: true,
    exactMatch: false,
    revealResults: true,
  };
  $searchableTree.treeview('search', [pattern, options]);

  //Scrolling to the element that is searched
  input = document.getElementById("input-search");
  filter = input.value.toUpperCase();
  div = document.getElementById("tree");
  li = div.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].scrollIntoView(false)[0];

    }
  }
}
$('#btn-search').on('click', search);

$('#btn-clear-search').on('click', function(e) {
  $searchableTree.treeview('clearSearch');
  $('#input-search').val('');
  $('#search-output').html('');
});

var tree1=[{
文字：“祖父母”，
节点：[
{
文本：“父1”，
},
{
正文：“家长2”
},
{
正文：“家长3”
},
{
正文：“家长4”
},
{
正文：“家长5”，
节点：[
{
案文：“儿童5”，
节点：[
{
正文：“孙女4”
},
{
正文：“孙女5”
}
]
},
{
案文：“儿童2”
}
]
},
{
正文：“家长6”，
节点：[
{
案文：“儿童6”，
节点：[
{
正文：“孙女8”
},
{
正文：“孙女9”
}
]
},
{
案文：“儿童10”
}
]
}
]
}];
函数getTree（）{
//一些用于检索或生成树结构的逻辑
返回树1；
}
变量$searchableTree=$（“#treeview可搜索”）.treeview({
数据：getTree（），
});
变量搜索=函数（e）{
var模式=$（“#输入搜索”）.val（）；
变量选项={
ignoreCase:$（“#chk忽略大小写”）。是（“：选中”），
exactMatch:$（“#chk精确匹配”）。是（“：选中”），
revealResults:$（“#chk显示结果”）。是（“：选中”）
};
var results=$searchableTree.treeview（'search'，[pattern，options]）；
var输出=“”+results.length+”找到匹配项
”；
$.each（结果、函数（索引、结果）{
输出+='-'+result.text+'
'；
});
$（'#搜索输出'）.html（输出）；
}
$（“#btn搜索”）。在（'click'，search'）上；
$（“#输入搜索”）。在（'keyup'，search'）上；
$（“#btn清除搜索”）。在（'click'，函数（e）上{
$searchableTree.treeview（'clearSearch'）；
$（'#输入搜索'）.val（''）；
$（'#搜索输出'）.html（''）；
});
这是我做的供参考的小提琴

假设树存在于固定高度引导模式中，是否可以自动滚动到第一个匹配？

我最近开始使用引导树视图，并提出了相同的问题

解决方案：

我们可以使用scrollIntoView（）函数。 Bootstrap treeview已经有一个突出显示值的搜索选项，您可以扩展它

我使用了，而不是过滤它向下滚动到正在搜索的值

代码参考：

HTML:


搜寻
清楚的
树
Javascript:

    var tree1 =[ {
    text:"GrandParent",
    nodes:[
    {
  text: "Parent 1",

},
{
  text: "Parent 2"
},
{
  text: "Parent 3"
},
{
  text: "Parent 4"
},
{
  text: "Parent 5",
   nodes: [
    {
      text: "Child 5",
      nodes: [
        {
          text: "Grandchild 4"
         },
        {
          text: "Grandchild 5"
        }
      ]
    },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 6",
      nodes: [
     {
        text: "Child 6",
        nodes: [
          {
            text: "Grandchild 8"
          },
          {
            text: "Grandchild 9"
          }
        ]
      },
      {
        text: "Child 10"
      }
    ]
  }
]
}];

 function getTree() {
  // Some logic to retrieve, or generate tree structure
  return tree1;
  }


  var $searchableTree = $('#treeview-searchable').treeview({
     data: getTree(),
  });

var search = function(e) {
var pattern = $('#input-search').val();
var options = {
  ignoreCase: $('#chk-ignore-case').is(':checked'),
  exactMatch: $('#chk-exact-match').is(':checked'),
  revealResults: $('#chk-reveal-results').is(':checked')
    };
   var results = $searchableTree.treeview('search', [ pattern, options ]);

   var output = '<p>' + results.length + ' matches found</p>';
   $.each(results, function (index, result) {
  output += '<p>- ' + result.text + '</p>';
  });
  $('#search-output').html(output);
 }

 $('#btn-search').on('click', search);
 $('#input-search').on('keyup', search);

 $('#btn-clear-search').on('click', function (e) {
 $searchableTree.treeview('clearSearch');
 $('#input-search').val('');
 $('#search-output').html('');
});

var myTree = [{
  text: "Parent1",
  nodes: [{
    text: "Child11",
    nodes: [{
      text: "GrandChild111"
    }, {
      text: "GrandChild112"
    }]
  }, {
    text: "Child12"
  }]
}, {
  text: "Parent2",
  nodes: [{
    text: "Child21"
  }, {
    text: "Child22"
  }]
}, {
  text: "Parent3",
  nodes: [{
    text: "Child31"
  }, {
    text: "Child32"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent4"
}, {
  text: "Parent5",
  nodes: [{
    text: "Child51"
  }, {
    text: "Child52"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent6"
}, {
  text: "Parent7",
  nodes: [{
    text: "Child71",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }, {
    text: "Child72",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }]
}, {
  text: "Parent8"
}, {
  text: "Parent9",
  nodes: [{
    text: "Child91"
  }, {
    text: "Child92"
  }]
}, {
  text: "Parent10"
}];

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return myTree;
}
$('#tree').bind('mousewheel', function(e) {
  $(this).scrollTop($(this).scrollTop() - e.originalEvent.wheelDeltaY);
  return false;
});
var $searchableTree = $('#tree').treeview({
  data: getTree(),
  levels: 1
});
var search = function(e) {
  var input, filter, div, ul, li, a, i;
  var pattern = $('#input-search').val();
  var options = {
    ignoreCase: true,
    exactMatch: false,
    revealResults: true,
  };
  $searchableTree.treeview('search', [pattern, options]);

  //Scrolling to the element that is searched
  input = document.getElementById("input-search");
  filter = input.value.toUpperCase();
  div = document.getElementById("tree");
  li = div.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].scrollIntoView(false)[0];

    }
  }
}
$('#btn-search').on('click', search);

$('#btn-clear-search').on('click', function(e) {
  $searchableTree.treeview('clearSearch');
  $('#input-search').val('');
  $('#search-output').html('');
});

var myTree=[{
正文：“家长1”，
节点：[{
案文：“儿童11”，
节点：[{
案文：“111”
}, {
案文：“112”
}]
}, {
案文：“儿童12”
}]
}, {
正文：“父母2”，
节点：[{
案文：“儿童21”
}, {
案文：“儿童22”
}]
}, {
正文：“家长3”，
节点：[{
案文：“儿童31”
}, {
案文：“儿童32”
}, {
案文：“儿童33”
}]
}, {
正文：“父母4”
}, {
正文：“家长5”，
节点：[{
案文：“儿童51”
}, {
案文：“儿童52”
}, {
案文：“儿童33”
}]
}, {
正文：“家长6”
}, {
正文：“父母7”，
节点：[{
文本：“Child71”，
节点：[{
案文：“711”
}, {
案文：“712”
}]
}, {
案文：“儿童72”，
节点：[{
案文：“711”
}, {
案文：“712”
}]
}]
}, {
正文：“父母8”
}, {
正文：“父母9”，
节点：[{
案文：“儿童91”
}, {
案文：“儿童92”
}]
}, {
正文：“父母10”
}];
函数getTree（）{
//一些用于检索或生成树结构的逻辑
返回我的树；
}
$（“#树”）.bind（'mousewheel'，函数（e）{
$（this.scrollTop（$（this.scrollTop（）-e.originalEvent.wheelDeltaY）；
返回false；
});
var$searchableTree=$（“#tree”）.treeview({
数据：getTree（），
级别：1
});
变量搜索=函数（e）{
无功输入、滤波器、div、ul、li、a、i；
var模式=$（“#输入搜索”）.val（）；
变量选项={
ignoreCase：是的，
精确匹配：错误，
结果显示：正确，
};
$searchableTree.treeview（'search'，[pattern，options]）；
//滚动到要搜索的元素
输入=document.getElementById（“输入搜索”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“树”）；
li=div.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].scrollIntoView（false）[0]；
}
}
}
$（“#btn搜索”）。在（'click'，search'）上；
$（“#btn清除搜索”）。在（'click'，函数（e）上{
$searchableTree.treeview（'clearSearch'）；
$（'#输入搜索'）.val（''）；
$（'#搜索输出'）.html（''）；
});
这部分代码过滤并滚动到匹配的值：

input = document.getElementById("input-search");
filter = input.value.toUpperCase();
div = document.getElementById("tree");
li = div.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].scrollIntoView(false)[0];

        }
      }

input=document.getElementById（“输入搜索”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“树”）；
li=div.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].scrollIntoView（false）[0]；
}
}
我在这行的末尾加了零，这样它就会滚动到列表中的第一个匹配项

李[i].scrollIntoView（false）[0]

这里有一个到演示的链接-

I