0

在 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>

或者在这样的 WijGrid 对象中：

$('#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
});

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

通过淘汰赛，我可以遍历我的数据并按需添加列，虽然这很好用，但我无法更改每个列参数。

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

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）：

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

最终，我也想使用这些数据来创建波段，但第一步是能够编辑动态生成的列属性。

摘要：如何构建带有一些默认列的 wijmo Grid，然后在运行时添加新列？

4

1 回答 1

0

你看过这个链接：http ://wijmo.com/demo/explore/?widget=Grid&sample=Column%20visibility ？如果您知道所有列的可能性是什么，您可以将它们全部隐藏在服务器上的源代码 HTML 中，然后根据需要切换可见性。

于 2012-10-02T20:21:10.850 回答