Muszę utrzymywać dużą liczbę klasycznych stron ASP, z których wiele ma dane tabelaryczne bez możliwości sortowania. Niezależnie od kolejności, w jakiej pierwotny programista użyty w zapytaniu do bazy danych, utknąłeś.

Chcę zająć się kilkoma podstawowymi sortowaniami do kilku tych stron i robię to po stronie klienta za pomocą javascript. Mam już wykonany podstawowy skrypt do sortowania danej tabeli w danej kolumnie w danym kierunku i działa ona dobrze, o ile tabela jest ograniczona pewnymi konwencjami, które tutaj przestrzegamy.

To, co chcę zrobić dla interfejsu użytkownika, to po prostu wskazać kierunek sortowania za pomocą znaku karetki (^) i ... co? Czy jest jakiś specjalny znak, który jest przeciwieństwem karetki? List vnie do końca to uciął. Alternatywnie, czy mogę użyć innej pary znaków?

Jest ▲: & # 9650; oraz ▼: & # 9660;

Nie zapomnij o znakach ∧(logicznym i) i ∨(logicznym lub), tego używam do wskazywania kierunku sortowania: odpowiednio jednostek HTML ∧i ∨.

Zawsze jest małe „v”. Ale tak na poważnie, oprócz Unicode, wszystko, co mogę znaleźć &darr, to wyglądające jak ↓.

Odwrócony do góry obwód nazywa się karonem lub háčkiem.

Ma encję HTML w rozszerzeniu TADS Latin-2 do HTML: ˇ i wygląda następująco: which która niestety nie wyświetla się w tym samym rozmiarze / proporcji co ^ daszek.

Lub możesz użyć Unicode U+30C.

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

 ˅˅˅  Hǝɹǝ, s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 Oto  zestaw dopasowanie.  ˄˄˄

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

„Rzeczywisty rozmiar”: ˅˄˅˄  
_{(więcej informacji)}

Edycja: kolejna opcja ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{Unicode # 8897 / U + 22C1 ( informacje ) o}} nazwie N-ARY LOGICAL OR

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{Unicode # 8896 / U + 22C0 ( informacje )}} nazwie N-ARY LOGICAL AND

„Rzeczywisty rozmiar”: ⋁⋀⋁⋀

Potężną opcją - i która również pobudza kreatywność - jest projektowanie własnych postaci za pomocą postaci do rysowania w pudełku .

Chcesz wskazać „karetkę”? Oto jeden: ╲╱

Niedawno je odkryłem - i czerpię wielką przyjemność z używania takich niestandardowych znaków do etykietowania różnych rzeczy :).

Możesz używać czarnych trójkątów, wartości Unicode U + 25b2 i U + 25bc. Lub strzałki, U + 2191 i U + 2193.

kod 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

Możesz rozważyć użycie Font Awesome zamiast używania Unicode lub innych ikon

Kod może być tak prosty jak (a), w tym niesamowity czcionka, np. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(B) tworzenie przycisku takiego jak<button><i class="fa fa-arrow-down"></i></button>

Użyłbym kilku małych obrazów. Wyglądałby też lepiej.

Możesz też wypróbować narzędzie Mapa znaków, które jest dostarczane z systemem Windows lub poszukać tutaj .

Innym rozwiązaniem, które widziałem, jest użycie czcionki Wingdings do symboli. To ma wiele strzał.

Zrobiłem indeks dolny i pogrubione V. Działa idealnie (choć wymaga pewnego wysiłku, jeśli trzeba to powtarzać)

Składnia:

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

Wyjście:
_v

^(Daszek - lub ASCII circumflex) wytwarzany przez naciśnięcie shift+ 6, nie wydaje się mieć odwrotny ASCII, a mianowicie odwrócone ASCII okalającej.

Ale w przypadku alternatywnego parowania znaków, które również zawierają kombinacje klawiszy, możesz użyć:

ˆ (Circumflex) shift+ alt+ ii
ˇ (Caron) shift+ alt+t

Źródło: fileformat.info

Nie ma odwróconego znaku karetki, ale możesz łatwo obracać karetkę za pomocą CSS. To proste rozwiązanie, które wygląda idealnie. Naciśnij „Uruchom fragment kodu”, aby zobaczyć, jak działa:

.upsidedown {
transform:rotate(180deg); 
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.upsidedown.caret {
display: inline-block; 
position:relative; 
bottom: 0.15em;
}

more items <span class="upsidedown caret">^</span>

Proszę zwrócić uwagę na następujące ...

• Zrobiłem małą korektę dla położenia karetki, ponieważ zwykle jest ona wysoka (a więc niska w wersji obróconej). Chcesz go trochę podnieść. To „małe” odnosi się do wielkości czcionki, stąd „em”. W zależności od wyboru czcionki możesz chcieć się nią bawić, aby wyglądała dobrze.
• To rozwiązanie nie działa w IE8. Powinieneś użyć filtra, jeśli chcesz obsługiwać IE8. Obsługa IE8 nie jest tak naprawdę wymagana ani powszechna w 2018 roku.
• Jeśli chcesz używać tego w połączeniu z Twitter Bootstrap, zmień nazwę klasy „caret” na coś innego, na przykład „caret_down” (ponieważ koliduje z nazwą klasy z Twitter Bootstrap).

U + 2304 STRZAŁKA W DÓŁ , w HTML jako & # 8964;

Czy możesz po prostu narysować ścieżkę SVG wewnątrz zakresu za pomocą document.write? Rozpiętość nie jest wymagana, aby svg działał, po prostu zapewnia, że ​​svg pozostaje w linii z tekstem, obok którego znajduje się karat. Użyłem marginesu do dołu, aby wyśrodkować go pionowo z tekstem, ale może być inny sposób, aby to zrobić. Tak zrobiłem na bocznym panelu nawigacyjnym mojego bloga (minus js). Jeśli nie ma tekstu obok, nie potrzebujesz zakresu ani przesunięcia marginesu na dole.

<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>

Chciałem więc kursora dokładnie tak, jak w OWA, więc pobrałem office365icons.woffz https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(muszę się zalogować, aby to zrobić, podobnie jak w przeglądarce), a następnie skopiowałem gotowany styl ze strony:

  @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;
  }

I w końcu:

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

Jeśli potrzebujesz niesamowitej czcionki dla aplikacji React, to React Icons jest bardzo dobrym zasobem i bardzo łatwym do wdrożenia. Zawiera o wiele więcej bibliotek niż tylko niesamowite czcionki.