Получение свойств объекта из внешнего файла js

Question

Я использую сценарий jquery под названием jTable (www.jtable.org) для реализации динамических таблиц в моем веб-приложении. Для того, чтобы включить в таблицу на конкретной странице, необходимо включить следующий код, чтобы объявить его свойства:

<script type="text/javascript"> 
    $(document).ready(function() {   
     $('#MyTableContainer').jtable({ 

      //General options comes here 

      actions: { 
       //Action definitions comes here 
      }, 

      fields: { 
       //Field definitions comes here 
      } 
     });  
    }); 
</script> 

Пример того, что может перейти в собственность поля:

fields: { 
     StudentId: { 
      key: true, 
      create: false, 
      edit: false, 
      list: false 
     }, 
     Name: { 
      title: 'Name', 
      width: '23%' 
     }, 
     EmailAddress: { 
      title: 'Email address', 
      list: false 
     }, 
     Password: { 
      title: 'User Password', 
      type: 'password', 
      list: false 
     }, 
     Gender: { 
      title: 'Gender', 
      width: '13%', 
      options: { 'M': 'Male', 'F': 'Female' } 
     }, 
     BirthDate: { 
      title: 'Birth date', 
      width: '15%', 
      type: 'date', 
      displayFormat: 'yy-mm-dd' 
     } 
    } 

Проблема заключается в том Я использую ту же таблицу (или очень похожие таблицы) в своем веб-приложении. Я хотел бы иметь возможность реализовать способ хранения полей во внешнем файле .js, а затем ссылаться на него на каждой странице, избегая при этом копирования и вставки. На некоторых страницах я могу включить только некоторые из вышеуказанных полей (например, я могу исключить пароль и адрес электронной почты) или внести небольшие изменения в поля при загрузке (например, использовать другой displayFormat (для BirthDate), чем по умолчанию во внешних .js файл на определенной странице.

Спасибо!

Answer 1

Вы можете сделать это несколькими способами. Вот простой:

main.js

//should be modularized/namespaced 
var defaultStudentTableFieldsCfg = { 
    ... 
}; 

другие-file.js

$(function() { 
    var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg); 

    //define new column 
    tableFieldsCfg.someNewCol = { 
     //... 
    }; 

    //remove some column 
    delete tableFieldsCfg.Password; 

    //override config 
    tableFieldsCfg.Gender.title = 'GENDER'; 

    //it would be better not to hard-code #MyTableContainer here 
    $('#MyTableContainer').jtable({ fields: tableFieldsCfg }); 
}); 

Answer 2

вы можете создать функции, которые вы положили во внешних файлах JS. Тогда эти функции могут возвращать объекты JSON, необходимые для построения вашего JTable.

Answer 3

Проблема заключается в том, что у вас есть объект JSON и который нельзя просто ссылаться в файле JavaScript. Если вы хотите загрузить файл, вам нужно будет использовать что-то вроде getJSON, а не использовать th at с jQuery.

function createTable(fields) {   
    $('#MyTableContainer').jtable({ 

     //General options comes here 

     actions: { 
      //Action definitions comes here 
     }, 

     fields: fields 
    });  
} 

$(function(){ 
    $.getJSON("YourFields.json", createTable); 
}); 

---

Теперь то, что вы пытаетесь сделать, это ссылка глобальным переменным.

Поместите файл до и укажите глобальную переменную.

<script type="text/javascript" src="YourFields.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() {   
     $('#MyTableContainer').jtable({ 
      actions: { 
      }, 
      fields: fields 
     });  
    }); 
</script> 

Файл YourFields.js должен выглядеть как

if (!window.appDefaults) { 
    window.appDefaults = {} 
} 
window.appDefaults.fields = { 
     StudentId: { 
      key: true, 
     ... 
};