Question

我正在使用一个名为jTable（www.jtable.org）的jquery脚本在我的Web应用程序中实现动态表。要在特定页面上包含表，必须包含以下代码以声明其属性：

<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属性的示例：

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'
        }
    }

问题是我在整个Web应用程序中使用相同的表（或非常相似的表）。我希望能够实现一种方法来将字段存储在外部.js文件中，然后在每个页面上引用它，从而避免复制和粘贴。在某些页面上，我可能只包含上面的一些字段（例如，我可能想要排除密码和EmailAddress）或在我加载时对字段稍作修改（即使用不同的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文件中的函数。然后这些函数可以返回构造jTable所需的JSON对象。

Answer 3

问题在于您有一个JSON对象，并且不能仅在JavaScript文件中引用。如果要加载文件，则需要使用getJSON之类的东西，而不是将其与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,
        ...
};

从外部js文件获取对象属性

3 个答案: