概述
为什么说数据加载需要一个正确的方式,因为坑实在是太多了,一般情况下我们至少有这些需求:
- 页面一打开自动加载数据,不需要还去点一下刷新按钮
- 数据量大需要分页
- 为了页面样式对齐需要分页
当数据超出页面范围时,会弹出滚动条,右侧滚动条会挤出一块空间破坏右边对齐效果(强迫症选项) - 有查询条件输入控件,页面刷新时需要采集控件的值
- 执行完一个操作后,需要执行reload
代码
html文件
<script type="text/javascript">
$(function () {
AutoDiscipline(); //绑定专业
//dg初始化:绑定数据、创建右键菜单
$("#dg").datagrid({ loadFilter: pagerFilter }).datagrid({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
queryParams: {
DisciplineName: encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
PurchaseNumber: encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
},
onRowContextMenu: function(e, rowIndex, rowData) { //右键时触发事件
//三个参数:e里面的内容很多,真心不明白,rowIndex就是当前点击时所在行的索引,rowData当前行的数据
e.preventDefault(); //阻止浏览器捕获右键事件
$(this).datagrid("clearSelections"); //取消所有选中项
$(this).datagrid("selectRow", rowIndex); //根据索引选中该行
$('#menu').menu('show', {
//显示右键菜单
left: e.pageX,//在鼠标点击处显示菜单
top: e.pageY
});
e.preventDefault(); //阻止浏览器自带的右键菜单弹出
}
});
var pager = $('#dg').datagrid('getPager'); // get the pager of datagrid
pager.pagination({
pageSize: 20,
pageNumber: 1,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
//选择专业刷新采购包列表.datagrid({ loadFilter: pagerFilter })
$('#ddlDiscipline').combobox({
onSelect: function (row) {
if (row != null) {
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
type: "get",
data: {
"DisciplineName": encodeURIComponent(row.专业名称),
"PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
},
dataType: "json",
success: function (data) {
$("#dg").datagrid("options").pageNumber = 1;
$("#dg").datagrid("loadData", data);
}
});
}
}
});
});
//分页用方法
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
//初始化专业选项
function AutoDiscipline() {
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/PurchasePackage/PurchasePackage.ashx?Action=AutoDiscipline",
type: "get",
data: {}, //中文须编码,用encodeURIComponent
dataType: "json",
success: function (data) {
//值显示到input里 - EasyUI写法
//var msg = $.parseJSON(data);
$("#ddlDiscipline").combobox("loadData", data); //动态取数据
$('#ddlDiscipline').combobox('select', '-全部专业-');
}
});
}
//刷新合同列表
function RefreshPOList() {
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
type: "get",
data: {
"DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
"PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
},
dataType: "json",
success: function (data) {
$("#dg").datagrid("options").pageNumber = 1;
$("#dg").datagrid("loadData", data);
}
});
}
//同步到价格库
function SendToPriceLib() {
var row = $('#dg').datagrid('getSelected');
var psguid = row.PSGUID;
if (row.合同状态代码 == 'A') {
event.returnValue = confirm("确认要把该合同同步到价格库吗?");
if (event.returnValue == true) {
if (row) {
var rsguid = row.RSGUID;
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/Interface/POtoPriceLib.ashx?Action=SendToPriceLib",
type: "post",
data: {
"PSGUID": psguid
}, //中文须编码,用encodeURIComponent
dataType: "text",
success: function (data) {
if (data == "ok") {
$.messager.alert('提示信息', "同步到价格库成功", 'info');
$("#dg").datagrid("reload",
{
"DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
"PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
}); //动态取数据
}
else {
$.messager.alert('提示信息', "同步失败," + data, 'warning');
}
},
error: function () {
$.messager.alert('提示信息', "同步失败,错误代码20202", 'warning');
}
});
}
}
else { }
}
else if (row.合同状态代码 == 'R' || row.合同状态代码 == 'G') {
$.messager.alert('提示信息', "合同未发布不能同步到价格库", 'warning');
}
else {
$.messager.alert('提示信息', "合同状态未知,不能同步到价格库!", 'warning');
}
}
</script>
ashx文件:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//获取请求的动作
string action = context.Request["Action"];
if (string.IsNullOrEmpty(action)) return;
//页面参数
long projectId = Int64.Parse(Encrypt.Base64Decrypt(CookiesHelper.GetCookie_l("MC_pId"))); //项目ID
string domainName = Encrypt.Base64Decrypt(CookiesHelper.GetCookie_l("MC_doNa")); //域登录名
string json_stream = string.Empty; //dataTable转置成的stream流
string json_stream_format = string.Empty; //dataTable转置成的stream流(easyui datagrid格式)
//支付款项功能需要的页面传值参数
string psguidInPayment = context.Request["PSGUID"];
switch (action)
{
case "Refresh"://刷新PO列表
PriceLib po = new PriceLib();
po.ProjectId = projectId;
po.Discipline = HttpUtility.UrlDecode(context.Request["DisciplineName"].ToString()); //中文解码
po.PONumber = HttpUtility.UrlDecode(context.Request["PurchaseNumber"].ToString()); //中文解码
DataTable json_data = po.Select();
json_stream = DatatableAndJson.ToJson(json_data);
json_stream_format = DatatableAndJson.JsonFormatdg(json_data != null ? json_data.Rows.Count : 0, json_stream);
context.Response.Write(json_stream_format);
break;
}
}
代码说明
AutoDiscipline(); //绑定专业
如果你的页面有下拉框形式的查询条件输入控件,大概会用到这类方法,比如我的页面需要一个下拉框来选择专业,那么在页面初始化的时候这个下拉框里的选项就需要准备好,因此在$(function(){})里面需要一个方法来做这件事。
用queryParams方式传递参数
queryParams: {
DisciplineName: encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
PurchaseNumber: encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
},
另一种传递参数的写法:
//dg初始化:绑定数据、创建右键菜单
$("#dg").datagrid({ loadFilter: pagerFilter }).datagrid({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "../../Controller/PurchaseGenerate/PurchaseGenerate.ashx?Action=Refresh&DisciplineName=" + encodeURIComponent($('#ddlDiscipline').combobox('getValue')) + "&PurchaseNumber=" + encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
});
这样写会出现一个奇怪的bug,当你执行完一个动作比如发布合同之后你希望调用reload方法让datagrid刷新,这个刷新将会把你刚才的操作结果,比如合同状态的描述更新到页面上,但是你会发现$(‘#ddlDiscipline’).combobox(‘getValue’)此时取不到正确的值,虽然我选中的选项叫“管道”,凡是返回值始终是“,管道”,字符串的起始位置多出一个逗号,你的reload肯定无法根据多出一个逗号的参数得到正确的数据集,我并没有找到原因但是如果你用queryParams方式传值就没有这个问题了。
带参数使用reload方法
$("#dg").datagrid("reload",
{
"DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
"PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
}); //动态取数据