EasyUI combogrid 用法(带搜索)

combogrid :
<select class="easyui-combogrid" style="width:250px" id="txtUserName" name="UserName" data-options="
			                panelWidth: 650,
			                idField: 'Id',
			                textField: 'UserName',
                            singleSelect:true,
			                url: '请求的url',
			                method: 'get',
                            queryParams : {
							    name : '*'
						    },
			                columns: [[
				                {field:'UserName',title:'会员名',width:100,align:'left'},
                                {field:'Email',title:'邮箱',width:160,align:'left'}
			                ]],
                            toolbar:'#myToolbar',
			                fitColumns: true,
                            pagination:true,
                            pageSize:20
		                ">
	                </select>


指定显示的工具栏:

<div id="myToolbar" class="datagrid-toolbar">
        <ul class="datagridMenu">
            <li>
                <input type="text" id="txtLoginName" name="LoginName" style="width: 220px;"
                    class="easyui-textbox" />
            </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="loadAgain();" 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>


搜索:

function Search() {
            var name = decodeURIComponent($('input[name="LoginName"]').val());
            $('#txtUserName').combogrid("grid").url = '请求的url';
            $('#txtUserName').combogrid("grid").datagrid("reload", { name: name });
            
        };


刷新:

function loadAgain() {
            $('#txtUserName').combogrid("grid").datagrid('reload'); 
            $('#txtUserName').combogrid("grid").datagrid('clearSelections');
        }







展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值