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有所了解。