我需要创建一个带有固定标题和固定第一列的html表(或类似的东西).
到目前为止我看到的每个解决方案都使用Javascript或jQuery
设置scrollTop/scrollLeft,但它在移动浏览器上无法顺利运行,所以我正在寻找一个纯CSS解决方案.
我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也得到修复.
我想让它在webkit浏览器上工作或使用一些css3
功能,但我再说一遍,我不想Javascript
用于滚动.
编辑:这是我想要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html
我需要使用 CSS 在第一行文本之后实现点引导符,以便在纹理/图像背景上使用它。
预期行为:
我在互联网上看到了一些点领导者的实现。他们都使用以下技术之一:
<div class=item1>
<span class=text1>
Text
</span>
<span class=price1>
$100
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
<div class=item1>
<span class=text1>
Text
</span>
<span class=price1>
$100
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
<div class=item2>
<span class=text2>
<span class=bg2>
Text
</span>
</span>
<span class=price2>
<span class=bg2>
$100
</span>
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
.item1 {
display: flex;
}
.text1 {
flex-grow: 1;
position: relative;
overflow: hidden;
}
.text1::after {
content: '';
position: absolute;
bottom: 0;
border-bottom: 1px dotted grey;
width: 100%;
}
.price1 {
align-self: flex-end;
} …
Run Code Online (Sandbox Code Playgroud) 我有两个这样的课程:
public class A {
String aProp = "aProp";
public String getAProp() {
return aProp;
}
}
public class B {
String bProp = "bProp";
A a = new A();
@JsonProperty("bProp")
public String getBProp() {
return bProp;
}
@JsonSerialize(using = CustomSerializer.class)
public A getA() {
return a;
}
}
Run Code Online (Sandbox Code Playgroud)
我期待得到像这样的JSON:
{
"bProp": "bProp", // just serizlised bProp
"sProp1": "sProp1_aProp", // computed using aProp
"sProp2": "sProp2_aProp" // computed another way
}
Run Code Online (Sandbox Code Playgroud)
所以我写了这样的习惯JsonSerializer
:
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;
public …
Run Code Online (Sandbox Code Playgroud) 现在我正在开发相当庞大而复杂的webapp并且必须处理大量的客户端js代码,并且为了让我的生活更轻松,我正试图尽可能地解耦这些代码.
我受到Nicholas Zakas(http://www.youtube.com/watch?v=vXjVFPosQHw)和Addy Osmani(http://addyosmani.com/largescalejavascript)谈论可扩展的js架构的巨大启发,并试图应用一些他们的想法对我的工作.
我已将所有代码分隔到多个独立模块中,并使用某种介体处理所有相互通信.在大多数情况下,这种方法很有效.但在某些情况下我认为还不够.
我正在研究的其中一个模块代表了一个非常复杂的类似列表的结构.这是一些简化的例子:
除了一些渲染逻辑,负责这个页面的模块应该处理:
我已经执行了所有不相关的逻辑(例如编辑和删除逻辑通过事件执行到另一个模块),但模块大小仍然很大(超过1K行代码),我不知道如何减少它.此外,我正在为我的模块使用模块模式,因此在多个文件之间分离逻辑更加困难.
所以我来到这里问有没有办法在单个模块中解耦复杂的逻辑?
更新:
我想澄清一些事情.我非常清楚如何在代码中的多个文件中分离模块("模块"与模块模式) .
但我真正寻找的是在单个模块中分离问题的新逻辑方式(来自NKZ演示的"模块").
html ×3
css ×2
architecture ×1
block ×1
css3 ×1
decoupling ×1
flexbox ×1
html-table ×1
jackson ×1
java ×1
javascript ×1
json ×1
markup ×1
module ×1
scalability ×1