jquery easy-ui 分页插件的运用(给td添加事件,获取汇总内容)

Posted 2020-09-28

<#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: ‘发件日期‘, width: 100 ,align:‘center‘},
{ field: ‘name‘, title: ‘快递公司‘, width: 100 ,align:‘center‘},
{ field: ‘express_count‘, title: ‘快递单量‘, width: 100 ,align:‘center‘},
{ field: ‘in_delivery_count‘, title: ‘配送中‘, width: 100 ,align:‘center‘},
{ field: ‘signed_count‘, title: ‘已签收‘, width: 100 ,align:‘center‘},
{ field: ‘average_hour‘, title: ‘平均时间(H)‘, width: 100,align:‘center‘},
{ field: ‘fastest_hour‘, title: ‘最快时间(H)‘, width: 100 ,align:‘center‘},
{ field: ‘slowest_hour‘, title: ‘最慢时间(H)‘, width: 100 ,align:‘center‘},
{ field: ‘express_numbers‘, title: ‘配送‘, width: 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>