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

【问题标题】：Combine two DataTable Columns into one using Javascript使用 Javascript 将两个 DataTable 列合并为一个
【发布时间】：2013-12-26 18:35:37
【问题描述】：

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

我目前使用的代码似乎没有遵循 DataTables 如何实现的标准（至少不是我所看到的；我是使用 DataTables 的新手，我找不到任何类似于我所看到的）

我需要将调查名称和类型列合并到一个列中。 “调查名称/类型”列中的示例数据：“这是我的调查名称（类型）”

控制器：表定义在控制器中声明。我不太清楚为什么它们是在此处定义而不是在 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
        }
    }
}

普惠制

$(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>

我想我需要将列定义从控制器移动到 GSP 并将它们放在 aoColumnDefs 中并格式化surveyName以将两列连接在一起？但是，我犹豫要不要这样做，因为 impTableConfigs 变量在控制器中的多个方法中使用。（我已经包含了一种这样的方法）。

【问题讨论】：

标签： javascript grails groovy datatables

【解决方案1】：

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

我在 Domain Object 中放置了一个 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 ],           
]

【讨论】：