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]);
}看过前面的再看这里就easy非常多了，首先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同样的值。直接返回行号，这样的方式使用也方便，由于我们业务中非常easy能获取id的值。而不easy得到一行row。
最后
官方文档中对idField的介绍仅仅有以下的这些：
idField - string - Indicate which field is an identity field.
仅仅有通过查看源代码你才干发现原来idField居然起了这么多的作用，这个属性隐藏的含义太多，不注意就会遇到“莫名其妙”的问题。
希望通过本文能让你对datagrid中的idField有所了解。