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

Question

如题所述

Answer 1

html:

<table id="dg"></table>

js:

// 创建Datagrid

$('#dg').datagrid({

url: 'data.php',

columns: [[

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

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

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

]],

toolbar: [{

text: 'Get Selected',

iconCls: 'icon-search',

handler: function(){

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

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

// 这里可以处理选中行的数据

}

}]

});

Answer 2

在 easyui datagrid 中设置列为 checkbox 并能获取选中的值，可以按照以下步骤进行操作：
1、在 columns 配置中设置需要显示 checkbox 的列，示例代码如下：
columns:[[
{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 中添加按钮，并绑定事件，示例代码如下：
toolbar:[{
text:'Get Selected',
iconCls:'icon-search',
handler:function(){
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++){
var row = rows[i];
console.log(row.id); // 获取 id 列的值
}
在这个示例中，使用 for 循环遍历选中的行数据，然后使用 row.id 获取 id 列的值。
以上就是在 easyui datagrid 中设置列为 checkbox 并能获取选中的值的操作步骤。

Answer 3

您好！要在EasyUI DataGrid中设置列为checkbox，并获取选中的值，您可以按照以下步骤进行：

在DataGrid的列设置中，添加一列类型为checkbox的列，代码如下：

htmlCopy code<table id="datagrid" class="easyui-datagrid" style="width:100%;height:250px" data-options="singleSelect:false">
   <thead>
       <tr>
           <th data-options="field:'ck',checkbox:true"></th>
           <th data-options="field:'field1',width:100">列1</th>
           <th data-options="field:'field2',width:100">列2</th>
           <th data-options="field:'field3',width:100">列3</th>
       </tr>
   </thead></table>


在这个示例中，我们创建了一个带有checkbox列的DataGrid。注意，我们将singleSelect设置为false以允许多选。

获取选中的值：

要获取选中的值，您可以使用DataGrid的getChecked方法。示例如下：

javascriptCopy codevar selectedRows = $('#datagrid').datagrid('getChecked');


selectedRows将包含一个包含所有选中行的对象数组。然后，您可以遍历这个数组并获取所需的数据。例如，如果您想获取选中行的field1值，可以这样做：

javascriptCopy codefor (var i = 0; i < selectedRows.length; i++) {    var fieldValue = selectedRows[i].field1;    console.log('Field1 value of selected row ' + (i + 1) + ': ' + fieldValue);
}


这样，您就可以设置checkbox列并获取选中的值了。祝您使用愉快！如果答案满意，请采纳回答，谢谢！

Answer 4

可以通过EasyUI datagrid的columns属性设置列为checkbox，同时也可以通过EasyUI datagrid的getChecked方法获取选中的值。
下面是一个示例代码：
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
url="get_data.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="checkbox" width="100" checkbox="true">Selected</th>
</tr>
</thead>
</table>
在上述示例中，通过在checkbox列上添加checkbox="true"属性来指定该列为checkbox列。
然后，在JavaScript代码中，可以通过以下方式获取选中的行：
var selectedRows = $('#dg').datagrid('getChecked');
这将返回一个数组，包含所有选中的行的数据。