为Datatable列定义多个jQuery变量

时间:2012-04-10 03:41:39

标签: javascript jquery datatables

后台:我有一个53x列的jQuery数据表。第一列是用户名,不可编辑。接下来的52列代表一年中的几周,每个列都需要可编辑。它们包含完全相同的选项。

问题:有没有更好的方法来定义所有52周,而无需“复制和粘贴”列数据52次?

我的代码:

$(document).ready( function () {
  $('#example').dataTable().makeEditable({
                    sUpdateURL: function(value, settings)
                            {
                                    return(value);
                            },
                    "aoColumns": [
                        null,
                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        },
                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        },

                 {REPEAT 49 more times}

                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        } ]                 
    });

})

1 个答案:

答案 0 :(得分:2)

使用循环构建columns数组,然后在传递给dataTables的配置对象的aoColumns属性中使用它。

$(document).ready( function () { 

         // columns array
         var aoColumns = [];
         aoColumns.push(null);

         for(var i=0;i<52; i++) {
         var column = { 
               tooltip: 'Click to change leave', 
               loadtext: 'loading...', 
               type: 'select', 
               onblur: 'cancel', 
               submit: 'Ok', 
               data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}", 
               loadtype: 'GET' 
               };
               aoColumns.push(column);
         }

         $('#example').dataTable().makeEditable({ 
              sUpdateURL: function(value, settings) 
              { 
                   return(value); 
              }, 
              "aoColumns": aoColumns 
         });