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 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
随机推荐
- 1、Centos7 python2.7和yum完全卸载及重装
完全重装python和yum 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 1.删除现有Python ...
- Selenium私房菜系列6 -- 深入了解Selenium RC工作原理(1)
前一篇已经比较详细讲述了如何使用Selenium RC进行Web测试,但到底Selenium RC是什么?或者它由哪几部分组成呢?? 一.Selenium RC的组成: 关于这个问题,我拿了官网上的一 ...
- 电脑公司最新稳定win7系统下载
系统来自系统妈:http://www.xitongma.com 系统概述 电脑公司ghost win7 x86(32位)万能装机版集成的软件符合电脑公司及电脑城装机绝大多数人要求及喜好,既大众,又时尚 ...
- 关闭windows7/8的自动升级到windows10
办公室的电脑已经有好几台自动升级到windows10了. 由于用着很不习惯都要求改回windows7. 升级了就不支持退回去,只能是全部删除重新安装了,很是麻烦.但是也没有看到哪里有可以关闭自动升级的 ...
- python基础一 day13 生成器
#生成器函数# def generator():# print(1)# return 'a'## ret = generator()# print(ret) #只要含有yield关键字的函数都是生成器 ...
- 线程锁(互斥锁Mutex)
线程锁(互斥锁Mutex) 一个进程下可以启动多个线程,多个线程共享父进程的内存空间,也就意味着每个线程可以访问同一份数据,此时,如果2个线程同时要修改同一份数据,会出现什么状况? # -*- cod ...
- CPP-网络/通信：WebService
工具:vc2003 //引入相关头文件,连接动态库,定义全局变量. //***************************************************** #include & ...
- JAVA遍历map元素
第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...
- java在线聊天项目1.3版 ——设计好友列表框功能
设计好友列表框功能,思路—— 1.当客户端成功登陆后,则客户端把成功登陆信息发送给服务端, 2.由服务端将接收到来自各个成功登陆的客户端的用户信息添加进好友列表, 3.每当有成功登陆的用户就向各个客户 ...
- UIScrollView和MultiThreading、UITextField、Keyboard