获取bootgrid选中行数据_Easyui 取得选中行数据_EasyUI 教程

示例

本实例演示如何取得选中行数据。

数据网格(datagrid)组件包含两种方法来检索选中行数据: getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。

getSelections:取得所有选中行数据,返回元素记录的数组数据。

创建数据网格(DataGrid)

url="data/datagrid_data.json"

title="Load Data" iconCls="icon-save">

Item IDProduct IDList PriceUnit CostAttributeStauts

使用演示

取得选中行数据: var row = $('#tt').datagrid('getSelected');

if (row){

alert('Item ID:'+row.itemid+"

Price:"+row.listprice);

}

取得所有选中行的 itemid: var ids = [];

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

for(var i=0; i

ids.push(rows[i].itemid);

}

alert(ids.join('

'));

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于展示海量数据,传统的方式是将数据全部加载到页面中,这样会导致页面加载缓慢,甚至出现卡顿的情况。而虚拟滚动视图可以只加载当前可见的数据,随着滚动条的滚动,动态加载新的数据,从而提高页面的加载速度和用户体验。 在使用 Easyui 进数据滚动展现时,可以使用其提供的 datagrid 组件,并设置其属性 virtual scrolling 为 true。这样就可以启用虚拟滚动视图功能。 具体操作如下: 1. 引入 Easyui 的 CSS 和 JS 文件。 2. 在 HTML 中添加一个 div 元素,并设置其 id。 3. 在 JS 中使用 datagrid 组件,并设置其 virtual scrolling 属性为 true。 代码示例: HTML: ```html <div id="datagrid"></div> ``` JS: ```javascript $('#datagrid').datagrid({ url: 'get_data.php', //获取数据的接口 pagination: false, //关闭分页功能 remoteFilter: true, //启用远程过滤 virtual scrolling: true, //启用虚拟滚动视图 rownumbers: true, //显示号 singleSelect: true, //只允许选择一 columns:[[ {field:'name',title:'姓名',width:100}, {field:'age',title:'年龄',width:100}, {field:'gender',title:'性别',width:100}, {field:'address',title:'地址',width:200} ]] }); ``` 4. 在后端编写相应的接口,用于获取数据。在接口中需要根据 datagrid 组件传递的参数进数据筛选和分页处理。 PHP 代码示例: ```php <?php $page = isset($_POST['page']) ? intval($_POST['page']) : 1; //获取当前页码 $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; //获取每页显示的数据量 $offset = ($page - 1) * $rows; //计算偏移量 //从数据库中获取数据 $sql = "SELECT * FROM table LIMIT $offset, $rows"; $result = mysql_query($sql); $data = array(); while($row = mysql_fetch_assoc($result)){ $data[] = $row; } //返回数据 echo json_encode(array( 'total' => count($data), //总数据量 'rows' => $data //当前页的数据 )); ?> ``` 通过以上步骤,就可以实现 Easyui 的虚拟滚动视图功能,用于展示海量数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值