在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对象中的OR,如下所示:
$('#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);
}
服务器返回的Object如下所示(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
)
}
最终,我想使用这些数据来创建Bands,但第一步是能够编辑动态生成的列属性。
总结:如何使用某些默认列构建wijmo Grid,然后在运行时添加新列?
答案 0 :(得分:0)
您是否看过这个链接:http://wijmo.com/demo/explore/?widget=Grid&sample=Column%20visibility?如果您知道所有列可能性是什么,您可以将它们全部放在服务器上的源代码HTML中作为隐藏,然后根据需要切换可见性。