EasyUI-datagrid dynamically create columns

<Script type = "text / JavaScript"> 
    $ ( function () { 
        $ .ajax ({ 
            URL: "$ {} getMesResourceCapacityBottleneckTitle URL" , // This method is herein used to obtain dynamic data header 
            data: {param : the JSON.stringify (SerializeObject ($ ( '#form' )))}, 
            type: 'POST' , 
            dataType: 'JSON' , 
            Success: function (R & lt) {
                 IF (r.flag == "Success" ) {
                     var = Columns [[]];
                     var List = r.title;
                    for ( var I = 0; I <List.length; I ++ ) { // the query result, the dynamic head of the splicing table, specifically how the stitching place according to their need to do
                         var titleDay = new new a Date (List [I]. of CALENDAR_DATE) .format ( "the MM-dd-YYYY" ); 
                        Columns [ 0] .push ({Field: 'DATE' + I, title: titleDay, width: 80, halign: 'Center', align = left: 'Center' , Formatter: formatColor}); 
                        Columns [ 0] .push ({Field: 'dateContrast' + I, title: titleDay, width: 80, halign: 'Center', align = left: 'Center', hidden: to true }); 
                    } 
                    $ ( '#dgMesResourceCapacityBottleneck' ).    datagrid({    
                           frozenColumns : [[// This section belonging to the known fixed column header, because not all columns are dynamic 
                            {Field: 'WorkLineName', halign: 'Center', align = left: 'Center', title: 'line', width: 80 }, 
                            {Field: 'Zycode', halign: 'Center', align = left: 'Center', title: 'resource name', width: 80 }, 
                            {Field: 'FixedCapacity', halign: 'Center', align = left: 'Center ', title:' day - ability ', width: 80 }, 
                            {Field: ' overdue ', halign:' Center ', align = left:' Center ', title:' extended hours', width: 80 , Formatter: formatOverdue} 
                        ] ], 
                        the Columns:the Columns, // here is the dynamic spell out columns
                        URL:"$ {} getMesResourceCapacityBottleneckByPage.json URL" , // there is a method of loading data, the data must be loaded in the background and foreground field matches 
                        queryParams: { 
                            param: the JSON.stringify (SerializeObject ($ ( '#form' ))) 
                        } 
                    }); 
                } the else { 
                    $ .messager.alert ( 'prompt', 'load error, please contact the administrator!', 'warning' ); 
                } 
            } 
        }); 
    });
 </ Script>

<div data-options="region:'center'" border="false" style="background:#ffffff;">
     <table id="dgMesResourceCapacityBottleneck"
     　　data-options="
     　　　　fit: true,
     　　　　border: false,
     　　　　rownumbers: false,
     　　　　animate: true,
     　　　　collapsible: false,
     　　　　autoRowHeight: false,
     　　　　idField :'id',
     　　　　singleSelect: true,
     　　　　checkOnSelect: true,
     　　　　selectOnCheck: false,
     　　　　pagination:true,
     　　　　pageSize:dataOptions.pageSize,
     　　　　pageList:dataOptions.pageList,
     　　　　striped:true">
     </table>
</div>