Question

我目前有一个基本的html表，可以按列排序，例如：

SRC_URI = "git:///path-to-linux-source/.git/;branch=${KBRANCH};protocol=file"

但是我想要的是以类似于产品在网站上显示的格式显示，所以：

id | stationname | total
-------------------------
 1 | Khar        | 5
 2 | SantaCruz   | 3
 3 | Sion        | 2
 4 | VT          | 1
 5 | newFort     | 3
 6 | Bandra      | 2

但仍保留按“ id”，“ stationame”和“ total”排序的功能。感谢您的帮助！

Answer 1

您没有给我们太多帮助，所以我在做一些假设的同时总结了以下内容。其中最大的一点是您拥有from dateutil.parser import parse import csv def get_julian(_date): # _date is holding 20150926T104044Z the_date = parse(_date) julian_start = parse('19000101T000000Z') julian_days = (the_date - julian_start).days return julian_days with open('filename.csv') as f: csv_reader = csv.reader(f) for row in csv_reader: # Column 2, right? row[1] = get_julian(row[1]) # Do things and stuff with your corrected data.数据源。

以下内容相当灵活，您可以使用基本的html和css更改布局。直到javasctipt的唯一真正依赖项是用于数据绑定和排序的类名称。

基本上，我们正在发生的是一个模板，该模板没有礼貌地将其包装在json中。我们还有一个json表示形式，可以使用<script type="text/template" id="stationsTemplate">方法进行排序。最后，我们使用事件委托来处理动态添加的元素的click事件。

dynamicSort

/*Table Data*/
var stations = [{
    id: 1,
    name: "Khar",
    total: 5
  },
  {
    id: 2,
    name: "SantaCruz",
    total: 3
  },
  {
    id: 3,
    name: "Sion",
    total: 2
  },
  {
    id: 4,
    name: "VT",
    total: 1
  },
  {
    id: 5,
    name: "newFort",
    total: 3
  },
  {
    id: 6,
    name: "Bandra",
    total: 2
  }
];

/*Performs the sort on the obect property passed*/
function dynamicSort(property) {

  return function(a, b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result;
  }
}

//Generates the list
function generateList(sortedStations) {
  //Set Up the template
  var s = document.getElementById("stationsTemplate").innerHTML.trim();

  var holder = document.createElement('div');
  holder.innerHTML = s;
  var template = holder.childNodes;


  var stations = document.getElementById('stations');
  stations.innerHTML = "";
  sortedStations.forEach(function(object) {

    //Clone Template
    var newItem = template[0].cloneNode(true);

    //Populate it
    newItem.querySelector(".name").innerHTML = object.name;
    newItem.querySelector(".id").innerHTML = object.id;
    newItem.querySelector(".total").innerHTML = object.total;
    //Append it    
    document.getElementById("stations").appendChild(newItem);

  });
}

//Add event listener to the list and then use event delegation
document.getElementById("stations").addEventListener('click', function(e) {

  if (e.target) {
    var sortKey = "";
    if (e.target.classList.contains("lblId")) {
      sortKey = "id";
    } else if (e.target.classList.contains("lblName")) {
      sortKey = "name";
    } else if (e.target.classList.contains("lblTotal")) {
      sortKey = "total";
    }
  }

  if (sortKey !== "") {
    generateList(stations.sort(dynamicSort(sortKey)));
  }
});

//Initial build
generateList(stations);

#stations {
  list-style: none;
  padding: 0;
}

#stations li {
  display: inline-block;
  width: 250px;
  margin: 10px;
  background-color: #CCC;
  padding: 5px;
  vertical-align: top;
}

#stations label {
  font-weight: bold;
  cursor: pointer;
}

是的，可以对其进行优化，但是对于起点来说应该足够了

或者您可以使用以下

这不依赖于现有的数据结构，而是对数组中的实际DOM节点进行排序。

同样，您可以通过html和css更改布局。类名用于标识排序键和排序值。

Click on label to sort
<ul id="stations">

</ul>

<!-- Template for our stations -->
<script type="text/template" id="stationsTemplate">
  <li>
    <div><label class="lblName">Name:</label> <span class="name"></span></div>
    <div><label class="lblId">Id: </label><span class="id"></span></div>
    <div><label class="lblTotal">Total: </label><span class="total"></span></div>
  </li>
</script>

/*Performs the sort on the obect property passed*/
function dynamicSort(property) {

  return function(a, b) {
    var selector = "." + property;
    var aVal = a.querySelector(selector).innerHTML;
    var bVal = b.querySelector(selector).innerHTML;

    //Convert to number if appropriate - adjust if you need other data types
    if (!isNaN(aVal) && !isNaN(bVal)) {
      aVal = parseFloat(aVal);
      bVal = parseFloat(bVal);
    }

    var result = (aVal < bVal) ? -1 : (aVal > bVal) ? 1 : 0;
    return result;
  }
}

//Generates the list
function sortList(sortKey) {
  //Convert Node LIst to array 
  var arrItems = Array.prototype.slice.call(document.querySelectorAll("#stations li"));

  //Sort using our key
  arrItems.sort(dynamicSort(sortKey));

  //Append to original list
  var list = document.getElementById("stations");
  for (var i = 0; i < arrItems.length; i++) {
    list.appendChild(arrItems[i]);
  }
}

//Add event listener to the list and then use event delegation
document.getElementById("stations").addEventListener('click', function(e) {

  if (e.target) {
    var sortKey = "";
    if (e.target.classList.contains("lblId")) {
      sortKey = "id";
    } else if (e.target.classList.contains("lblName")) {
      sortKey = "name";
    } else if (e.target.classList.contains("lblTotal")) {
      sortKey = "total";
    }
  }

  if (sortKey !== "") {
    sortList(sortKey);
  }
});

#stations {
  list-style: none;
  padding: 0;
}

#stations li {
  display: inline-block;
  width: 250px;
  margin: 10px;
  background-color: #CCC;
  padding: 5px;
  vertical-align: top;
}

#stations label {
  font-weight: bold;
  cursor: pointer;
}

Answer 2

恕我直言，我认为对于类似电子商务的视图，您应该使用基于画廊的 Grid 系统。这是一个鞋子类别的演示文稿，您可以在其中按品牌进行排序。但显然，您可以添加各种排序/过滤功能。 @JonP 在他的回答中得到了肯定，我只是想采用另一种方法。但是就像他说的那样，“您没有给我们太多帮助” 也许您甚至不需要电子商务类型的视图，而只是将其用作比较，但是谁知道？也许对您或将来的某人会有帮助。运行代码段以查看是否对您有效：）

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  let x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    removeClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
  }
}

// Show filtered elements
function addClass(element, name) {
  let i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function removeClass(element, name) {
  let i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
const btnContainer = document.getElementById("myBtnContainer");
const btns = btnContainer.getElementsByClassName("btn");
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    let current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h2 {
    font-size: 2rem;
    word-break: break-all;
    color: #006400;
    font-family: Cursive;
    letter-spacing: 6px;
}

.row {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #00FF64;
  font-weight: bold;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #228B22;
   color: white;
}

<h2>Shoes Section</h2>
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('addidas')"> Addidas</button>
  <button class="btn" onclick="filterSelection('nike')"> Nike</button>
  <button class="btn" onclick="filterSelection('puma')"> Puma</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column addidas">
    <div class="content">
      <img src="https://assets.adidas.com/images/w_600,f_auto,q_auto/69721f2e7c934d909168a80e00818569_9366/Stan_Smith_Shoes_White_M20324_01_standard.jpg" alt="Addidas" style="width:100%">
      <h4>Model Zero</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column addidas">
    <div class="content">
      <img src="https://www.adidas.co.nz/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dw5dae7545/zoom/CQ2624_01_standard.jpg?sh=600&strip=false" alt="Addidas" style="width:100%">
      <h4>Model One</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column addidas">
    <div class="content">
      <img src="https://assets.adidas.com/images/w_600,f_auto,q_auto/ab12ced1d0a14151b88ea7fa00ee94a1_9366/Superstar_Foundation_Shoes_Black_B27140_01_standard.jpg" alt="Addidas" style="width:100%">
      <h4>Model Two</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column nike">
    <div class="content">
      <img src="https://kickz.akamaized.net/us/media/images/p/600/nike-AIR_FORCE_1_07_PRM_JDI-WHITE_WHITE_BLACK_TOTAL_ORANGE-1.jpg" alt="Nike" style="width:100%">
      <h4>Model Hero</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nike">
    <div class="content">
      <img src="https://kickz.akamaized.net/us/media/images/p/600/nike-AIR_MAX_270_GS-WHITE_DUSTY_CACTUS_BLACK-1.jpg" alt="Nike" style="width:100%">
      <h4>Model XYZ</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  

  <div class="column puma">
    <div class="content">
      <img src="https://images.finishline.com/is/image/FinishLine/19097402_BLK?$Main_gray$" alt="Puma" style="width:100%">
      <h4>Model XYZ</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column puma">
    <div class="content">
      <img src="https://i.ebayimg.com/images/g/PfkAAOSwE1BbhcWz/s-l640.jpg" alt="Puma" style="width:100%">
      <h4>Puma XS</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

重新格式化HTML表格

2 个答案: