Question

我想用Lit元素构建一个自定义树表，我只是想知道我是否可以用jQuery树网格插件实现它。

这是我现在拥有的最好的（此解决方案未经Lit元素测试）：

代码：

var toggler = document.getElementsByClassName("caret");
var i;
var padding = 0;
console.log(this);
console.log(this.parentElement);
for (i = 0; i < toggler.length; i++) {
  console.log(toggler[i]);

  toggler[i].style.paddingLeft = (padding * 10) + "%";
  var list = toggler[i].parentElement.getElementsByClassName("name");
  var j;
  for (j = 0; j < list.length; j++) {
    list[j].style.paddingLeft = (padding * 15) + "%";
  }
  padding++;
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari */
  '
 transform: rotate(90deg);
}

.nested {
  display: none;
}

.active {
  display: block;
}

ul {
  width: 800px;
  /* change it to whatever you like */
  position: relative;
  /* these should be probably already set up by reset.css */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul:before,
ul:after {
  text-align: center;
  display: block;
  border: 1px solid black;
  border-bottom: 0;
  width: 48%;
}

li {
  text-align: left;
  width: 48%;
  float: left;
  border: 1px solid black;
  margin-bottom: -1px;
}

li:nth-child(even) {
  margin-left: -1px;
  background-color: antiquewhite;
}

.as-console-wrapper {
  max-height: 64px !important;
}

<ul id="myUL">
  <li><span class="caret"><span>Coffee</span></span>
    <ul class="nested">
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="caret"><span>Coffee</span></span>
        <ul class="nested">
          <li><span class="name">Coffee</span></li>
          <li><span>Timeline</span></li>
          <li><span class="caret"><span>Coffee</span></span>
            <ul class="nested">
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
            </ul>
          </li>
          <li><span>Timeline</span></li>
        </ul>
      </li>
      <li><span>Timeline</span></li>
    </ul>
  </li>
  <li><span>Timeline</span></li>
</ul>

我不知道这种树表的通用或最佳解决方案是什么，这是我的最佳猜测，我应该从哪里开始而不使用jQuery。有没有更好的方法来创建这种组件？

我想创建类似这样的https://vaadin.com/docs/v7/framework/components/components-treetable.html

我很好奇树形表通常如何在网络上实现。

Answer 1

是的，但确实存在一些非常基本的问题 - jQuery 做出了一些基本假设，这些假设在 2008 年非常有用，但被像 Lit 这样的异步库破坏了（特别是关于 DOM 何时准备好进行操作）。

您分享了一个 Vaadin 示例，但它们的组件无论如何都使用 Lit。我建议使用他们的而不是重新发明它。

然而，Lit 方法与 jQuery 不同。使用 jQuery，您可以构建 HTML，然后使用 $ 遍历 DOM、查找元素并连接事件。使用 Lit，您可以从模板构建 HTML 并将事件设置为，然后将其添加到 DOM（尽管在重新组合 SSR 时您可能会回退更类似于 jQuery 的东西）。

要使 jQuery 工作，您需要：

确保 jQuery 在组件加载之前加载
使用 firstUpdated 确保模板在运行 jQuery 之前已经呈现
确保您不用任何后续 Lit 更改替换 DOM（例如使用 repeat 而不是 map）
如果确实要添加元素，则需要 jQuery 来查找和重新设置它们。

将这段代码移植到 Lit 会比让 jQuery 工作明显容易得多。

代替：

<span class="caret"><span>Coffee</span></span>
<ul class="nested">...

和

document.getElementsByClassName("caret");
...
... .addEventListener("click" ...

你有：


html`
<span class="caret" @click=${this.toggleNode}>Coffee</span>
<ul class=${classMap({active: this.expanded, nested: true})}>...`;

可以将jQuery与Lit-element一起使用吗？

1 个答案: