EasyUI 动态生成列加分页
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<!--禁用缓存部分结束-->
<script src="/Scripts/easyui/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link id="easyuiTheme" href="/Scripts/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/ERP.js" type="text/javascript"></script>
<link href="/Styles/ERP.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="/Scripts/import.js"></script>
<script src="Common.js"></script>
</head> <script type="text/javascript"> //查询方法
function query() {
var begindate = $("#txt_intimeFrom").datebox('getValue');
var enddate = $("#txt_intimeTo").datebox('getValue');
if (begindate == '')
{
parent.$.messager.alert('提示', '请选择开始日期', 'warning');
return;
}
if (enddate == '') {
parent.$.messager.alert('提示', '请选择结束日期', 'warning');
return;
}
var days = DATEDIFF(begindate, enddate)
if (days > 365)
{
parent.$.messager.alert('提示', '查询日期范围不能超过365天', 'warning');
return;
}
var queryData = {
productCode: $("#txt_ProductCode").combobox("getText"),
productBrand: $("#ddl_ProductBrand").combotree('getValue'),
productType: $("#ddl_ProductType").combotree('getValue'),
country: $("#hid_Countries").val(),// $("#ddl_County").combobox('getValue');
province: $("#hid_Provinces").val(),// $("#ddl_Province option:selected").val();//.combobox('getValue');
city: $("#hid_City").val(),// $("#ddl_City option:selected").val();//.combobox('getValue');
customerType: $("#ddl_CustomerType").combobox('getValue'),
customerTrade: $("#ddl_CustomerIndustry").combobox('getValue'),
saleTeam: $("#ddl_SaleTeam").combobox('getValue'),
saler: $("#ddl_Sales").combobox('getText'),
fristTradeTimeFrom: $("#txt_FristTradeTimeFrom").datebox('getValue'),
fristTradeTimeTo: $("#txt_FristTradeTimeTo").datebox('getValue'),
byType: $("#rad_QianDan").is(":checked") == true ? "1" : "2", intimeFrom: $("#txt_intimeFrom").datebox('getValue'),
intimeTo: $("#txt_intimeTo").datebox('getValue'),
salegroup: $("#rad_group").is(":checked") == true ? "1" : "2",
pageNumber: $('#hid_pageNumber').val(),
pageSize: $('#hid_pageSize').val(), }; $.ajax({
type: "POST",
async: false, // 设置同步方式
cache: false,
dataType: "text",
url: "SaleOrderReport.aspx?action=Serach",
data: queryData,
success: function (result) {
var data = eval('(' + result + ')');
showGrid(eval(data)); }
, error: function () { $.messager.alert("错误", "出错了!", "info", null);
}
});
} </script>
<body class="easyui-layout" data-options="fit:true,border:false"> <div data-options="region:'center',fit:true,border:false">
<table id="rainGrid" data-options="fit:true,border:false"></table>
</div>
<input type="hidden" id="hid_pageNumber" value="1"/>
<input type="hidden" id="hid_pageSize" value="100" /> </body>
</html>
showGrid({});//第一次调用
//处理返回结果，并显示数据表格
function showGrid(data) {
var options = {
width: "auto",
height: "auto",
rownumbers: true,
pagination: true,
toolbar: '#toolbar',
singleSelect: true
};
options.columns = eval(data.columns);//把返回的数组字符串转为对象，并赋于datagrid的column属性
var dataGrid = $("#rainGrid");
dataGrid.datagrid(options);//根据配置选项，生成datagrid
dataGrid.datagrid("loadData", data.data[0].rows); //载入本地json格式的数据
var p = dataGrid.datagrid('getPager');
$(p).pagination({
total: data.data[0].total,
pageNumber:data.data[0].page,
pageSize: 100,//每页显示的记录条数，默认为10
pageList: [100, 500, 1000],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '显示 {from} 到 {to} 共 {total} 条记录'
,onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
$('#hid_pageNumber').val(pageNumber);
$('#hid_pageSize').val(pageSize);
$(this).pagination('loaded');
query();
}
});
dataGrid.datagrid('clearSelections');
}
}
//生成Json
public string CreateDataGridColumnModel(DataTable dt, int total, int pageindex)
{
StringBuilder columns = new StringBuilder("{ 'columns':[[");
int width = 85;
foreach (DataColumn col in dt.Columns)
{
//控制列的宽度 第一列日期宽度为139,其余列为列名的汉字长度*20px
if (col.ColumnName == "销售")
{
width = 100;
}
else
{
width = 83;
} columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},", col.ColumnName, col.ColumnName, width);
}
if (dt.Columns.Count > 0)
{
columns.Remove(columns.Length - 1, 1);//去除多余的','号
} columns.Append("]],data:[{"); columns.Append("\"rows\":[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
columns.Append("{ "); for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
columns.Append("\"" + dt.Columns[j].ColumnName.ToString().ToLower() + "\":" + "\"" + JsonCharFilter(dt.Rows[i][j].ToString()) + "\","); }
else if (j == dt.Columns.Count - 1)
{
columns.Append("\"" + dt.Columns[j].ColumnName.ToString().ToLower() + "\":" + "\"" + JsonCharFilter(dt.Rows[i][j].ToString()) + "\"");
}
}
if (i == dt.Rows.Count - 1)
{
columns.Append("} ");
}
else
{
columns.Append("}, ");
}
}
columns.Append("]"); columns.Append(","); columns.Append("\"total\":");
columns.Append(total);
columns.Append(",");
columns.Append("\"page\":");
columns.Append(pageindex);
columns.Append("}");
columns.Append("]"); columns.Append("}");
return columns.ToString(); }
EasyUI 动态生成列加分页的更多相关文章
- easyui动态生成列
需求:一个id对应多个key value 将id作为标识列 key值作为表头 value作为值显示.数据表可分为两张表 param数据表: 下表一个id对应上表多个key及value 如下图 id_p ...
- jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍Eas ...
- easyui动态生成双列头
实习时老大交给任务,让我做这样一个效果,选择日期并点击查询时,动态生成列头,下一列要求对应日期的星期. 效果图: 下面贴出查询的单击函数: //查询按钮 function queryByDate(){ ...
- WPF Datagrid 动态生成列 并绑定数据
原文:WPF Datagrid 动态生成列 并绑定数据 说的是这里 因为列头是动态加载的 (后台for循环 一会能看到代码) 数据来源于左侧列 左侧列数据源 当然num1 属于临时的dome使用 可 ...
- EasyUI datagrid动态生成列
任务描述:根据用户选择时间段,生成列数据,如图
- PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据（二）
关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...
- EasyUI动态生成菜单
业务需求:不同角色有不同的权限,我们根据角色加载页面时展示不同的菜单.在easyUI中,菜单一般采用手风琴accordion组件进行展示,一级菜单下可以加载二级菜单,效果如下: 普通用户看到的菜: 管 ...
- WPF + RDLC + 动态生成列 + 表头合并
如下,评论超过20条,马上发代码*(੭*ˊᵕˋ)੭*ଘ,效果如下: 代码逻辑简单. WPF使用RDLC需要使用如下DLL 新建WPF 窗体,黏贴下大概如下 <Window xmlns:rv=&q ...
- ArcGIS API For Javascript ：如何动态生成 token 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
随机推荐
- leetcode140 Word Break II
思路: 直接爆搜会超时,需要使用记忆化搜索.使用map把已经计算过的情况记录下来,避免重复计算. 实现: class Solution { public: vector<string> w ...
- 解析C++普通局部变量与指针类型的对象变量的应用区别
首先我们先来了解一下MFC中的CPtrArray类,他可以说是CObject类型指针对象的集合.通过intAdd( CObject* newElement );注意参数是一个指针类型)可以向集合中添加 ...
- Handler消息机制的一些原理（直接用code讲解）——Android开发
package com.example.handlertest; import android.os.Bundle; import android.os.Handler; import android ...
- HTTP 三次握手 建立连接 和 四次握手断开连接
三次握手建立连接 第一次握手:主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器,主机B由SYN=1知道,A要求建立联机: 第二次握手:主机B收到请求后要确 ...
- Longest Increasing Subsequence的两种算法
问题描述:给出一个序列a1,a2,a3,a4,a5,a6,a7-.an,求它的一个子序列(设为s1,s2,-sn),使得这个子序列满足这样的性质,s1<s2<s3<-<sn并且 ...
- 【MYSQL】mysql-5.6.19-win32免安装版本配置方法
[MYSQL]mysql-5.6.19-win32免安装版本配置方法 1.文件下载网站(http://dev.mysql.com/downloads/): 具体下载地址:http://211.136. ...
- The Jaisalmer Desert Festival 2017/2/9
原文 India's Golden City celebrates its culture with costumes(服装),crafts(工艺品) and camels One of the fe ...
- 常用的 Excel 函数
概述 Excel 学的好,函数不可少.接下来就了解常用的函数. 首先作下简要说明: 本文的内容大多从网上搜集并加以个人理解整理而来,由于初学,可能会出现错误,如有欢迎指出: 所用演示软件为免费丑陋的 ...
- sql server 处理分母为空
SP 前面加下面设置,会忽略错误结果 直接返回null 不会导致SP 失败 SET ANSI_WARNINGS OFFSET ARITHABORT OFFSET ARITHIGNORE ON
- WINDOWS-基础：WINDOWS常用API
1.窗口信息 //MS 为我们提供了打开特定桌面和枚举桌面窗口的函数. hDesk=OpenDesktop(lpszDesktop,,FALSE,DESKTOP_ENUMERATE); //打开我们默 ...