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 |
