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 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
随机推荐
- uvm_monitor——借我一双慧眼
monitor 用来捕获(监视)和检查总线的信号是否满足预期的要求.所有的user_monitor 继承自uvm_monitor,uvm_monitor继承自uvm_component,从源代码来看里 ...
- sqlserver数据库备份方法
须事先准备一个工具curl,把它放在c盘.然后,在数据库所在服务器安装7z.最后把这2个存储过程执行,在sqlserver的代理中新建作业,即可实现备份操作. --备份指定数据库到本地和远程指定位置( ...
- Python实现1-9数组形成的结果为100的所有运算式
问题: 编写一个在1,2,…,9(顺序不能变)数字之间插入+或-或什么都不插入,使得计算结果总是100的程序,并输出所有的可能性.例如:1 + 2 + 34–5 + 67–8 + 9 = 100. f ...
- 05_Python格式化打印
一般框架 tplt = '' #格式化模板 print(tplt.format(…)) #填充内容 tplt = '{0}-{1}+{2}={3}' {}表示了一个槽,槽里面的内容使用key:valu ...
- scrollviews page分页实现方式
代码 buttonX = 0; buttonW = 50; buttonH = 20; margin = (self.view.width - 5 * buttonW) / 6; CGFloat ym ...
- UVA 1661 Equation （后缀表达式，表达式树，模拟，实现）
题意:给出一个后缀表达式f(x),最多出现一次x,解方程f(x) = 0. 读取的时候用一个栈保存之前的结点,可以得到一颗二叉树,标记出现'X'的路径,先把没有出现'X'的子树算完,由于读取建树的时候 ...
- var、let、const声明变量的区别
let和var声明变量的区别:1.let所声明的变量只在let命令所在的代码块内有效.(块级作用域) for(let i=0;i<10;i++){ // ... } console.log(i) ...
- C04 模块化开发
目录 模块化开发概述 函数概述 如何使用函数 字符串处理函数 模块化开发特点 模块化开发概述 概述 C语言是面向过程的语言,意味着编写C语言程序的时候,我们要像计算机一样思考如何设计程序. 模块化开发 ...
- kubernetes添加不了google apt-key
转自icepoint的博客 key来源 我的百度云盘 密码:v3wo 下载kube_apt_key.gpg到本地,上传到服务器后执行下面的命令 apt-get update && ap ...
- shell脚本，按单词出现频率降序排序。
[root@localhost oldboy]# cat file the squid project provides a number of resources toassist users de ...