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,
                 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:'物料编码',100},
                    {field:'itemName',title:'物料名称',140},
                    {field:'version',title:'版本',40},
                    {field:'itemType',title:'类别',120},
                    {field:'lifeCycle',title:'生命周期',80}
                ]]
            "></select>
            <input id="leftVersion" class="easyui-textbox" data-options="
                    label: '左侧版本：',
                    labelWidth:70,
                    labelPosition: 'left',
                    prompt: '',
                     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());
            }
        }
    }
}