我必须维护大量经典的ASP页面,其中许多页面都有表格数据,根本没有排序功能。无论原始开发人员在数据库查询中使用的顺序是什么,都将使您陷入困境。

我想给这些页面添加一些基本的排序,我用javascript在客户端完成。我已经完成了对给定列上的给定表按照给定方向进行排序的基本脚本,只要表受到我们在这里遵循的某些约定的限制,它就能很好地工作。

我想为UI做的是用插入符号(^)指明排序方向,然后。什么?是否有一个特殊的字符是与插入符号相反的?字母v不太合适。或者,是否有其他角色配对我可以使用?


我会用一些小图像。也会更好看。

或者,你也可以试试Windows自带的字符映射工具,或者试试这里。

我看到的另一个解决方案是使用Wingdings字体的符号。有很多箭头。

上下颠倒的旋曲被称为caron或háček。

它在TADS Latin-2扩展到HTML中有一个HTML实体:ˇ看起来像这样:ˇ,不幸的是,它的大小/比例与^插入符号不同。

或者你可以使用unicode U+30C。

有▲:▲▼:▼

你可以使用黑色三角形,Unicode值U+25b2和U+25bc。或者箭头,U+2191和U+2193。

总有一个小写的“v”。但说真的,除了Unicode,我能找到的只有&darr,看起来像↓。

c#代码

int i = 0;
char c = '↑';
i = (int)c;
Console.WriteLine(i); // prints 8593

int j = 0;
char d = '↓';
j = (int)d;
Console.WriteLine(j); // prints 8595

不要忘记∧(逻辑和)和∨(逻辑或)字符,这是我用来表示排序方向的:HTML实体&和;&或;分别。

一个强大的选择——也是一个激发创造力的选择——就是用方框画的角色来设计你自己的角色。

想要一个向下的“插入符号”?这里有一个:╲╱

我最近发现了它们——我很高兴使用这种自定义设计的字符来标记周围的东西:)。

我做了下标大写和粗体v。它工作得很完美(虽然它需要一些努力,如果它需要重复做)

语法:

<sub><strong>v</strong></sub>

输出: v

你能用document。write在span中绘制svg路径吗?span不是svg工作所必需的,它只是确保svg与carat旁边的任何文本保持内联。我使用margin-bottom将它与文本垂直居中,可能还有另一种方法。这是我在我的博客的侧导航(减去js)所做的。如果旁边没有文本,就不需要span或margin-bottom offset。

<div id="ID"></div>

<script type="text/javascript">
var x = document.getElementById('ID');

// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>

你可以考虑使用字体Awesome,而不是使用unicode或其他图标

代码可以像(a)一样简单,包括字体很棒,例如<链接rel="样式表" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (b)制作一个按钮,例如<button><i class="fa fa-arrow-down"></i></button>

^(插入符号-或Ascii回旋),由按shift + 6产生,似乎没有一个相对的Ascii,即Ascii反向回旋。

但对于你的替代字符配对,也有键盘组合,你可以使用:

ˆ (回旋) 移位 + alt + i 和 ˇ (卡隆) 移位 + alt + t

来源:fileformat.info

如果你需要React应用的字体,那么React Icons是一个非常好的资源,非常容易实现。它包含了很多库,而不仅仅是字体——太棒了。

没有上下颠倒的插入符号,但是你可以很容易地用CSS旋转插入符号。这是一个看似完美的简单解决方案。按“运行代码片段”查看它的运行情况:

.upsidedown { 变换:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); } .upsidedown。插入符号{ 显示:inline-block; 位置:相对; 下:0.15 em; } 更多条目<span class="颠倒插入号">^</span> .

请注意以下几点…

I did a little correction for the positioning of the caret, as it is normally high (thus low in the rotated version). You want to move it a little up. This 'little' is relative to the font-size, hence the 'em'. Depending on your font choice, you might want to fiddle with this to make it look good. This solution does not work in IE8. You should use a filter if you want IE8 support. IE8 support is not really required nor common in 2018. If you want to use this in combination with Twitter Bootstrap, please rename the class 'caret' to something else, like 'caret_down' (as it collides with a class name from Twitter Bootstrap).

˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅

˅˅˅Hǝɹǝsɐɯɐʇɔɥᴉuƃ年代ǝʇ˙˅˅˅ ˄˄˄这是一个匹配的集合。˄˄˄

˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄

“实际大小”:每人每个 (更多信息)


编辑:另一个选择…

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁Unicode # 8897 / U + 22 c1(“n - ary逻辑或“)

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀Unicode # 8896 / U + 22 c0(“n - ary逻辑和”)

实际尺寸:⋁⋀⋁⋀

U+2304向下箭头,在HTML格式为&#8964;

所以我想要插入符号完全像OWA一样,所以我下载了office365icons。woff从的 https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(必须登录才能做到,所以通过浏览器),然后,从网站复制浓缩风格:

  @font-face {
      font-family: 'Office365Icons';
      src: url('/fonts/office365icons.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }

  span.o-icon {
      font-family: 'Office365Icons';
      font-size: 14pt;
      line-height: 21px;
      color: #666;
  }

最后:

<span class="o-icon">&#xe088;</span>