easyui datagrid列设置checkbox,并能获取选中的值如图

一、easyui datagrid列设置checkbox,并能获取选中的值如图

在 easyui datagrid中设置列为 checkbox并能获取选中的值，可以按照以下步骤进行操作：

1、在 columns配置中设置需要显示 checkbox的列，示例代码如下：

{field:'id',title:'ID',width:80},

{field:'name',title:'Name',width:100},

{field:'gender',title:'Gender',width:100},

{field:'checkbox',title:'',checkbox:true},

在这个示例中，第 4列设置了 checkbox。

2、在 easyui datagrid的 toolbar中添加按钮，并绑定事件，示例代码如下：

iconCls:'icon-search',

var rows=$('#dg').datagrid('getSelections');

alert(rows.length+' rows are selected.');

在这个示例中，添加了一个名为"Get Selected"的按钮，点击按钮会获取当前选中的行，并弹出提示框显示选中的行数。

3、在点击按钮时获取选中的行，示例代码如下：

var rows=$('#dg').datagrid('getSelections');

在这个示例中，使用 easyui datagrid的 getSelections方法获取选中的行数据。

4、在获取选中的行后，可以对这些行进行后续的操作，例如对每行进行遍历，获取某一列的值，示例代码如下：

for(var i=0; i<rows.length; i++){

console.log(row.id);//获取 id列的值

在这个示例中，使用 for循环遍历选中的行数据，然后使用 row.id获取 id列的值。

以上就是在 easyui datagrid中设置列为 checkbox并能获取选中的值的操作步骤。

二、下列代码中data-options属性是什么意思

1、这不是HTML的标准属性，是个自定义属性，HTML是不认识它的，如果就这样直接运行，它是不会产生任何效果的（但也不会造成出错），必须结合JS代码才能产生效果，比如遍历页面所有元素，发现带有data-options（意思就是数据参数）属性的就取出来并解析，具体怎么做就要看程序的设计者了。

2、这种技术的典型应用是类似淘宝的图片延迟显示技术，比方说（只是举例，与淘宝的实际代码无关），页面代码中的图片是这样的：

3、<img src="一个空图片" src1="实际要显示的图片">

4、其中src1是自定义的属性，上述代码显示的效果就是一个空图片，如果有多个图片，那么显示的就是多个空图片；

5、然后，给页面的滚动事件绑定js代码，当图片滚动到浏览器的可见区域时，就把src1属性赋值给src属性，这样的话实际的图片就显示出来了。

6、这样做的好处就是页面的整体显示速度很快，因为不在可见区域的图片是没有实际下载的；其次就是可以减少页面的下载量，因为不是所有人都会把页面内的所有图片都看完的，没看的图片就不下载。这种技术最适合一次性要显示多个图片的页面，如网店的详情页。