正文
EasyUI ComboGrid 笔记(支持分页)
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
业务要求：
下拉框做选择时需要展现多个字段供用户参考，由于内容可能会很多，故还需要考虑分页。
解决方案：
由于项目整体已经采用了EasyUI，在浏览了demo以后，初步考虑使用EasyUI的combogrid。
界面参考：
实现细节：
下拉框代码，发现combogrid是继承datagrid的，所以可以使用pagination属性，
<select id="leftItem" class="easyui-combogrid" name="leftItem" style=""
data-options="
label: '左侧物料：',
labelWidth:70,
labelPosition: 'left',
loadMsg:'正在查询请稍后......',
panelWidth:500,
panelHeight:500,
delay:600,
width: 200,
value:'',
idField:'itemNumber',
textField:'itemNumber',
rownumbers : true,
mode: 'remote',
pagination:true,
pageSize: 20,
url:'pageItemVersions.do',
onBeforeLoad : beforeLoadFn,
onSelect:gridSelectRow,
columns:[[
{field:'itemNumber',title:'物料编码',width:100},
{field:'itemName',title:'物料名称',width:140},
{field:'version',title:'版本',width:40},
{field:'itemType',title:'类别',width:120},
{field:'lifeCycle',title:'生命周期',width:80}
]]
"></select>
<input id="leftVersion" class="easyui-textbox" data-options="
label: '左侧版本：',
labelWidth:70,
labelPosition: 'left',
prompt: '',
width: 110
" /> <a id="saveBtn" href="#" iconCls="icon-search" style="margin-left: 50px;margin-right: 50px;" class="easyui-linkbutton" onclick="compare()">比较</a>
部分js代码：
function gridSelectRow(index, row){
$("#leftVersion").textbox("setValue",row.version);
} function rightGridSelectRow(index, row){
$("#rightVersion").textbox("setValue",row.version);
} function beforeLoadFn(param){
if(!param || !param.q){
return false;
}
param.limit = param.rows;
var start = (param.page - 1) * param.rows;
param.start = start;
} $(function() {
if(isLowerIE9()){
alert("建议使用IE10以上或者其他非IE内核浏览器，IE10以下部分功能无法正常使用！");
}
var itemNumber = "${itemNumber}";
if(itemNumber){
$('#leftItem').combogrid("setValue", itemNumber);
var leftGrid = $('#leftItem').combogrid('grid'); // get datagrid object
var result = leftGrid.datagrid('load',{q:itemNumber}); // get the selected row
if(result){ }
}
});
后台Java代码：
@RequestMapping("pageItemVersions.do")
@ResponseBody
public PageEasyUI<ItemVO> pageItemVersions(String q, Pageable pageable) {
PageEasyUI<ItemVO> page = null;
if (StringUtils.isNotBlank(q)) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("itemNumber", q);
page = itemBomService.pageItemVersions(map, pageable);
}
return page;
}
返回值：
public class PageEasyUI<T> { /** 汇总 */
private Long total;
/** 内容 */
private List<T> rows; public Long getTotal() {
return total;
} public void setTotal(Long total) {
this.total = total;
} public List<T> getRows() {
return rows;
} public void setRows(List<T> rows) {
this.rows = rows;
} public PageEasyUI() {
} public PageEasyUI(List<T> list) {
super();
this.rows = list;
if (list instanceof Page) {
Page<T> page = (Page<T>) list;
this.total = page.getTotal();
} else {
if (CollectionUtils.isEmpty(list)) {
this.total = 0L;
} else {
this.total = Long.valueOf(list.size());
}
}
}
}
