当声明性地创建一个dojox.grid.DataGrid - 如何在field属性中指定嵌套数据？ [英] When declaratively creating a dojox.grid.DataGrid - how to specify nested data in the field attribute?
问题描述
< table dojoType = dojox.grid.DataGrid >
< thead>
< tr>
< th field =id> ID< / th>
< th field =contact.name> Name< / th>
< th field =contact.tel>电话< / th>
< th field =contact.birthdate.time>生日< / th>
< / tr>
< / thead>
< / table>
数据看起来像这样：
[{
'id'：1，
'contact'：{
'name'：'Doh'，
'firstname' ：'John'，
'tel'：'123-123456'，
'birthdate'：{
'javaClass'：'java.sql.Timestamp'，
' '：1234567893434}}
}]
ID被渲染为核心，但所有其他渲染作为...。
我试图指定一个格式化程序，将基础对象contact设置为
的FIELD，然后返回FIELD.name，例如。
这个工作到目前为止，显示正确的值，但是排序然后
使用基础对象。
我认为可能有一个方式推动这更进一步，覆盖了排序
的表，但我想保持尽可能简单。
另外我想防止
任何想法？
我已经发现有一个名为get的DataGrid行定义的属性。
get指定返回要在DataGrid列中显示的值的函数的名称。
理论上这应该可以解决我的问题。 >
get-function将以以下方式实现：
网格定义：
< table dojoType =dojox.grid.DataGrid>
< thead>
< tr>
< th field =id> ID< / th>
< th field =contactget =myGrid.getContactName> Name< / th>
< th field =contactget =myGrid.getContactTel>电话< / th>
< th field =contactget =myGrid.getContactBirthdateTime>生日< / th>
< / tr>
< / thead>
< / table>
回调函数（示例）：
myGrid.getContactName = function（colIndex，item）{
return item.name;
};
如果这个实现是正确的，我不知道这一点，因为
项目参数在我的应用程序中始终为空。
这可能是由于使用了新的Store API（store.Memory）而不是ItemFileReadStore，但是我没有成功在解决这个难题的时候。
此外，我无法使用这种新方法测试Gird排序，所以我不会将
标记为已解决的解决方案。
更新
myGrid.getContactName = function（colIndex，record）{
if（record）return record.contact.name;
else return null;
};
一旦我避免了这种情况，这样就可以正常工作。
然而，Grid的客户端类似乎不能通过get函数访问，而是直接使用该字段。这阻止了嵌套字段的正确排序。
更新
解决我的问题：
第一个问题：指定DataGrid字段的嵌套数据已经使用get-function来解决数组子结构。 （上面已解释）
然而排序仍然依赖于field属性。
如果字段属性包含数组的名称，则此列将无法正确排序。
我不得不修改几个dojo类来适应这种情况。我以后会把它放在一个更模块化的形式，但这是现在的原始结果：
首先我需要允许在Grid中定义一个addtional比较器回调定义。
为此我添加了一些代码到dojox.grid.cells._base
dgc._Base.markupFactory = function（node，cellDef）{
var d = dojo;
...
var comparator = d.trim（d.attr（node，comparator）||）;
if（comparator）{
cellDef.comparator = dojo.getObject（comparator）;
}
...
}
接下来的DataGrid需要给这个新参数给查询进行排序。
这是在dojox.grid.DataGrid中完成的。 c是上面修改的Cell I。
getSortProps：function（）{
...
return [{attribute：c.field，降：降序，比较：c.comparator}];
}
最后我需要更改在dojo.store中定义的排序本身。 util.SimpleQueryEngine。
SimpleQueryEngine是MemoryStore（dojo.store.Memory）的默认引擎。
function execute（array）{
//执行整个查询，首先我们过滤
var results = dojo.filter（array，query）;
// next我们排序
if（options&& options.sort）{
results.sort（function（a，b）{
for（var sort，i = 0; sort = options.sort [i]; i ++）{
var aValue = a [sort.attribute];
var bValue = b [sort.attribute];
if（aValue ！= bValue）{
//更改部分起始
if（options.sort [i] .comparator）{
return !! sort.descending == options.sort [i] .comparator （aValue，bValue）？-1：1;
}
else {
return !! sort.descending == aValue> bValue？-1：1;
}
//更改部分结束
}
}
返回0;
}）;
}
...
返回结果;
}
现在我可以添加比较器到每一列，并将其定义在我想要的地方：
声明式DataGrid设置：
...
< td field =myArrayget =getsNameFromArraycomparator =comparingNames> Name< / td>
...
比较器函数的Javascript定义（a和b是myArray对象）：
compareNames = function（a，b）{
return a.name> b.name;
}
Javascript定义的getter函数（记录是整行并包含 myArray对象）：
getNamesFromArray = function（idx，record）{
return record.myArray.name;
}
I'm creating a dojox.grid.DataGrid in dojo 1.6 with the following notation:
<table dojoType="dojox.grid.DataGrid">
<thead>
<tr>
<th field="id">ID</th>
<th field="contact.name">Name</th>
<th field="contact.tel">Telephone</th>
<th field="contact.birthdate.time">Birthday</th>
</tr>
</thead>
</table>
The Data looks something like this:
[{
'id':1,
'contact':{
'name':'Doh',
'firstname':'John',
'tel':'123-123456',
'birthdate':{
'javaClass':'java.sql.Timestamp',
'time':1234567893434}}
}]
ID is rendered corectly, but all the others render as "...". I have tried to specify a formatter, setting the base Object "contact" as the FIELD and then returning FIELD.name for example. This works in so far that the correct Value is displayed, but the Sorting then uses the base object.
I think there might be a way to push this even further, overriding the sorting of the table, but I would like to keep this as simple as possible.
Also I wish to prevent performance issues from popping up.
Any Ideas?
I have found out that there is an attribute for the DataGrid row definition called "get". "get" specifies the name of a function that returnes the value to be displayed in the DataGrid column.
Theoretically this should solve my Problem.
The get-function is to be implemented in the following way:
Grid Definition:
<table dojoType="dojox.grid.DataGrid">
<thead>
<tr>
<th field="id">ID</th>
<th field="contact" get="myGrid.getContactName">Name</th>
<th field="contact" get="myGrid.getContactTel">Telephone</th>
<th field="contact" get="myGrid.getContactBirthdateTime">Birthday</th>
</tr>
</thead>
</table>
Callback Function (example):
myGrid.getContactName = function(colIndex,item){
return item.name;
};
I can not tell at the Moment if this implementation is correct, since the item parameter is always null in my application.
This could be due to the use of the new Store API (store.Memory) instead of the ItemFileReadStore, but I have not been successfull in solving this puzzle yet.
Also I was not able to test Gird sorting with this new approach, so I will not flag this sollution as resolved yet.
update
myGrid.getContactName = function(colIndex,record){
if(record)return record.contact.name;
else return null;
};
Once I averted the null case it worked fine this way.
However client sort of the Grid doesn't seem to access through the get function but uses the field directly. This prevents correct sorting on nested fields.
update
I finally got a sollution for my problems:
The first problem : specifying nested data for the DataGrid fields was solved allready using the get-function to dive into the arrays substructure. (that is explained above)
Sorting however is still dependent on the field attribute. If the field attribute contains the name of an array this column will not sort correctly.
I had to modify a few dojo classes to accomodate for that. I will later put this in a more modular form, but here is the raw result for now:
First I needed to allow the definition of an addtional comparator callback in the Grid Definition. For that I have added some code to the dojox.grid.cells._base
dgc._Base.markupFactory = function(node, cellDef){
var d = dojo;
...
var comparator = d.trim(d.attr(node,"comparator")||"");
if(comparator){
cellDef.comparator = dojo.getObject(comparator);
}
...
}
Next the DataGrid needs to give this new parameter to the query to do the sorting. This is done in the dojox.grid.DataGrid. "c" is the Cell I modified above.
getSortProps:function(){
...
return[{attribute:c.field,descending:desc,comparator:c.comparator}];
}
Finally I need to change the sorting itself which is defined in dojo.store.util.SimpleQueryEngine. SimpleQueryEngine is the default Engine for the MemoryStore (dojo.store.Memory).
function execute(array){
// execute the whole query, first we filter
var results = dojo.filter(array, query);
// next we sort
if(options && options.sort){
results.sort(function(a, b){
for(var sort, i=0; sort = options.sort[i]; i++){
var aValue = a[sort.attribute];
var bValue = b[sort.attribute];
if (aValue != bValue) {
// changed Part start
if(options.sort[i].comparator){
return !!sort.descending == options.sort[i].comparator(aValue,bValue) ? -1 : 1;
}
else{
return !!sort.descending == aValue > bValue ? -1 : 1;
}
// changed Part end
}
}
return 0;
});
}
...
return results;
}
Now I can add comparators to each column and define them where I want to:
Declarative DataGrid Setup:
...
<td field="myArray" get="getsNameFromArray" comparator="comparesNames">Name</td>
...
Javascript definition of the comparator function (a and b are "myArray" objects):
compareNames = function(a,b){
return a.name > b.name;
}
Javascript definition of the getter function (record is the whole row and contains the "myArray" object):
getNamesFromArray= function(idx,record){
return record.myArray.name;
}
这篇关于当声明性地创建一个dojox.grid.DataGrid - 如何在field属性中指定嵌套数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
