首页 > 代码库 > EasyUI 动态生成列加分页
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="http://www.mamicode.com/Scripts/easyui/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <link id="easyuiTheme" href="http://www.mamicode.com/Scripts/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="http://www.mamicode.com/Scripts/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Scripts/ERP.js" type="text/javascript"></script> <link href="http://www.mamicode.com/Styles/ERP.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Scripts/jquery.cookie.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/import.js"></script> <script src="http://www.mamicode.com/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 = http://www.mamicode.com/{"#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 = http://www.mamicode.com/eval(‘(‘ + result + ‘)‘);"错误", "出错了!", "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="http://www.mamicode.com/1"/> <input type="hidden" id="hid_pageSize" value="http://www.mamicode.com/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‘); } }
//生成Jsonpublic 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 动态生成列加分页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。