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 を構築し、実行時に新しい列を追加するにはどうすればよいですか?