使用Javascript将两个DataTable列合并为一个

时间:2013-12-26 18:35:37

标签: javascript grails groovy datatables

我目前正在使用Groovy / Grails和Javascript。

我目前使用的代码似乎没有遵循DataTables的实现标准(至少不是我能看到的;我是新手使用DataTables,我找不到任何类似的东西我所看到的)

我需要将Survey Name和Type列合并为一个列。 “调查名称/类型”列中的示例数据:“这是我的调查名称(类型)”

控制器: 表定义在Controller中声明。我不太清楚为什么他们在这里被定义而不是在gsp ...

def impTableConfigs = [
        id:  [ title: '', sortIndex: 'id', visible: false ],
        surveyId: [ title: 'Survey ID Number', sortIndex: 'surveyId', visible: true ],
        surveyName: [ title:  'Survey Name', sortIndex: 'surveyName', visible: true],
        type: [ title:  'Survey Type', sortIndex: 'type.code', visible: true]
]

def imp = {
   // Check is user is logged in

   // Check the users role

    def dataMemberNames = getDataMemberNames(impTableConfigs)
    def editingShtuff = userService.getUserEditing()

    withFormat{
        html{
            return [
                    title: "Surveys",
                    editingShtuff : editingShtuff ,
                    selectedRefugeId: params.filter,
                    colNames: dataMemberNames,
                    colTitles: dataMemberNames.collect{
                        impTableConfigs[it]["title"]
                    }
            ]
        }
        json{
            def args = getListDataParams(impTableConfigs, dataMemberNames, editingShtuff)
            def results = getFormattedImpListData(
                    impTableConfigs,
                    editingShtuff ,
                    args.refuge,
                    args.max,
                    args.offset,
                    args.sort,
                    args.sortDir
            )
            render results as JSON
        }
    }
}

GSP

$(document).ready(function() {
        var ops = {
            editAction:'${createLink(controller:"survey", action:"edit")}',
            source:'${createLink(controller:"report", action:"imp.json")}?filter='+$("#filter option:selected").val(),
            swfUrl:'${resource(dir:'css/data-tables-tabletools',file:'copy_csv_xls_pdf.swf')}',
            colNames:<%= colNames as JSON %>,
            selectable: false,
            useCache: false,
            csvAction: '${createLink(action:"imp_download_csv")}',
            pdfAction: '${createLink(action:"imp_download_pdf")}',
            csvParams: getFilterParam,
            pdfParams: getFilterParam
        };

        // Initialize dataTable
        var table = new primr.dataTable("#dataTable", ops, {
            aoColumnDefs: [ { aTargets: [8], bSortable: false }]
        });
        window.table = table;

        // Connect filter events
        $("#filter").change(function(){
            var filter = $("#filter option:selected").val();
            table.changeSource("${createLink(controller:"report", action:"imp.json")}?filter=" + filter);
        })
    });

GSP中的HTML

<table id="dataTable">
<thead>
<tr>
    <g:each in="${colTitles}" var="it" status="i">
        <th>${it}<sup>${i}</sup></th>
</tr>
</thead>
<tbody>

</tbody>

我想我需要将列定义从Controller移动到GSP并将它们放在aoColumnDefs中并格式化surveyName以将两列连接在一起?但是,我坚持这样做,因为impTableConfigs变量用于Controller中的多个方法。 (我已经加入了一种这样的方法)。

1 个答案:

答案 0 :(得分:1)

没关系,我已经解决了这个问题,但我的浏览器正在缓存域对象和控制器。

我在域对象中放置一个getter来连接列值并将其放入impTableConfigs

def impTableConfigs = [
        id:  [ title: '', sortIndex: 'id', visible: false ],
        surveyId: [ title: 'Survey ID Number', sortIndex: 'surveyId', visible: true ],
        surveyNameAndType: [title: 'Survey Name/(Type)', sortIndex: 'surveyName', visible: true],
        //surveyName: [ title:  'Survey Name', sortIndex: 'surveyName', visible: true ],
        //type: [ title:  'Survey Type', sortIndex: 'type.code', visible: true ],           
]