一个简单的easyui动态初始化datagrid的列名的实例

在用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