argumentum
Newbie
Posts: 22
|
|
« on: February 02, 2018, 02:16:11 PM » |
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multiple ComboGrid - Pagination - searchbox</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <h2>Multiple ComboGrid, Pagination, SearchBox</h2> <p> Click the right arrow button to show the DataGrid and select items.<br> In the pagination, <b>the searchbox is not selectable</b><br> And I'd like to update the grid, with a php call, to load<br> with values %like% the selected ( Product / Attr. ).
</p> <div style="margin:20px 0"></div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <div style="margin-bottom:20px"> <select id="cp" class="easyui-combogrid" style="width:100%" data-options=" panelWidth: 500, multiple: true, editable: false, idField: 'itemid', pagination: true, textField: 'productname', // url: 'datagrid_data1.json', // method: 'get', data:{'total':11,'rows':[ {'productid':'FI-SW-01','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}, {'productid':'K9-DL-01','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}, {'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}, {'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':26.50,'attr1':'Rattleless','itemid':'EST-12'}, {'selected':true,'productid':'RP-LI-02','productname':'Iguana','unitcost':12.00,'status':'P','listprice':35.50,'attr1':'Green Adult','itemid':'EST-13'}, {'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':158.50,'attr1':'Tailless','itemid':'EST-14'}, {'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':83.50,'attr1':'With tail','itemid':'EST-15'}, {'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':23.50,'attr1':'Adult Female','itemid':'EST-16'}, {'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':89.50,'attr1':'Adult Male','itemid':'EST-17'}, {'productid':'AV-CB-01','productname':'Amazon Parrot','unitcost':92.00,'status':'P','listprice':63.50,'attr1':'Adult Male','itemid':'EST-18'} ]}, value: ['EST-11','EST-13'], columns: [[ {field:'itemid',title:'Item ID',width:80}, {field:'productname',title:'Product',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:200}, {field:'status',title:'Status',width:60,align:'center'} ]], fitColumns: true, label: 'Select Items:', labelPosition: 'top' "> </select> <div id="cp-buttons"> <input class="easyui-searchbox" data-options="menu:'#mm',prompt:'limit search by selected',searcher:doSearch" style="width:100%"></input> <div id="mm"> <div data-options="name:'product'">Product</div> <div data-options="name:'attr'">Attr.</div> </div> </div> </div> </div>
<script> $(function(){
var grid = $('#cp').combogrid('grid'); // get the datagrid of combogrid var pager = grid.datagrid('getPager'); // get the pager of datagrid pager.pagination({ layout: ['sep', 'first', 'prev', 'sep', 'next', 'last', 'sep', 'refresh'], displayMsg: '', buttons: $('#cp-buttons'), onChangePageSize: function(pageSize) { dcmPPageSizeDg = pageSize; console.log('cp : onChangePageSize : pageSize =' + pageSize); } });
}); function doSearch(){ // update the grid but leave/include previously selected }
</script>
</body> </html> The preview is at http://code.reloado.com/uyizif3/edit#html,liveIn the pagination, the searchbox is not selectable And I'd like to update the grid, with a php call, to load with values %like% the selected ( Product / Attr. ). Thanks
|