dwz前端实现双击标签栏,在其下面展现指定参数(比如交易汇总数据)

     首先,实现效果如图所示:

      前端框架dwz,页面<tr>标签里:

      <tr  ptip="双击查看交易汇总" target="id" rel="${list.ID}" details_url="/interBus_dl/?                       spm=${encryption("/Merchantallinfo/merchantClick")}&emerno=${(list.EMERNO)!}" class="details1" promptid="${(list.EMERNO)}">

     ptip为鼠标悬浮提示,details_url为指定发送的后端url地址,class="details1" 为jquery选择器。

       js代码:

    <script type="text/javascript">
 $(document).ready(function()
    { 
        $(".details1").die().live("dblclick",function(){
            var mytr=$(this);
            if(mytr.next().attr("class")=="details_info"){
                mytr.next().toggle();
            }else{
                var url=mytr.attr("details_url");
                var html=" <tr class='details_info' ><td style='background-color:#FFE7BA;' colspan="+mytr.children().size()+"> ";
                $.ajax({
                  url:url,
                  type:"get",
                  success:function(data){
                     for(var key in data)  {
                         html+="<label style='padding-right: 20px'>"+key+":"+data[key]+"</label>";
                     }
                     html+="</td></tr>";
                     mytr.after(html);
                    }
                });
            }
        });
    });
</script>

后端返回map数据:会展现key和value值:

/**
     * 
     *********************************************************.<br>
     * [方法] merchantClick <br>
     * [描述] TODO(查询交易汇总) <br>
     * [参数] TODO(对参数的描述) <br>
     * [返回] Map <br>
     * [时间] 2018-12-19 下午3:31:40 <br>
     * [作者] 郭太东 【gtd】
     *********************************************************.<br>
     */
    @SuppressWarnings("all")
    @RequestMapping("/merchantClick")
     public @ResponseBody Map merchantClick() {
        String emerno = this.getParameter("emerno");
        mes.put("emerno", emerno);
        Map map=new HashMap();
        List<Map<String, Object>> list = MerchantallinfoService.getList("selectMerTrans",mes);
        //第一个为空
        if(list.get(0)==null || list.get(0).equals("")){
            map.put("支付宝微信交易总额", "0元");
            //第二个为空
            if(list.get(1)==null || list.get(1).equals("")){
                map.put("银联支付交易总额", "0元");
            }else{
                //第二个不为空
                map.put("银联支付交易总额", list.get(1).get("fee")==null?"0":list.get(1).get("fee") +"元");
            }
        }else{
            //第一个不为空
            map.put("支付宝微信交易总额", list.get(0).get("fee")==null?"0":list.get(0).get("fee") +"元");
            if(list.get(1)==null || list.get(1).equals("")){
                //第二个为空
                map.put("银联支付交易总额", "0元");
            }else{
                //第二个不为空
                map.put("银联支付交易总额", list.get(1).get("fee")==null?"0":list.get(1).get("fee") +"元");
            }
        }
        return map;
     }

注意:(重点)这是我们公司自己的一个数据加密传输算法,用到的传值数据,必须在指定位置给与解密,否则会报空指针异常。

我自己就是忘了这个坑,然后被自己蠢浪费了好久时间。

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章