Knockout.js 如何在运行时基于服务器输出使用Knockout在WijGrid上创建列？

在WijGrid的每个示例中，列都是在如下数组中手动创建的：

<table id="dataGrid" data-bind="wijgrid: {
                                          data: dataRows,
                                          pageSize: pageSize,
                                          pageIndex: pageIndex,
                                          totalRows: totalRows,
                                          allowPaging: true,
                                          allowSorting: true,
                                          sorted: sorted,
                                          pageIndexChanged: paged,
                                          columns: [
                                                   { sortDirection: 'ascending', dataType: 'number', dataFormatString: 'n0', headerText: 'ID', width: 60 },
                                                   { headerText: 'Product' },
                                                   { dataType: 'currency', headerText: 'Price', width: 100},
                                                   { dataType: 'number', dataFormatString: 'n0', headerText: 'Units', width: 100}]
                                                   }">
</table>

$('#activejobs').wijgrid({
    columns: [
        { headerText:'Customer',allowSort:true, dataType:'string' },
        { headerText:'Job Number',allowSort:true, dataType:'string'},
                    { headerText:'Scheduled Completion',allowSort:true, dataType:'datetime', sortDirection:'ascending'},
            { headerText:'Description',allowSort:false, dataType:'string', ensurePxWidth:true, width:250 },
            { headerText:'Total Hours',allowSort:true, dataType:'number'}
    ],
    columnsAutogenerationMode: "merge",
    dynamic:true
});

然而，当使用knockout时，我找不到一种方法来编辑或操纵基于服务器数据自动生成的列。例如，我正在处理的项目返回特定工作在每个制造过程或部门中花费的小时数。客户可以随时间添加或删除流程或部门，因此我不能保证这些列始终相同，也不能保证它们的数据类型、排序选项、类、格式等

使用knockout，我可以迭代我的数据并按需添加列，尽管这很有效，但我无法更改每个列参数

下面是我正在使用的代码：

var viewModel = {
    pageSize: ko.observable(10),
    pageIndex: ko.observable(0),
    sortCommand: ko.observable("EndDate asc"),
    dataRows: ko.observableArray([]),
    totalRows: ko.observable(0),
    sorted:function(e,data){
        viewModel.sortCommand(data.sortCommand);
    },
    paged:function(e,data){
        viewModel.pageIndex(data.newPageIndex);
    },
    load:function(){
        $.ajax({
            url:"/workcenters/get-active-jobs/",
            datatype:'json',
            data:{
                format: 'json',
                inlinecount: "allpages",
                orderby: viewModel.sortCommand(),
                top: viewModel.pageSize(),
                skip: viewModel.pageIndex() * viewModel.pageSize(),
                page:viewModel.pageIndex()
            },
            success:function(result){
                var data = result.d.results;
                var arr = [];
                $.each(data,function(i){
                    var collection = data[i];
                    arr.push(new job(collection));                      
                });
                viewModel.totalRows(result.d.__count);
                viewModel.dataRows(arr);
            }
        });
    }
};
var job = function(data){
var collection = {
        "Customer Name": ko.observable(data.customername),
        "Job Number": ko.observable(data.jobnumber),
        "Delivery Date": ko.observable(data.projectedend),
        Description: ko.observable(data.description),
        Hours: ko.observable(data.hours)
};

var workhoursCollection = data.workhours;
$.each(workhoursCollection,function(i,workhours){
    var heading = workhours.elements.heading;
    collection[heading] = ko.observable(workhours.elements.value);
});
return collection;
};
$(document).ready(function(){

$('#pagesize').wijdropdown();

$('#activejobs').wijgrid({
    allowColSizing:true,
    allowColMoving:true,
    allowKeyboardNavigation:true,
    allowPaging:true,
    allowSorting:true,
    cellStyleFormatter: function(args){
    },
    rowStyleFormatter: function(args){
    },
    columns: [
            { headerText:'Customer',allowSort:true, dataType:'string'        },
            { headerText:'Job Number',allowSort:true, dataType:'string'},
            { headerText:'Scheduled Completion',allowSort:true, dataType:'datetime', sortDirection:'ascending'},
            { headerText:'Description',allowSort:false, dataType:'string', ensurePxWidth:true, width:250 },
            { headerText:'Total Hours',allowSort:true, dataType:'number'}
        ],
    columnsAutogenerationMode: "merge",
    culture:"en",
    dynamic:true,
    highlightCurrentCell: true,
    loadingText:"Please wait a moment...",
    scrollMode:"auto",
    //showGroupArea:true,
    staticRowIndex:0,
    staticColumnIndex:0
});

ko.applyBindings(viewModel);
viewModel.load();
viewModel.sortCommand.subscribe(function(newValue){
    viewModel.load();
});
viewModel.pageIndex.subscribe(function(newValue){
    viewModel.load();
});
viewModel.pageSize.subscribe(function(newValue){
    viewModel.load();
    $('#pagesize').wijdropdown("refresh");
});
});

function addColumn(rowObject){
var grid = $('#activejobs');
options = grid.wijgrid('option');

grid.wijgrid('destroy');

options.columns.push(rowObject);
grid.wijgrid(options);
}

服务器返回的对象如下所示（PHP）：

最后，我还想使用这些数据创建标注栏，但第一步是能够编辑动态生成的列属性

---

小结：如何使用一些默认列构建wijmo网格，然后在运行时添加新列？

您是否查看了以下链接：？如果您知道所有列的可能性，可以将它们全部隐藏在服务器上的源代码HTML中，然后根据需要切换可见性。

谢谢您的回复。我已经能够向wijgrid添加列，但我还没有时间在这里解释它。我使用Ajax加载列，并在Ajax请求完成之前停止$（document）.ready（）。应该有一个更好的方法，我会努力寻找它，一旦我得到进一步的发展。与Wijmo元素一起工作使我落后于计划，因为我总是必须对它们的示例进行反向工程，以使任何东西都能正常工作。

d = array(
 'results'=>array{
          "customername"=>$data->name,
      "jobnumber"=>$data->number,
      "projectedend"=>$data->projectedenddate,
      "description"=>$data->description,
      "hours"=>$data->estimatedhours,
       "workhours"=>$workgroupCollection
  }, '__count'=>$count
)
$workgroupCollection = array{   
    'info'=>array('heading'=>$workgroup->name,'name'=>$workgroupName),
    'elements'=>array(
     'name'=>$element,
     'heading'=>$workAreaModel->name,
         'value'=>$hours
    )
}