Creating column headers via javascript

[wolfnbasti]

I have the following which functions great:

<div title="Clients" style="padding:10px">
   <table id="AD" title="Names" class="edatagrid" style="width:1200px;height:auto"
                data-options="{
                  url: '../rest/etc...',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">
      <thead>
         <tr>
            <th data-options="field:'1',width:100">First Name</th>
            <th data-options="field:'2',width:100">Last Name</th>
         </tr>
      </thead>
   </table>
</div>


However, what I want to do is use javascript to generate the table header lines on the fly based on new columns added into the database. So, I created this:

<script>
   $(function() {
         $.ajax({
            url: '../rest/etc...',
            type: "GET"
         }).done(function(data) {
            var options = [];
            $.each(data, function(i, attributes) {
               $("#clientData").append('<th data-options="field:\'' +attributes.Id+ '\',width:100">' +attributes.Name+ '</th>')
            });
         });
   });
</script>

<div title="Clients" style="padding:10px">
   <table id="AD" title="Names" class="edatagrid" style="width:1200px;height:auto"
                data-options="{
                  url: '../rest/etc...',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">
      <thead>
         <tr id="clientData"></tr>
      </thead>
   </table>
</div>

The <tr... <th html are being generated without syntax error and can be viewed as such, but none of the table headers, let alone data, are displayed in the datagrid. Do you have any idea what I'm doing wrong?

Thanks.

[stworthy]

To create datagrid columns programatically, what you need to do is to construct the 'columns' value.

Code:

$(function() {
      $.ajax({
         url: '../rest/etc...',
         type: "GET"
      }).done(function(data) {
         var columns = [];
         $.each(data, function(i, attributes) {
            columns.push({
               field: attributes.Id,
               width: 100,
               title: attributes.Name
            });
         });
         $('#AD').edatagrid({columns:[columns]});
      });
});

[wolfnbasti]

I'm getting the following error from your edits:

TypeError: col.field.replace is not a function jquery.easyui.min.js:7960

I'm also seeing only 1 column header of 7 that it should display, and 5 of 7 column values displayed. Very odd.

[stworthy]

Please check the data returned from your URL carefully. Open your browser's console panel to display the 'columns' value. If some errors occur, correct it before creating datagrid.

[wolfnbasti]

I'm able to display the data without processing it through javascript. So, the data has no issues. FYI, the data is being returned in json format.

[stworthy]

Please refer to this tutorial http://www.jeasyui.com/tutorial/datagrid/datagrid6.php to learn how to use the 'columns' property.

[wolfnbasti]

Ok, I was able to load all the column headers and, after a change in the DB, reload the grid and see the new column header appear. However, I have no data loading into the grid columns at all:

$(function() {
      $.ajax({
         url: '../rest/.../attributeDefs',
         type: "GET"
      }).done(function(data) {
          var columns = [];
          $.each(data, function(i, attributeDefs) {
            columns.push({
                  field: 'attributeDefs.attributeDefId',
                  title: attributeDefs.attributeDefName,
                  width: 90               
               });
            });
          $('#AD').edatagrid({columns:[columns]});
        });
});
</script>

   <table id="AD" title="Resources" class="edatagrid" style="width:1000px;height:auto"
                data-options="{
                  url: '../rest/.../attributes',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">

   </table>


Any ideas?