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

Posted 2020-09-11 林贵秀

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

$(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,
            }
        ]]
    });
});