您当前的位置:首页 > 网站建设 > jQuery
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

jQuery EasyUI 表单插件 - Combogrid 组合网格

51自学网 2023-01-16 20:14:53
  jQuery

扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults。通过 $.fn.combogrid.defaults 重写默认的 defaults。

组合网格(combogrid)把可编辑的文本框和下拉数据网格面板结合起来,用户可以从下拉数据网格面板中快速查找和选择。组合网格(combogrid)提供了选择某个项目的键盘导航支持。

依赖

  • combo
  • datagrid

用法

创建组合网格(combogrid)

1、从标记创建组合网格(combogrid)。

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"    data-options="    panelWidth:450,    value:'006',    idField:'code',    textField:'name',    url:'datagrid_data.json',    columns:[[    {field:'code',title:'Code',width:60},    {field:'name',title:'Name',width:100},    {field:'addr',title:'Address',width:120},    {field:'col4',title:'Col41',width:100}    ]]    "></select>

2、使用 javascript 从已有的 <select> 或 <input> 元素创建。

<input id="cc" name="dept" value="01">
    $('#cc').combogrid({    panelWidth:450,    value:'006',    idField:'code',    textField:'name',    url:'datagrid_data.json',    columns:[[    {field:'code',title:'Code',width:60},    {field:'name',title:'Name',width:100},    {field:'addr',title:'Address',width:120},    {field:'col4',title:'Col41',width:100}    ]]    });

自动完成功能

让我们为组合网格(combogrid)提那家自动完成功能。下拉数据网格将根据用户输入显示可能的结果。

$('#cc').combogrid({    delay: 500,    mode: 'remote',    url: 'get_data.php',    idField: 'id',    textField: 'name',    columns: [[
下载地址:
jQuery EasyUI 表单插件 - Numberbox 数字框
jQuery EasyUI 表单插件 - Combotree 组合树
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1