EasyUI Combogrid的使用

1、简单Combogrid的使用

1.1表单：

<input id="xxxid"  data-options="validType:['maxLength[40]'],panelWidth:'300',idField:'academyCode',textField:'academyName',mode:'remote',url:'${pageContext.request.contextPath}/xxxProject/xxxAction',

columns:[[{field:'academyCode',title:'院校代码',width:80},{field:'academyName',title:'院校名称',width:130},{field:'provinceName',title:'所属地区',width:70}]]" class="easyui-combogrid" required="true"/>

注：1、如果没有指定mode:'remote'，只能达到简单的数据定位，而如果指定了就可以达到过滤的效果，输入的参数固定以 'q'作为参数名传入后台，如1.2方法中的参数；

2、指定multiple:true可以实现多选(其他参数的使用请参考EasyUI官方文档)

1.2方法（url指定的方法，需要返回json数据）

@RequestMapping(value = "/xxxMethod")
    @ResponseBody
    public void xxxMethod( HttpServletRequest request, HttpServletResponse response,String q){
        try {
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            response.setContentType("text/html");
            List<AcademyCode> list = academyCodeService.getAcademyCodeList(q);
            String json = JSONArray.toJSONString(list);
            response.getWriter().write(json);
        } catch (Exception e) {
            e.printStackTrace();
          //异常处理
        }
    }

2、携带多个查询条件的Combogrid

2.1表单：

<input editable="false" id="ids" data-options="width:715,validType:['maxLength[40]'],panelWidth:'715',multiple: true,idField:'expertId',

textField:'aac003',url:'${ctx}/xxxProject/xxxAction/xxxMethod',columns:[[{field:'aac003',title:'姓名',width:50,align: 'left',tooltip: true},

{field:'aac004',title:'性别',width:50,code:'AAC003',align: 'center'},{field:'aac011',title:'文化程度',width:50,code:'AAC011',align: 'center'}]],

toolbar:'#myToolbar',fitColumns: true,pagination:true" class="easyui-combogrid" required="true"/>

注：1、toolbar:'#myToolbar' 指定查询框

<div id="myToolbar">
    <ul>
        <li><label>姓名：</label></li>
        <li>
            <input class="easyui-textbox" id="name" data-options="width:150" name="myname"
            />
        </li>
        <li><label>文化程度：</label></li>
        <li>
            <input editable="false" id="xxx" name="xxx" class="easyui-combobox"
                   data-options="width:150,code:'xxx',panelHeight:'250',width:220"/>
        </li>
        <li>
            <a οnclick="Search();" href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain">
                    <span class="l-btn-left l-btn-icon-left"><span class="l-btn-text" title="查询">查询</span><span
                            class="l-btn-icon icon-search"> </span></span></a>
        </li>
        <li>
            <a οnclick="Clear();" href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain">
                    <span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">清空</span><span
                            class="l-btn-icon icon-reload"> </span></span></a>
        </li>
    </ul>
    <div style="clear: both">
    </div>
</div>

<script type="text/javascript">
    function Search() {
        var myname = decodeURIComponent($('input[name="myname"]').val());
        var xxx = decodeURIComponent($('input[name="xxx"]').val());
        $('#ids').combogrid("grid").datagrid("reload", {myname: myname, xxx: xxx});

    };
    function Clear() {
        $('#xxx').combobox("setValue", '');
        $('#myname').textbox("setValue", '');
    };
</script>