EasyUI - datagrid属性idField详解

蔚落 2022-07-29 08:54 771阅读 0赞

# 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");

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

![这里写图片描述][20160319103541953]

注意看这里的`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");

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

![这里写图片描述][20160319104128267]

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

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

关键代码如下：

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

看过前面的再看这里就容易很多了，首先`removeClass`去掉选中的样式。

然后如果有`idField`属性，执行`_5cd`方法：

如果取消的列在`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`方法：

当我们设置`idField`时，直接将`selectedRows`返回了。  
如果没有设置`idField`，就会使用`else`中的方法，获取所有`selected`的元素，然后一个个循环，放到`rows`数组中返回。  
从上面这两种处理方式来看，显然是有`idField`的时候效率更高(else效率也不低)。

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

## `idField`最有用的地方`getRowIndex` ##

`getRowIndex`需要一个参数，`row`或者`id`的值，使用`id`的前提就是设置`idField`。

下面是`getRowIndex`方法：

当使用`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`有所了解。

[20160319103541953]: /images/20220728/4e579ae493034bceade2c8c814495d18.png
[20160319104128267]: /images/20220728/d0c15f3448a74663a7a6070d4049c0e3.png