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

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

学习要点：

　　1.加载方式

　　2.属性列表

　　3.方法列表

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

一．加载方式

class 加载方式

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

二．属性列表

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

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

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

idField   string ID 字段名称。默认值为 null。

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

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

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

三，事件

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

四，方法列表

options   none 返回属性对象。

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