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: ‘发件日期‘, 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>

时间: 2024-10-31 03:20:15

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

jquery easy ui 分页

为了解决大数据量下显示数据的问题,我们需要这样的一个效果:用户每次操作分页工具栏的时候向数据库获取新的数据,服务器根据传递回的参数确定需要获取的数据段,然后查询数据库获取指定若干行的数据,再传递给前台由Datagrid显示出来. 首先,设置datagrid的初始化 [javascript] view plaincopyprint? $(function() { $('#tableTrainee').datagrid('getPager').pagination({ pageSize: 10, /

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调

jQuery Easy UI的使用

一.初步认识 1.什么是jQuery Easy UI jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面. 官方网站http://www.jeasyui.com 2.jQuery EasyUI有哪些特点 (1).基于 jquery 用户界面插件的集合: (2).源代码加密.商业版付费 (3).使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTM

7个jquery easy ui 基本组件图解

以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=".

Jquery Easy UI的初步使用

总的来说,easyUI是jquery的一个很好地扩展,大大的提高了代码的开发速度,是一个很好地插件,我在使用的过程中,总体的感觉还是很不错的. 虽然相对来说,文件包稍微的有点大,但是在现在的网络世界中,这点大小就显得微不足道了,所以,在前端设计方面还是有很多的优势. 下面是一个easyUI的初步实例: <!DOCTYPE html> <html> <head> <title>Jquery Easy UI</title> <meta char

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准