网博开发者社区

 找回密码
 立即注册
搜索
查看: 502|回复: 0

jQuery EasyUI 入门(22)

[复制链接]

57

主题

65

帖子

246

积分

老师

积分
246
发表于 2017-12-2 11:25:03 | 显示全部楼层 |阅读模式
ComboGrid(数据表格下拉框)
扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。
数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件,该控件允许用户快速查找和选择,并且该控件提供了键盘导航支持,对行进行筛选。
[img]file:///C:/Users/tyh/AppData/Local/Temp/CyberArticle/80397286e025b70537ed7afefca597f1_files/combogrid[1].png[/img]
使用案例创建数据表格下拉框
1. 使用标签创建一个数据表格下拉框。


  • <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>

        <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" />

        <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}
  •     ]]
  • });

        $('#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}                ]]        });
自动完成功能
让我们为数据表格下拉框控件添加高级的自动完成功能。下拉数据表格会根据用户输入显示适合的结果。


  • $('#cc').combogrid({
  •     delay: 500,
  •     mode: 'remote',
  •     url: 'get_data.php',
  •     idField: 'id',
  •     textField: 'name',
  •     columns: [[
  •         {field:'code',title:'Code',width:120,sortable:true},
  •         {field:'name',title:'Name',width:400,sortable:true}
  •     ]]
  • });

$('#cc').combogrid({        delay: 500,        mode: 'remote',        url: 'get_data.php',        idField: 'id',        textField: 'name',        columns: [[                {field:'code',title:'Code',width:120,sortable:true},                {field:'name',title:'Name',width:400,sortable:true}        ]]});
在服务器端,参数'q'必须先检索。用户可以查询数据库,然后返回一个SQL查询结果的JSON格式给浏览器。
get_data.php:


  • $q = isset($_POST['q']) ? $_POST['q'] : '';  // the request parameter
  • // query database and return JSON result data
  • $rs = mysql_query("select * from item where name like '$q%'");
  • echo json_encode(...);

$q = isset($_POST['q']) ? $_POST['q'] : '';  // the request parameter// query database and return JSON result data$rs = mysql_query("select * from item where name like '$q%'");echo json_encode(...);
属性
数据表格下拉框的属性扩展自combo(自定义下拉框)和datagrid(数据表格),树形下拉框新增属性如下:

属性名属性值类型描述默认值
loadMsgstring在数据表格加载远程数据的时候显示消息。null
idFieldstringID字段名称。null
textFieldstring要显示在文本框中的文本字段。null
modestring定义在文本改变的时候如何读取数据网格数据。设置为'remote',数据表格将从远程服务器加载数据。当设置为'remote'模式的时候,用户输入将会发送到名为'q'的http请求参数,向服务器检索新的数据。local
filterfunction(q, row)定义在'mode'设置为'local'的时候如何选择本地数据,返回true时则选择该行。 代码示例:
$('#cc').combogrid({        filter: function(q, row){                var opts = $(this).combogrid('options');                return row[opts.textField].indexOf(q) == 0;        }});


事件
数据表格下拉框事件完全扩展自combo(自定义下拉框)和datagrid(数据表格)。
方法
数据表格下拉框的方法扩展自combo(自定义下拉框),数据表格下拉框新增或重写的方法如下:

方法名方法参数描述
optionsnone返回属性对象。
gridnone返回数据表格对象。下面的例子显示了如何获取选择的行: var g = $('#cc').combogrid('grid');        // 获取数据表格对象var r = g.datagrid('getSelected');        // 获取选择的行alert(r.name);
setValuesvalues设置组件值数组。 代码示例:
$('#cc').combogrid('setValues', ['001','007']);
setValuevalue设置组件值。 代码示例:
$('#cc').combogrid('setValue', '002');
clearnone清除组件的值。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号-1 )

GMT+8, 2018-10-19 04:40 , Processed in 0.084741 second(s), 26 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表