在用easyui的时候,很多时候datagrid的列名是动态的而不是固定的,那么要动态加载datagrid的列名,有一种比较方便的方法是在easyui初始化datagrid之前,用ajax取到columns的信息赋给easyui用于datagrid的初始化。做法比较简单,具体如下:
1、页面初始化时:
$(function () {
$.ajax({
url: '/Service/CompanyReport/CompanyReportHandler.ashx?Actions=GetColumns', dataType: 'json', success: function (data) {
$('#tt').datagrid({
width: document.getElementById('div1').width,
height: document.getElementById('div1').heigh,
title: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
url: '/Service/CompanyReport/CompanyReportHandler.ashx',
singleSelect: true,
rownumbers: true,
columns: data,
rowStyler: function (index, row) {
//var rows = $("#tt").datagrid("getRows");
//if (index == rows.length - 1) {
// return 'background-color:#6293BB;color:#fff;font-weight:bold;';
//}
},
onLoadSuccess: function (data) {
if (data.total > 0) return;
$(this).datagrid('appendRow', { jobfunname: '<div style="text-align:center;color:red">没有相关记录!</div>' }).datagrid('mergeCells', { index: 0, field: 'jobfunname', colspan: 8 }).datagrid("unselectAll");
}
});
}, error: function (xhr) {
alert('动态页有问题或者返回了不标准的JSON字符串\n' + xhr.responseText);
}
});
});
2、datagrid更新(如点某个按钮触发)时:
function query() {
var name = $('#JobFunDropDownList').val();
var startDate = $("input[name='startDate']").val();
var endDate = $("input[name='endDate']").val();
$.ajax({
url: '/Service/CompanyReport/CompanyReportHandler.ashx?Actions=GetColumns', dataType: 'json', success: function (data) {
$('#tt').datagrid({
width: document.getElementById('div1').width,
height: document.getElementById('div1').heigh,
title: 'xxxxxxxxxxx',
url: '/Service/CompanyReport/CompanyReportHandler.ashx',
queryParams: { jobfun: name, startdate: startDate, enddate: endDate },
singleSelect: true,
rownumbers: true,
columns: data,
rowStyler: function (index, row) {
//var rows = $("#tt").datagrid("getRows");
//if (index == rows.length - 1) {
// return 'background-color:#6293BB;color:#fff;font-weight:bold;';
//}
},
onLoadSuccess: function (data) {
if (data.total > 0) return;
$(this).datagrid('appendRow', { jobfunname: '<div style="text-align:center;color:red">没有相关记录!</div>' }).datagrid('mergeCells', { index: 0, field: 'jobfunname', colspan: 8 }).datagrid("unselectAll");
}
});
}, error: function (xhr) {
alert('动态页有问题或者返回了不标准的JSON字符串\n' + xhr.responseText);
}
});
}
原文地址:http://www.wenotebook.com/Article/Index?articleID=20141161623