您的位置：首页 > 产品设计 > UI/UE

EasyUI - datagrid属性idField详解

2016-03-19 11:50 585 查看

EasyUI - datagrid属性idField详解

idField

在

treegrid

中的是一个必选的属性，在

datagrid

中是一个可选的属性。

也许有人为了方便使用

getRowIndex

会在

datagrid

中设置

idField

属性，如果不注意这个属性，那么在调用

getSelected

或者

getChecked

方法时会引起更多莫名其妙的问题。

这篇博客就是讲

datagrid

中的

idField

对

getSelected

和

getChecked

方法相关方法的影响。

因为

selected

和

checked

情况类似，下面就以

selected

的情况来说明。

在选中一行的时候

执行的部分关键代码如下：

if (opts.idField) {
_5cf(_6b9.selectedRows, opts.idField, row);
}
opts.finder.getTr(_6b6, _6b7).addClass("datagrid-row-selected");
opts.onSelect.apply(_6b6, _5d0(_6b6, [_6b7, row]));

这里的

_6b9

是

datagrid

的

data-datagrid

属性，获取方法为:

//使用jquery获取
$('#datagridId').data('datagrid');
//在easyui源码中使用下面方法获取
$.data(_6a7, "datagrid");

这个对象的一级属性如下图：

注意看这里的

checkedRows

和

selectedRows

属性。

继续看第一段代码，当

if (opts.idField)

存在

idField

属性的时候，会调用

_5cf

方法：

function _5cf(a, o, r) {
for (var i = 0, len = a.length; i < len; i++) {
if (a[i][o] == r[o]) {
return;
}
}
a.push(r);
};

这个方法就是当新选择的值和

selectedRows

中已有的

idField

值都不相同的时候，放到

selectedRows

中。通过

idField

避免重复！

当没有设置

idField

属性的时候，就没有

selectedRows

的事，只是调用下面的代码：

opts.finder.getTr(_6b6, _6b7).addClass("datagrid-row-selected");

这个代码就是给当前点击的行添加一个选中的样式，如下图：

通过上面代码我们应该已经了解选中一行的过程。

下面我们看当取消选中行时是如何处理的

关键代码如下：

opts.finder.getTr(_6bb, _6bc).removeClass("datagrid-row-selected");
if (opts.idField) {
_5cd(_6be.selectedRows, opts.idField, row[opts.idField]);
}

看过前面的再看这里就容易很多了，首先

removeClass

去掉选中的样式。

然后如果有

idField

属性，执行

_5cd

方法：

function _5cd(a, o, id) {
if (typeof o == "string") {
for (var i = 0, len = a.length; i < len; i++) {
if (a[i][o] == id) {
a.splice(i, 1);
return;
}
}
} else {
var _5ce = _5cc(a, o);
if (_5ce != -1) {
a.splice(_5ce, 1);
}
}
};

如果取消的列在

selectedRows

中，就会从中移除（这里的else一般不会出现，不需要重视这里）。

到这儿我们就了解了

selectedRows

增加和删除的情况。

注意1

这里要强调的是selectedRows
中的值只能通过取消选择，或者
unselectAll
取消【当前页】的选择，即使重新加载数据，或者清空数据，都不会影响
selectedRows
中的值。想要取消全部选择怎么办？你可以使用
clearSelections
方法：

$('#id').datagrid('clearSelections');

取消全部选择，这个方法和当前显示的数据或者加载过的数据无关。这个方法如下：

clearSelections: function (jq) {
return jq.each(function () {
var _76d = $.data(this, "datagrid");
var _76e = _76d.selectedRows;
var _76f = _76d.checkedRows;
_76e.splice(0, _76e.length);
_6ba(this);
if (_76d.options.checkOnSelect) {
_76f.splice(0, _76f.length);
}
});
}

获取

selectedRows

后，通过

_76e.splice(0, _76e.length);

清空

selectedRows

，这一步已经达到我们的基本目标了，然后是调用

_6ba(this);

，这一步是取消当前页的选中状态（就是

unselectAll

方法）。如果

checkOnSelect=true

，在

_6ba

方法中也有这个判断，会取消复选框选中状态，在这里会清空

checkedRows

的值。

当你只想获取当前页的选择项时，最好的解决方法就是不设置
idField
属性。否则就要自己处理好调用
clearSelections
的时机。

注意2

同时你也应该了解，合理的使用
idField
还可以实现翻页选择（checkbox一样），这种情况下，你的
datagrid
能记住每一页的选中情况，而且通过
getSelections
(或
getChecked
)来获取所有页中选中的行。

下面我们看当调用

getSelected

方法时，是如何处理的

这个方法的定义如下：

getSelected: function (jq) {
var rows = _6a6(jq[0]);
return rows.length > 0 ? rows[0] : null;
}

获取

rows

后返回第一个或者

null

。在看

_6a6

方法：

function _6a6(_6a7) {
var _6a8 = $.data(_6a7, "datagrid");
var opts = _6a8.options;
var data = _6a8.data;
if (opts.idField) {
return _6a8.selectedRows;
} else {
var rows = [];
opts.finder.getTr(_6a7, "", "selected", 2).each(function () {
rows.push(opts.finder.getRow(_6a7, $(this)));
});
return rows;
}
};

当我们设置

idField

时，直接将

selectedRows

返回了。

如果没有设置

idField

，就会使用

else

中的方法，获取所有

selected

的元素，然后一个个循环，放到

rows

数组中返回。

从上面这两种处理方式来看，显然是有

idField

的时候效率更高(else效率也不低)。

其他和

selected

有关的方法，最终调用执行的都是上面提到的这些方法。这里不一一介绍了。

idField

最有用的地方

getRowIndex

getRowIndex

需要一个参数，

row

或者

id

的值，使用

id

的前提就是设置

idField

。

下面是

getRowIndex

方法：

function _6a3(_6a4, row) {
var _6a5 = $.data(_6a4, "datagrid");
var opts = _6a5.options;
var rows = _6a5.data.rows;
if (typeof row == "object") {
return _5cc(rows, row);
} else {
for (var i = 0; i < rows.length; i++) {
if (rows[i][opts.idField] == row) {
return i;
}
}
return -1;
}
};

当使用

row

参数时，满足

typeof row == "object"

，之后调用

_5cc

方法，和所有的

rows

一一比较返回。

另外就是使用

idField

方式，

_6a5.data.rows

包含了当前页的所有行。对所有行循环，比较

idField

相同的值，直接返回行号，这种方式使用也方便，因为我们业务中很容易能获取

id

的值，而不容易得到一行

row

。

最后

官方文档中对

idField

的介绍只有下面的这些：

idField - string - Indicate which field is an identity field.

只有通过查看源码你才能发现原来

idField

竟然起了这么多的作用，这个属性隐藏的含义太多，不注意就会遇到“莫名其妙”的问题。

希望通过本文能让你对

datagrid

中的

idField

有所了解。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

EasyUI - datagrid属性idField详解