一个简单的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