JQuery EasyUI(42)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的ComboBoxGrid组件，包括其加载方式、属性列表和方法列表。学习如何通过class加载和JS调用加载组件，了解loadMsg、idField等属性的作用，以及options、grid等方法的使用。

第三十四章： ComboBoxGird（数据表格下拉框）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       } 
    </style>             
</head>
  <body>
    <select class="easyui-comboboxgrid" style="width:250px;" 
      data-options="panelWidth:450,url:'content.json',idField:'id',textField:'user',columns:[[
     {
       field:'id',
       title:'编号',
       width：100,
     }
     {
       field:'user',
       title:'账号',
       width：100,
     }

      ]]">
    </select>   
  </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
  </style>             
</head>
  <body>
     <input id="box" name="box">   
  </body>
</html>

$(function(){
  $('#box').combogrid({
     panelWidth:600,
     idField:'id',
     textField:'user',
     url:'user.php',
     fitcolumns:true,
     multiple:true,
     columns:[[
       {
         field:'id',
         title:'编号',
         width：100,
         checkbox:true,
       }
       {
         field:'user',
         title:'账号',
         width：100,
       }
       {
         field:'email',
         title:'邮箱',
         width：100,
       }
       {
         field:'date',
         title:'创建时间',
         width：100,
       }
     ]],
  });
});

<?php

   //记得是：user.php

   require 'config.hph';

   $query = mysql_query("SELECT id,user,email,data FROM think_user") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }

   $json  = substr($json,0,-1);

   echo '['.$json.']'; 

   mysql_close();
?>

二、属性列表

ComboGrid属性
属性名	值	说明
loadMsg	string	在数据表格加载远程数据的时候显示消息。默认值为null。
idField	string	ID字段名称。默认值为null。
textField	string	要显示在文本框中的文本字段。默认值为null。
mode	string	定义文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器中加载数据。当设置为'emote'模式的时候，用户输入将会发送到名为'q'的Http请求参数，向服务器检索新的数据。默认值为 local。
filter	function（q,row）	定义在'mote'设置为'local'的时候如何选择本地数据，返回true时则选择该行。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
  </style>             
</head>
  <body>
     <input id="box" name="box">   
  </body>
</html>

$(function(){
  $('#box').combogrid({
     loadMsg:'数据加载中……'
     panelWidth:600,
     idField:'id',
     textField:'user',
     url:'user.php',
     fitcolumns:true,
     mode:'remote',
     filter:function(q,row){
       var opts = $(this).combogrid('options');
       return row[opts.textField].indexOf(q) >= 0; 
     },
     multiple:true,
     columns:[[
       {
         field:'id',
         title:'编号',
         width：100,
         checkbox:true,
       }
       {
         field:'user',
         title:'账号',
         width：100,
       }
       {
         field:'email',
         title:'邮箱',
         width：100,
       }
       {
         field:'date',
         title:'创建时间',
         width：100,
       }
     ]],
  });
});

<?php

   sleep(3);

   require 'config.hph';

   $query = mysql_query("SELECT id,user,email,data FROM think_user") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }

   $json  = substr($json,0,-1);

   echo '['.$json.']'; 

   mysql_close();
?>

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

三、方法列表

DataGrid方法
方法名	参数	说明
options	none	返回属性对象
grid	none	返回数据表格对象
setValues	values	设置组件值数组
setValue	value	设置组件值
clear	none	清除组件的值

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
  </style>             
</head>
  <body>
   <input id="box" name="box">
   <input type="button" vlaue="按钮" onclick="abc(),">   
  </body>
</html>

$(function(){
  $('#box').combogrid({
     loadMsg:'数据加载中……'
     panelWidth:600,
     idField:'id',
     textField:'user',
     url:'user.php',
     fitcolumns:true,
     mode:'remote',
     filter:function(q,row){
       var opts = $(this).combogrid('options');
       return row[opts.textField].indexOf(q) >= 0; 
     },
     multiple:true,
     columns:[[
       {
         field:'id',
         title:'编号',
         width：100,
         checkbox:true,
       }
       {
         field:'user',
         title:'账号',
         width：100,
       }
       {
         field:'email',
         title:'邮箱',
         width：100,
       }
       {
         field:'date',
         title:'创建时间',
         width：100,
       }
     ]],
  });
});


function abc(){
  //$('#box').combogrid('clear');
  //$('#box').combogrid('setValue',1);
  //$('#box').combogrid('setValues',[1,2]);
}

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103683513

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载