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 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
随机推荐
- vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom）
接下来,就需要对main.js App.vue 等进行操作了. 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import fro ...
- CSS元素隐藏的display和visibility
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...
- Java 堆内存和栈内存
看了一些别人总结的博客,感觉对堆内存和栈内存有了一个初步的认识.所以来写写自己对堆内存和栈内存的理解. Java把内存分成两种,一种叫做栈内存,一种叫做堆内存. 在函数中定义的一些基本类型的变量和对象 ...
- GetClassName 取得的类名有
今天上午稍微跟踪了一下自己的项目里面的各个空间,得知GetClassName可以取到以下类名:Static\Edit\Button\ComboBox\msctls_trackbar32\SysTabC ...
- 设置umask
umask 002 例子:umask为003,建立的文件与目录权限是什么? umask为003,所有去掉的属性为-------wx,因此 文件 -rw-rw-r-- 目录 drwxrwxr--
- svn merge当主干修改后合并分支
例如版本r1的主干创建分支r2,在r2上修改后得到r3,r1之后也修改得到r4,现在合并分支到主干上: 如果r3的修改和r4有冲突会提示出现冲突,因此不用担心主干合并后会被分支操作覆盖,因为这并不是简 ...
- 【iOS】UITableview cell 顶部空白的n种设置方法
我知道没人会主动设置这个东西,但是大家一定都遇到过这个问题,下面总结下可能是哪些情况: 1, self.automaticallyAdjustsScrollViewInsets = NO; 这个应该 ...
- （二）mybaits之ORM模型
前言:为什么还没有进入到mybatis的学习呢?因为mybatis框架的核心思想就是ORM模型,所以好好了解一下ORM模型是有必要哒. ORM模型 ORM(Object Relational Ma ...
- 【414】Code::Blocks增加主题
替换文件地址:C:\Users\z5194293\AppData\Roaming\CodeBlocks 文件下载地址:default.rar 通过 Settings -> Editor... - ...
- ueditor中FileUtils.getTempDirectory()找不到
2014-6-27 14:22:25 org.apache.catalina.core.StandardWrapperValve invoke SEVERE: Servlet.service() fo ...