如何从Javascript中获取div值并对其进行排序？

时间：2013-10-19 12:11:38

标签： java javascript jsp sorting

我正在创建一个从servlet接收数据到jsp页面的应用程序。 我使用了List＆lt;＆gt;存储和检索数据的机制。 所以我曾经使用过一次html设计代码并将其嵌入到for循环中，显示数据直到List＆lt;＆gt;数据结束。 我想使用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>

我有两个按钮： 1用于按价格对数据进行排序， 2用于按名称对数据进行排序。

当用户点击按钮时，它会调用Java Script Function来对数据进行排序。

  

但是如何将所有数据放入Java Script中进行排序我不知道。

任何人都会指导我，怎么做？

1 个答案:

答案 0 :(得分：1)

我坚信这个问题的最合适的解决方案是使用AJA，如Hussain Akhtar Wahid所建议的那样，我将产品数据转换为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>

要经过很多改动，所以我会简短一些。两个主要变化。

  1. 我不是立即显示产品数据，而是遍历列表并将数据放入JavaScript对象数组中。该数组是调用产品，是目录文字对象的属性。请参阅下面的JavaScript文件。

    catalogue.product[<%=i%>] = {pId:<%=prdID%>, pImage:"<%=prdIMAGE%>", pName:"<%=prdNAME%>", pPrice:<%=prdPRICE%>, pFeature:"<%=prdFEATURE%>"};

  2. 我创建了一个div，在产品数据排序后插入该数据。

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

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

     <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方法通过将product数组中的每个product对象传递给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;   
}
相关问题
最新问题