zoukankan      html  css  js  c++  java
  • jquery easy-ui 分页插件的运用(给td添加事件,获取汇总内容)

    <#include '/admin/express-header.html' >


    <div class="main" style="
    background:#fff;
    padding: 15px 0px 8px 10px;
    margin: 0px;">
    <div class="ex-boxOne">
    <label for="start_date">订阅日期:</label>
    <input type="text" name="start_date" id="start_date" class="Wdate start-date" onFocus="WdatePicker({lang:'zh-cn'})" placeholder="请输入开始日期" />
    <label for="end_date">至</label>
    <input type="text" name="end_date" id="end_date" class="Wdate end-date" onFocus="WdatePicker({lang:'zh-cn'})" placeholder="请输入结束日期"/>

    <span style="margin-left:15px;margin-right:5px;">快递公司名称:</span>
    <select name="logi_id" id="logi_id" style="height:24px;">
    <option value="">从已配置快递公司选择</option>
    </select>
    <button id="ex-submit">统计</button>
    </div>



    <!-- 生成一个div放置内容 -->

    <div id="es-details"></div>

    <!-- easyui 分页 生成表格 -->
    <div id="dg"> </div>
    </div>
    </html>
    <script type="text/javascript">

    var _ctx = $('.m-ctx').attr('data-path');
    var _url = ' ';

    $('#ex-submit').on('click',function(){

    $("#dg").datagrid({

    var _data = {};//传递数据
    url: _url,
    queryParams: _data,
    loadFilter: function(result){  //出分页外拿到汇总数据
    var summary_data = result.summary;
    var cHtml = "<tr><td></td><td class='summary_text'>"+ '汇总' +"</td><td>"+ summary_data.express_count +"</td><td>" + summary_data.in_delivery_count + "</td><td>" + summary_data.signed_count + "</td></tr>"
    $('#summary tbody').html(cHtml);
    return result;
    },
    columns: [[
    { field: 'send_date', title: '发件日期', 100 ,align:'center'},
    { field: 'name', title: '快递公司', 100 ,align:'center'},
    { field: 'express_count', title: '快递单量', 100 ,align:'center'},
    { field: 'in_delivery_count', title: '配送中', 100 ,align:'center'},
    { field: 'signed_count', title: '已签收', 100 ,align:'center'},
    { field: 'average_hour', title: '平均时间(H)', 100,align:'center'},
    { field: 'fastest_hour', title: '最快时间(H)', 100 ,align:'center'},
    { field: 'slowest_hour', title: '最慢时间(H)', 100 ,align:'center'},
    { field: 'express_numbers', title: '配送', 500 ,align:'center',formatter: function(value,row,index){ //执行回调,返回值 作为 td 的值
    if(value != ''){
    var a = JSON.parse(value)
    if(a != null && a.length != 0){
    var html = ''
    for(var i =0;i<a.length;i++){
    var Hhtml = '';
    Hhtml += "<li><div>" + a[i].time + "</div><div class='statistcs_context'>" + a[i].context + "</div></li>"
    html += "<a href='javascript:;' style='margin-left:5px;' class='statistics_"+index+i+"' onmouseover='showDetails(""+ 5 + "",""+ index +"",""+ i +"")'>"+ a[i].express_number+ "</a><div class='stadistics_details' style='display:none;'><ul>"+ Hhtml +"</ul></div>"; //注意a链接的拼接,showDetails 一定要写在这个的上面 最好是jq一下 页面以上;
    }
    return html;

    }else{
    return "";
    }
    }else{
    return "";
    }
    }}
    ]],
    pageSize: 10, //row
    pageList: [10,20],//分页条数
    pagination: true,
    })

    });

    </script>

  • 相关阅读:
    30 algorithm questions study
    Binary Tree: Write a function to return count of nodes in binary tree which has only one child.
    分布式排序
    android开发中,工程前面有感叹号的解决办法
    android导入工程出现红色感叹号
    INSTALL_FAILED_MISSING_SHARED_LIBRARY错误解决方法
    安卓手机铃声怎么设置
    如何开启Mysql远程访问
    android 链接mysql数据库
    android 连接mysql数据库问题
  • 原文地址:https://www.cnblogs.com/xiaomixia/p/7170590.html
Copyright © 2011-2022 走看看