java - 如何从 JavaScript 中的 div 中获取值并对其进行排序？-6ren

java - 如何从 JavaScript 中的 div 中获取值并对其进行排序？

转载作者：行者123 更新时间：2023-12-01 13:58:49

我正在制作一个从 servlet 接收数据到 jsp 页面的应用程序。我使用 List<> 机制来存储和检索数据。所以我曾经使用过一段html设计代码并将其嵌入到for循环中显示数据直到List<>数据结束。我想使用 java 脚本对 jsp 页面上检索到的数据进行排序，但我不知道如何在 Java 脚本中获取检索到的数据的值。

我的 JSP 代码:

<div class="listinggitems">
      <%
            List<Integer> prdIDList = (List<Integer>)request.getAttribute("prodID");                    
            List<String> prdNAMEList = (List<String>)request.getAttribute("prodNAME");
            List<String> prdIMAGEList = (List<String>)request.getAttribute("prodIMAGE");
            List<Float> prdPRICEList = (List<Float>)request.getAttribute("prodPRICE");
            List<String> prdFEATUREList = (List<String>)request.getAttribute("prodFEATURE");

            for(int i = 0;i < prdIDList.size();i++)
            {

                Integer prdID = prdIDList.get(i);
                String prdNAME = prdNAMEList.get(i);
                String prdIMAGE = prdIMAGEList.get(i);
                Float prdPRICE = prdPRICEList.get(i);
                String prdFEATURE = prdFEATUREList.get(i);

      %>     
         <div class="mainitemlist">
          <div class="mainitemlistimage"><div align="center"><a href="product?pid=<%= prdID %>"> <img src="product_images/<%= prdIMAGE %>" height="125px" width="100px"></a></div></div>

            <div class="mainitemlistname">
              <div align="center"><a href="product?pid=<%= prdID %>"  style="color: #9caeb9;text-decoration: none;"><%= prdNAME %></a></div>
            </div>
            <div class="mainitemlistprice">
              <div align="center"><%= prdPRICE %></div>
            </div>
          <div class="mainitemlistfeatures"><div align="center"><%= prdFEATURE %></div></div>          
        </div>
       <%
            }
       %>

      </div>

我拿了 2 个按钮:1 用于按价格对数据进行排序，2 用于按名称对数据进行排序。

当用户单击按钮时，它会调用 Java 脚本函数对数据进行排序。

But how to get all data into Java Script for to sort I don't know.

谁能指导我，该怎么做？

最佳答案

我坚信，解决此问题的最合适的解决方案是使用 Hussain Akhtar Wahid 所建议的 AJAX，但我的将产品数据转换为 JSON 对象并将其传递给 JavaScript 函数的建议将允许您使用主要是JavaScript。但是，如果您只需要使用请求对象和 JavaScript，那么我为您提供了一个解决方案。

简而言之，您必须将请求对象中的产品数据获取到 JavaScript 对象中。这是可能的，但并不漂亮。然后，一旦产品数据位于 JavaScript 对象中，您就可以使用 JavaScript 中的自定义排序函数对其进行排序。

这是修改后的 JSP 代码:ShowProduct.jsp

  <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
  <%@ page import="java.util.*"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Product Catalogue</title>
  <link rel="stylesheet" type="text/css" href="sortList/layout.css" />
  <script type="text/javascript" src="sortList/sort.js"></script>
  <script type="text/javascript">   
  //Puts the products into the product array of the catalogue object
    <%
        List<Integer> prdIDList = (List<Integer>) request.getAttribute("prodID");
        List<String> prdNAMEList = (List<String>) request.getAttribute("prodNAME");
        List<String> prdIMAGEList = (List<String>) request.getAttribute("prodIMAGE");
        List<Float> prdPRICEList = (List<Float>) request.getAttribute("prodPRICE");
        List<String> prdFEATUREList = (List<String>) request.getAttribute("prodFEATURE");

        for (int i = 0; i < prdIDList.size(); i++) {

            Integer prdID = prdIDList.get(i);
            String prdNAME = prdNAMEList.get(i);
            String prdIMAGE = prdIMAGEList.get(i);
            Float prdPRICE = prdPRICEList.get(i);
            String prdFEATURE = prdFEATUREList.get(i);
    %>      
    catalogue.product[<%=i%>] = {pId:<%=prdID%>, pImage:"<%=prdIMAGE%>", pName:"<%=prdNAME%>", pPrice:<%=prdPRICE%>, pFeature:"<%=prdFEATURE%>"};
    <%
        }
    %>
  </script></head>
  <body onload="catalogue.sortByName()">

  <button onclick="catalogue.sortById()">Sort By Id</button>
  <button onclick="catalogue.sortByName()">Sort By Name</button>
  <button onclick="catalogue.sortByPrice()">Sort By Price</button>

  <div id="container"><div id="mainitemlist"></div></div>

  </body></html>

有很多变化需要讨论，所以我会简短地说。两大变化。

我没有立即显示产品数据，而是循环浏览列表并将数据放入 JavaScript 对象数组中。该数组称为产品，是目录文字对象的属性。请参阅下面的 JavaScript 文件。
catalogue.product[<%=i%>] = {pId:<%=prdID%>, pImage:"<%=prdIMAGE%>", pName:"<%=prdNAME%>", pPrice:<%=prdPRICE%>, pFeature:"<%=prdFEATURE%>"};
我创建了一个 div，在产品数据排序后将其插入其中。
<div id="container"><div id="mainitemlist"></div></div>

我还创建了三个按钮来对产品数据进行排序

 <button onclick="catalogue.sortById()">Sort By Id</button>
 <button onclick="catalogue.sortByName()">Sort By Name</button>
 <button onclick="catalogue.sortByPrice()">Sort By Price</button>

我创建了一个名为 sort.js 的 JavaScript 文件，用于对产品数据进行排序和显示。

// The catalogue literal object
var catalogue = {

sortDirection: -1, // The direction of the sort
product: [], // The product list generated by the JSP


// Sorts the products by their ID
sortById: function sortById() { 
    catalogue.product.sort(function(a, b) {
        return catalogue.sortDirection * (a.pId - b.pId);
    });
    catalogue.sortDirection *= -1;      
    catalogue.display();
},


// Sorts the products by their NAME
sortByName: function sortByName() {
    catalogue.product.sort(function(a, b) {
        var result = 0;
        var nameA = a.pName.toLowerCase(), nameB = b.pName.toLowerCase();
        if (nameA < nameB) {
            result = -1;
        } else if (nameA > nameB) {
            result = 1;
        } else {
            result = 0;
        }
        return catalogue.sortDirection*result;          
    });

    catalogue.sortDirection *= -1;  
    catalogue.display();
},


// Sorts the products by their PRICE
sortByPrice: function sortByPrice() {
    catalogue.product.sort(function(a, b) {
        return catalogue.sortDirection * (a.pPrice - b.pPrice);
    });
    catalogue.sortDirection *=  -1; 
    catalogue.display();
},


// Displays the sorted products
display: function display(){        

    var node = document.getElementById('container');
    while (node.hasChildNodes()) {
        node.removeChild(node.firstChild);
    }

    var html = "";

    for(var i = 0; i < catalogue.product.length; i++){              
        var tableRow = new catalogue.tableRow(catalogue.product[i]);  
        html += tableRow.generateHTML();    
    }

    document.getElementById('container').innerHTML = html;
},


// Contructor object for the table row
tableRow: function tableRow(product){

    this.id = product.pId;
    this.image = product.pImage;
    this.name = product.pName;
    this.price = product.pPrice;
    this.feature = product.pFeature;

    var image = "<div id='mainitemlist'><div id='mainitemlistimage'><a href='product?pid=prdID'><img src='product_images/prdIMAGE'></a></div>";
    var name = "<div id='mainitemlistname'><a href='product?pid=prdID'>prdNAME</a></div>";
    var price = "<div id='mainitemlistprice'>prdPRICE</div>";
    var features = "<div id='mainitemlistfeatures'>prdFEATURE</div></div>";


    this.generateHTML = function generateHTML(){
        html = "";      
        html += image.replace("prdIMAGE", this.image).replace("prdID", this.id);
        html += name.replace("prdNAME", this.name).replace("prdID", this.id);
        html += price.replace("prdPRICE", this.price);
        html += features.replace("prdFEATURE", this.feature);
        return html;        
    };

}

};

此脚本创建一个目录文字对象，其中包含排序和显示产品数据所需的所有属性和方法。

共有三个排序函数:sortById、sortByName 和 sortByPrice。每个都实现自定义排序。我不会解释自定义排序是如何工作的，因为互联网上有很多文章解释得很好。

为了实现双向排序(单击排序按钮时排序从低到高交替)，我使用 sortDirection 变量，该变量的值在 1 和 -1 之间交替。这控制排序的方向。

display 方法通过将产品数组中的每个产品对象传递给 tableRow 构造函数对象的构造函数来将输出生成到屏幕。然后通过调用该对象的generateHTML()方法，生成每行的HTML。

这是用于生成 HTML 的模板示例:

var name = "<div id='mainitemlistname'>
            <a href='product?pid=prdID'>prdNAME</a></div>";

此方法替换占位符 prdID和prdName与从产品中获取的实际值并将 HTML 字符串返回给显示方法。然后通过设置innerHTML 属性将此HTML 插入到ShowProduct DOM 中。

尽管您有一些代码可以为您的问题提供粗略的解决方案，但是该 JavaScript 还可以得到很大的改进。但我必须重申，这不是解决这个问题的最佳方法，特别是当您使用 scriptlet 时，我相信您知道这是禁忌。

编辑:它缺少 CSS，见下文。将其保存在名为layout.css 的文件中，并在 HTML 的 HEAD 元素中导入，如下所示: <link rel="stylesheet" type="text/css" href="sortList/layout.css" />

div#mainitemlist{
    float: left;        
    width: 100%;    
}

div#mainitemlistimage {
    float: left;    
    width: 200px;   
}

div#mainitemlistimage img{
    height: 125px;
    width: 100px;
}


div#mainitemlistname{
    float: left;        
    width: 200px;   
}

div#mainitemlistname a{
    color: #9caeb9; 
    text-decoration: none;
}


div#mainitemlistprice{
    float: left;        
    width: 200px;   
}


div#mainitemlistfeatures{
    float: left;        
    width: 200px;   
}