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());
            }
        }
    }
}