Print Page - Creating column headers via javascript

Title: Creating column headers via javascript
Post by: wolfnbasti on May 13, 2014, 05:39:26 PM

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.

Title: Re: Creating column headers via javascript
Post by: stworthy on May 13, 2014, 06:33:42 PM

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]});
      });
});

Title: Re: Creating column headers via javascript
Post by: wolfnbasti on May 13, 2014, 07:12:38 PM

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.

Title: Re: Creating column headers via javascript
Post by: stworthy on May 13, 2014, 07:36:44 PM

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.

Title: Re: Creating column headers via javascript
Post by: wolfnbasti on May 13, 2014, 08:07:55 PM

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.

Title: Re: Creating column headers via javascript
Post by: stworthy on May 13, 2014, 08:26:58 PM

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

Title: Re: Creating column headers via javascript
Post by: wolfnbasti on May 13, 2014, 10:15:49 PM

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?

EasyUI Forum

General Category => General Discussion => Topic started by: wolfnbasti on May 13, 2014, 05:39:26 PM