jQuery EasyUI API 中文文档 – ComboGrid 组合表格

下面是针对“jQuery EasyUI API 中文文档 - ComboGrid 组合表格”的攻略，希望能够帮到你。

ComboGrid 组合表格

ComboGrid 组件是 Combo 组件的一个扩展，它将 Combo 组件和 DataGrid 组件结合起来，展示数据时既可以使用下拉列表进行选择，也可以使用表格进行查看和编辑。

如何使用

使用 ComboGrid 组件需要引入 jquery.easyui.min.js 和 jquery.easyui.min.css 两个文件。

在 HTML 页面中，我们可以通过以下方式创建一个 ComboGrid 组件：

<input id="cc" class="easyui-combogrid" name="dept" style="width:50%" data-options="
    panelWidth: 500,
    idField: 'id',
    textField: 'name',
    url: 'get_data.php',
    columns: [[
        {field:'id',title:'ID',width:80},
        {field:'name',title:'Name',width:180},
        {field:'price',title:'Price',width:80,align:'right'}
    ]]
">

其中，id 为组件 input 元素的ID，class 属性为 easyui-combogrid，name 属性为数据字段名称。data-options 中包含了一些组件的配置参数，例如：

• panelWidth: 下拉列表和表格面板的宽度。
• idField: 记录ID字段名称。
• textField: 显示在列表框中的文本字段名称。
• url: Ajax 载入数据的地址。
• columns: 表格列。

操作示例

以下示例将演示 ComboGrid 组件的基本用法和配置。

1. 显示静态数据：在 ComboGrid 组件中展示静态数据。

<input id="cc" class="easyui-combogrid" style="width:50%;" data-options="
    panelWidth: 500,
    idField: 'id',
    textField: 'text',
    data: [{
        id: 1,
        text: '北京'
    },{
        id: 2,
        text: '上海'
    },{
        id: 3,
        text: '深圳'
    }]
">

在 data-options 中设置 data 属性为一个包含固定数据的数组，即可展示静态数据。

1. 联动下拉列表：在 ComboGrid 组件中实现联动下拉列表。

<input id="cc1" class="easyui-combobox" style="width:50%;" data-options="
    url: 'category_data.php',
    valueField: 'id',
    textField: 'text',
    onSelect: function(record) {
         $('#cc2').combogrid('grid').datagrid('reload', {
            category: record.id
         });
    }
">
<input id="cc2" class="easyui-combogrid" style="width:50%;" data-options="
    panelWidth: 500,
    idField: 'id',
    textField: 'text',
    url: 'product_data.php',
    columns: [[
        {field:'name',title:'名称',width:180},
        {field:'category',title:'分类',width:80},
        {field:'price',title:'价格',width:80,align:'right'}
    ]],
    queryParams: {
        category: 1
    }
">

在第一个下拉列表（id为 cc1）的 onSelect 事件中，动态载入对应数据，使用 $('#cc2').combogrid('grid').datagrid('reload', { ... }) 方法，其中 '#cc2' 为 ComboGrid 组件的 ID，.combogrid('grid') 方法获取 ComboGrid 组件中的 DataGrid 对象，.datagrid('reload', { ... }) 方法重新载入数据，参数中的 category 属性为数据请求参数。

以上就是关于“jQuery EasyUI API 中文文档 - ComboGrid 组合表格”的攻略，希望能够帮到你。