Title: in datagrid scrollview, selectRecord is not work correct! Post by: mygod on January 08, 2019, 09:21:24 PM <!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DataGrid Virtual Scrolling - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script> </head> <body> <h2>DataGrid Virtual Scroll View Demo</h2> <p>Drag the vertical scroll and release it to navigate to the desired page.</p> <div style="margin-bottom:10px"> <select onchange="load(this.value)"> <option value="remote">Load Remote Data</option> <option value="local">Load Local Data</option> </select> </div> <table id="tt" style="width:700px;height:300px"> </table> <script type="text/javascript"> $(function(){ $('#tt').datagrid({ title: 'DataGrid - VirtualScrollView', url: 'datagrid27_getdata.php', view: scrollview, singleSelect: true, rownumbers: true, idField:'inv', autoRowHeight:false, pageSize:50, columns: [[ { title: 'Action', field: 'action', width: 100, formatter: function(val, row, index) { var str= '<a href="#" class="easyui-linkbutton" onclick="test('+row.inv+')">test</a>'; var $div = $("<div/>").append(str); return $div.html(); } }, { width: 150, title: 'Inv No', field: 'inv' } , { width: 150, title: 'Date', field: 'date' }, { width: 150, title: 'Name', field: 'name' }, { width: 150, title: 'Amount', field: 'amount' }, { width: 150, title: 'Price', field: 'price' }, { width: 150, title: 'Cost', field: 'cost' } , { width: 150, title: 'Note', field: 'note' } ]] }); }); function test(inv) { $('#tt').datagrid('selectRecord',inv); //is not work correct var row = $('#tt').datagrid('getSelected'); alert(row.name); } function loadLocal(){ var rows = []; for(var i=1; i<=8000; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } $('#tt').datagrid('loadData', rows); } function load(mode){ if (mode == 'local'){ loadLocal(); } else { $('#tt').datagrid({ url:'datagrid27_getdata.php' }); } } </script> <style type="text/css"> .datagrid-header-rownumber,.datagrid-cell-rownumber{ width:40px; } </style> </body> </html> Title: Re: in datagrid scrollview, selectRecord is not work correct! Post by: stworthy on January 08, 2019, 11:56:34 PM If the datagrid loads data in remote mode(fetch data page by page), you can't select a un-existing record, you won't get the selected row by calling 'getSelected' method.
Please look at this example http://code.reloado.com/oquleg3/edit#preview. It works fine. Title: Re: in datagrid scrollview, selectRecord is not work correct! Post by: mygod on January 10, 2019, 07:28:00 PM this example http://code.reloado.com/oquleg3/edit#preview
It seems not right either if i scroll to line 5671,then click this line then click the selectRow button it show the line 103 information Title: Re: in datagrid scrollview, selectRecord is not work correct! Post by: stworthy on January 11, 2019, 02:10:33 AM This is the button clicking handler.
Code: function selectrow(){ When your click the button, it will select the record 'Inv103' and scroll to it. Title: Re: in datagrid scrollview, selectRecord is not work correct! Post by: mygod on January 11, 2019, 05:48:01 PM sorry ! I didn't look carefully.
thank you ! Now,I known how to do it. |