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(); }