jQuery EasyUI combogrid的用法及心得

最新推荐文章于 2026-03-29 04:00:35 发布

原创最新推荐文章于 2026-03-29 04:00:35 发布 · 2.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#combogrid #jQuery EasyUI

收录于

JQuery EasyUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用EasyUI的Combogrid组件，通过创建input标签存储Combogrid并设置其属性，如延迟时间、模式、URL等，实现与后端交互，获取并展示数据。同时分享了性能优化经验，建议返回数据量控制在20-50条，避免影响控件性能。

首先我们需要一个创建一个input标签存储combogrid

<input id="combogridOne" name="dept" value="01">
$('#combogridOne').combogrid({
    delay: 450,
    mode: 'remote',
    url: '/RawMaterial/SearchMaterial',
    idField: 'Raw_Material_ID',
    textField: 'RM_Name',
    columns: [[
		{field:'RM_Number',title:'RM_Number',width:200,sortable:true}，
        {field:'RM_Name',title:'RM_Name',width:400,sortable:true}，
		{field:'RM_Specification',title:'RM_Specification',width:120,sortable:true}
    ]]
});

我们在input标签中输入文字是会先后端传递一个名称为q的参数，我们可通过这个参数获取我们想要的数据，并且进行展示，一般后端返回的数据不易过多一般20-50条就可以了，太多了会影响控件的性能，当初我用的时候一下返回了2000多行他直接卡爆了，后面我改成返回前40行数据瞬间提高了性能。可以为combogrid增加onselect属性来为其他文本框赋值。当初是combogrid的行编辑时做的。