思享工具箱

第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

摘要：
jQueryEasyUI，ComboGrid组件学习要点：1.加载方式2.属性列表3.方法列表本节课重点了解EasyUI中ComboGrid组件的使用方法，这个组件依赖于Combo和DataGrid组件。当设置'emote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。$;三，事件PS：数据表格下拉框事件完全扩展自combo和datagrid(数据

jQuery EasyUI，ComboGrid(数据表格下拉框)组件

第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件第1张

学习要点：

1.加载方式

2.属性列表

3.方法列表

本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法，这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件。

一．加载方式

class 加载方式

<select id="box"class="easyui-combogrid"name="dept"
        style="250px;"
        data-options="
            panelWidth:450,
            value:'请选择一个值',
            idField:'id',
            textField:'user',
            url:'content.json',
            columns:[[
                {field:'user',title:'帐号',120},
                {field:'email',title:'邮箱',120},
                {field:'date',title:'创建时间',120},
            ]]
"></select>

JS 加载方式

<input id="box"name="user"value="请选择一个用户">

js

combogrid()将一个input元素执行数据表格下拉框组件

$(function() {
    $('#box').combogrid({
        panelWidth: 600,
        idField: 'id',
        textField: 'user',
        url: 'content.json',
        columns: [[
            {
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

二．属性列表

注意：Combo(自定义下拉框)组件，用自定义下拉框的属性，方法，事件DataGrid(数据表格)组件用数据表格的属性，方法，事件

第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件第2张

loadMsgstring 在数据表格加载远程数据的时候显示消息。默认值为 null。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

idFieldstring ID 字段名称。默认值为 null。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

textFieldstring 要显示在文本框中的文本字段。默认值为null。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

mode string定义在文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器加载数据。当设置'emote'模式的时候，用户输入将会发送到名为'q'的 http 请求参数，向服务器检索新的数据。默认值为 local。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        mode:'remote',
        //filter: function (q, row) {
        //var opts = $(this).combogrid('options');
        //return row[opts.textField].indexOf(q) >= 0;
        //},
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

filter function(q, row)定义在'mode'设置为'local'的时候如何选择本地数据，返回 true 时则选择该行。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        //mode:'remote',
        filter: function (q, row) {
            var opts = $(this).combogrid('options');
            return row[opts.textField].indexOf(q) >= 0;
        },
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
});

三，事件

PS：数据表格下拉框事件完全扩展自 combo(自定义下拉框)和 datagrid(数据表格)。

四，方法列表

第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件第3张

options none 返回属性对象。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
    alert($('#box').combogrid('options'));      //返回属性对象
});

grid none 返回数据表格对象。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
    var dxang = $('#box').combogrid('grid');      //返回数据表格对象
    $.each(dxang, function (attr, value) {        //遍历 JavaScript 原生态的对象数组
        alert(attr + ':' +value);
    });
});

setValues values 设置组件值数组。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
    $('#box').combogrid('setValues',[1,2,3]);      //设置组件值数组
});

setValue value 设置组件值。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
    $('#box').combogrid('setValue',2222);      //设置组件值
});

clear none 清除组件的值。

$(function() {
    $('#box').combogrid({
        panelWidth: 600,            //数据表格宽度
        idField: 'id',              //设置value值，一般设置数据库字段
        textField: 'user',          //显示在文本框中的文本字段
        url: 'content.json',        //远程加载数据地址
        loadMsg:'数据加载中',
        columns: [[                 //表格数据字段
{
                field: 'id',
                title: '编号',
                 120,
            },
            {
                field: 'user',
                title: '帐号',
                 120,
            },
            {
                field: 'email',
                title: '邮箱',
                 120,
            },
            {
                field: 'date',
                title: '创建时间',
                 120,
            }
        ]]
    });
    $('#box').combogrid('clear');      //清除组件的值
});

标签：#数据表#date#combogrid#email | 浏览：813 | 发布日期：

免责声明：文章转载自《第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇C# Winform程序设计运行在高分屏下模糊解决办法Qt Widgets、QML、Qt Quick的区别下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

从零开始邮件服务器搭建

从零开始邮件服务器搭建 JackLiu162018-04-07 18:53:322989收藏10 分类专栏：linux邮件服务器搭建 概念解释SPF:Sender Policy Framework,直译过来就是发件人保证框架.出现的主要原因是SMTP协议的缺陷.XMTP中,发件人的邮箱地址是可以伪造的,因而SPF的出现就是防止伪造发件...

修改unix服务器时间

如果只是需要修改时间 使用date -s 12:00:00即可，改动是即时的。 CODE： # dateThu Dec 16 12:00:00 CST 2010 注意后面的“CST”为时区，修改时区有几种方法。 假如不想重启的话，可以考虑修改bash环境，首先看一看，有没有这个TZ（timezone）变量。 #env |grep TZ 没有，很干净。 #c...

干掉mapper.xml！MyBatis新特性动态SQL真香！

干掉mapper.xml！MyBatis新特性动态SQL真香！ 当我们使用MyBatis的时候，需要在mapper.xml中书写大量的SQL语句。当我们使用MyBatis Generator（MBG）作为代码生成器时，也会生成大量的mapper.xml文件。其实从MBG 1.3.6版本以后，MyBatis官方已经推荐使用Dynamic SQL，使用这一新特...

PHP 5 Date/Time 函数

PHP Date/Time 简介 Date/Time 函数允许您从 PHP 脚本运行的服务器上获取日期和时间。您可以使用 Date/Time 函数通过不同的方式来格式化日期和时间。 注释：这些函数依赖于服务器的本地设置。使用这些函数时请记住要考虑夏令时和闰年。 安装 PHP Date/Time 函数是PHP 核心的组成部分。无需安装即可使用这些函数。...

轻量级ORM框架 第一篇：Dapper

为什么选择Dapper，性能优越，各大网站的对比图，在超过500次poco serialization的过程中所表现的性能，Dapper是第二名 支持多数据库的本质是因为Dapper是对IDBConnection接口进行了方法扩展，比如你看到的SqlMapper.cs，一旦你这样做了，我们也知道， SqlConnection,MysqlConnectio...

T-SQL函数及用法--转

转自http://www.cnblogs.com/qixuejia/archive/2010/07/14/1777105.html 1.聚合函数 (1)AVG 函数功能返回组中值的平均值。空值将被忽略 语法AVG([ ALL | DISTINCT ] expression) (2)MAX 函数功能返回表达式的最大值 语法MAX([ ALL | DISTIN...

最新文章

随机推荐

思享工具箱导航