[JS] jQuery与table

最新推荐文章于 2024-07-14 03:32:51 发布

geodoer

最新推荐文章于 2024-07-14 03:32:51 发布

阅读量381

点赞数

分类专栏： GIS实践文章标签： jquery

本文链接：https://blog.csdn.net/summer_dew/article/details/77123780

版权

GIS实践专栏收录该内容

86 篇文章 10 订阅

订阅专栏

小生做WebGIS时项目经验记录

文章目录

背景
环境交代
涉及内容
jQuery ajax传查询参数给后台，并获得数据
将后端数据打印到table中
- html说明
- jQuery打印收到的数据
tr点击事件绑定，获取其id
- 实现
- 结果
完整代码

背景

使用jQuery的ajax获取后台的数据
使用jQuery把数据展示在table中
给table的每一行绑定点击事件，获取其id，便于在地图上显示该行信息的矢量点

环境交代

SpringMVC做Controller
bootstrap做ui：不了解bootstrap没关系，可以看懂此例子
jquery 2.0版本

涉及内容

jQuery ajax
SpringMVC响应ajax请求返回JSON数据
JS遍历Map<String,Object[]>
jQuery动态页面显示
jQuery取tbody指定tr，指定td的id

jQuery ajax传查询参数给后台，并获得数据

ajax获取后台数据

//keywords为用户选择的[关键词]对应的id，这里模拟选择的id为1,9
var keywords = ["1","9"];
//获得 景点 信息
$.ajax({
    type : 'post',
    url : '/ajax_spots_keywords',
    dataType : 'text',
    async : false,
    data : { keywords : keywords },
    success: function (data) { //成功获取后台数据
        console.log("后端传来的数据："+data);
        spotsMap = JSON.parse(data);
        showSpotsInfo(spotsMap);
    },
    error: function () {
        $("#info").html("筛选景点出错，请重试。"); //错误反馈信息
        ret = false;
    }
});

SpringMVC处理ajax请求，并返回json数据

功能：获取ajax从前端传来的查询参数keywords，并返回数据库查询结果Map<String,Object[]>
@ResponseBody为自动返回JSON字符串的关键
但@ResponseBody要配置HttpMessageConverter：如何配置HttpMessageConverter

@RequestMapping(value = "/ajax_spots_keywords")
public @ResponseBody Map<String,Object[]> getSpots(@RequestParam(value="keywords[]", required = false,defaultValue = "") String[] keywords) {
	//输出传来的参数
    for (int i=0; i<keywords.length; i++){
        System.out.print("[wq]"+keywords[i]);
    }
    //模拟数据库查询
    Map<String,Object[]> map = new HashMap<String, Object[]>();
    map.put("1",new Object[]{
        "大人80元，小孩50元","早上8点","120分钟","这个景点很好","看海","风景好"
    });
    map.put("2",new Object[]{
            "大人80元，小孩50元","早上8点","120分钟","这个景点很好","看海","风景好"
    });
    return map;
}

ajax结果

后端

成功收到前端查询参数

前端

成功收到后端返回的JSON数据
成功收到后端数据

将后端数据打印到table中

html说明

bootstrap与jquery的cdn

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

存放table的div声明

<div id="spotsInfo"></div>

jQuery打印收到的数据

遍历map，拼接字符串，输出到div中；
涉及内容：Map<String,Object[]>的遍历

function showSpotsInfo(spotsMap) {
    var spotsInfo =
        "<table class='table'>"+
                "<thead><tr>"+
                    "<th>编号</th>"+
                    "<th>门票</th>"+
                    "<th>开放时间</th>"+
                    "<th>建议游玩时间</th>"+
                    "<th>描述</th>"+
                    "<th>关键词</th>"
                "</tr></thead>"+
                "<tbody>";
    for (var key in spotsMap) {
        spotsInfo +=     "<tr>";
        spotsInfo +=         "<td id='"+key+"'>"+key+"</td>";
        for (var i=0; i<4; i++) {
            spotsInfo +=     "<td>"+spotsMap[key][i]+"</td>";
        }
        spotsInfo +=          "<td>";
        for (var j=4; j<spotsMap[key].length; j++) {
            spotsInfo +=     spotsMap[key][j]+" ";
        }
        spotsInfo +=         "</td>";
        spotsInfo +=     "</tr>";
    }
    spotsInfo +=     "</tbody>"+
        "</table>";
    $("#spotsInfo").html(spotsInfo);
}

tr点击事件绑定，获取其id

实现

获取id

//为tbody的每一行绑定点击事件
$("tbody tr").each(function(){
    $(this).bind("click",function(){
        //去除以前选中的标志
        $("tbody tr").each(function () {
            $(this).removeClass(); //去除之前选择的行颜色
        })
        //点击该行 高亮显示
        $(this).attr("class","success"); //success为bootstrap的class，为绿色
        //取出该行 第一个td 的id
        console.log( $(this).find("td").first().attr("id") );
    });
});

结果

完整代码

该代码效果图

这里代码只有jQuery将信息显示在table，与点击效果
SpringMVC与jQuery ajax部分因环境的问题无法给出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格测试</title>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div id="spotsInfo"></div>
    </body>

    <script>	
        var spotsInfo;
        /*
         * @function: 输出景点的信息
         * @param: spotsMap景点信息的键值对
         * 		key : id景点的id
         * 		value : Objectp[]景点的信息数组
         */
        function showSpotsInfo(spotsMap) {
            var spotsInfo =
                "<table class='table'>"+
                        "<thead><tr>"+
                            "<th>编号</th>"+
                            "<th>门票</th>"+
                            "<th>开放时间</th>"+
                            "<th>建议游玩时间</th>"+
                            "<th>描述</th>"+
                            "<th>关键词</th>"+
                        "</tr></thead>"+
                        "<tbody>";
            for (var key in spotsMap) {
                spotsInfo +=     "<tr class>";
                spotsInfo +=         "<td id='"+key+"'>"+key+"</td>";
                for (var i=0; i<4; i++) {
                    spotsInfo +=     "<td>"+spotsMap[key][i]+"</td>";
                }
                spotsInfo +=          "<td>";
                for (var j=4; j<spotsMap[key].length; j++) {
                    spotsInfo +=     spotsMap[key][j]+" ";
                }
                spotsInfo +=         "</td>";
                spotsInfo +=     "</tr>";
            }
            spotsInfo +="</tbody>"+
                "</table>";
            $("#spotsInfo").html(spotsInfo);
        }
        $(document).ready(function(){
            var spotsMap =
            {
                "1" : ["大人80元，小孩50元","早上8点","120分钟","这个景点很好","看海","风景好"],
                "2" : ["大人180元，小孩150元","早上6点","240分钟","这个景点很好","真的好","风景好"]
            };
            showSpotsInfo(spotsMap);
            $("tbody tr").each(function(){
                $(this).bind("click",function(){
                    //去除以前选中的标志
                    $("tbody tr").each(function () {
                        $(this).removeClass();
                    });
                    $(this).attr("class","success");
                    console.log( $(this).find("td").first().attr("id") );
                });
            });
        });
    </script>
</html>