jEasyUI 取得选中行数据学习笔记

在 jEasyUI 中，要获取表格中选中行的数据，可以通过以下步骤来实现：

使用 datagrid 的 getChecked 方法获取选中行的数据数组
遍历数组，将每个对象的属性值拼接为字符串或者做其他处理

下面是一个示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jEasyUI 取得选中行数据学习笔记</title>
  <!-- 引入 jEasyUI 的 CSS 文件和 JS 文件 -->
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/bootstrap/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css">
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $('#dg').datagrid({
        url: 'datagrid_data.json',
        columns: [[
          {field:'id',title:'ID',width:100},
          {field:'name',title:'Name',width:100},
          {field:'price',title:'Price',width:100},
          {field:'category',title:'Category',width:100},
          {field:'description',title:'Description',width:100}
        ]],
        toolbar: [{
          text:'Get Selected Rows',
          iconCls:'icon-search',
          handler:function(){
            var rows = $('#dg').datagrid('getChecked');
            $.each(rows, function(index, row){
              alert(row.id + ',' + row.name + ',' + row.price + ',' + row.category + ',' + row.description);
            });
          }
        }]
      });
    });
  </script>
</head>
<body>
  <table id="dg"></table>
</body>
</html>

在上面的示例中，我们创建了一个 datagrid，其中有一个工具栏，点击工具栏中的按钮时，会弹出一个对话框，显示选中行的数据。具体实现过程如下：

在 datagrid 的 toolbar 中添加一个按钮，并设置 iconCls 属性为 'icon-search'，表示按钮图标为搜索图标。
绑定按钮的 click 事件，当按钮被点击时，会执行回调函数中的代码。
在回调函数中，使用 datagrid 的 getChecked 方法获取选中行的数据数组，然后遍历数组。
在遍历数组的过程中，对于每个对象，将其属性值拼接为字符串，并使用 alert 方法弹出对话框。

这样就完成了获取选中行数据的操作。需要注意的是，getChecked 方法只能获取选中的复选框所在行的数据，如果要获取单选框所在行的数据，可以使用 getSelected 方法。