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 onclick="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 onclick="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>