EasyUI jQuery combogrid widget

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个combogrid。combogrid结合了一个可编辑的文本框和下拉式数据表格面板，使用户能够快速查找和选择。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-combogrid">

属性:

loadMsg：数据表格加载远程数据时显示的信息。
idField。id字段的名称。
textField。要在文本框中显示的文本字段。
mode。定义当文本改变时如何加载数据表格数据。
filter。定义了当’模式’设置为’本地’时如何选择本地数据。

方法:

options。返回选项对象。
grid。返回数据网格对象。
setValue。设置组件的值。
setValues:设置组件的值阵列。
clear: 清除组件的值。

步骤:

首先，添加你的项目所需的jQuery Easy UI脚本。

<link rel="stylesheet" type="text/css"
href=”https://www.jeasyui.com/easyui/themes/default/easyui.css”>
<link rel="stylesheet" type="text/css"
href=”https://www.jeasyui.com/easyui/themes/icon.css”>
<script type=”text/javascript”
src=”https://www.jeasyui.com/easyui/jquery.min.js”></script>
<script type=”text/javascript”
src=”https://www.jeasyui.com/easyui/jquery.easyui.min.js”></script>

示例 :

<html>
<head>    
    <link rel="stylesheet" type="text/css" 
        href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="https://www.jeasyui.com/easyui/themes/icon.css">
  
    <script type="text/javascript" 
        src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
  
    <script type="text/javascript" 
        src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
  
<body>
    <div style="margin-bottom:20px">
            <select class="easyui-combogrid" style="width:100%" data-options="
                    panelWidth: 500,
                    idField: 'itemid',
                    textField: 'productname',
                    method: 'get',
                    columns: [[
                        {field:'itemid',title:'Item ID',width:80},
                        {field:'productname',title:'Product',width:120},
                        {field:'listprice',title:'List Price',
                            width:80,align:'right'},
                        {field:'unitcost',title:'Unit Cost',
                            width:80,align:'right'},
                        {field:'attr1',title:'Attribute',width:200},
                        {field:'status',title:'Status',
                            width:60,align:'center'}
                    ]],
                    fitColumns: true,
                    label: 'Select Item:',
                    labelPosition: 'top'
                ">
            </select>
        </div>
</body>
  
</html>

输出:

EasyUI jQuery combogrid widget