我想用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
我很好奇树形表通常如何在网络上实现。
答案 0 :(得分:1)
是的,但确实存在一些非常基本的问题 - jQuery 做出了一些基本假设,这些假设在 2008 年非常有用,但被像 Lit 这样的异步库破坏了(特别是关于 DOM 何时准备好进行操作)。
您分享了一个 Vaadin 示例,但它们的组件无论如何都使用 Lit。我建议使用他们的而不是重新发明它。
然而,Lit 方法与 jQuery 不同。使用 jQuery,您可以构建 HTML,然后使用 $
遍历 DOM、查找元素并连接事件。使用 Lit,您可以从模板构建 HTML 并将事件设置为,然后将其添加到 DOM(尽管在重新组合 SSR 时您可能会回退更类似于 jQuery 的东西)。
要使 jQuery 工作,您需要:
firstUpdated
确保模板在运行 jQuery 之前已经呈现repeat
而不是 map
)将这段代码移植到 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})}>...`;