首页 > 其他分享 >【EasyUI篇】ComboGrid数据表格下拉框组件

【EasyUI篇】ComboGrid数据表格下拉框组件

时间:2023-01-11 21:08:23浏览次数:55  
标签:------------------------------------------------ field EasyUI title id 120 width


微信公众号:​​程序yuan​​
关注可获得更多干货哦!问题或建议,请公众号留言;

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】ComboGrid数据表格下拉框组件_ComboGrid

------------------------------------------------

​​查看--> 全套EasyUI示例目录​​

31.ComboGrid数据表格下拉框组件

【EasyUI篇】ComboGrid数据表格下拉框组件_EasyUI_02

【EasyUI篇】ComboGrid数据表格下拉框组件_EasyUI_03

 

 

JSP文件

<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Tree</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ComboGrid.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>

</script>
</head>
<body style="padding: 100px;">
<%--class 加载方式--%>
<%--<select id="box" class="easyui-combogrid" name="dept"
style="width:250px;"
data-options="
panelWidth:500,
value:'请选择一个值',
idField:'id',
textField:'user',
url:'http://localhost:8081/easyui/findUser.action',
columns:[[
{field:'id',title:'id',width:120},
{field:'user',title:'帐号',width:120},
{field:'email',title:'邮箱',width:120},
{field:'date',title:'创建时间',width:150},
]]
"></select>--%>


<input id="box" name="user" value="请选择一个用户">
</body>
</html>

JS文件

$(function () {

$('#box').combogrid({
panelWidth : 600,
idField : 'id',
textField : 'user',
url : 'http://localhost:8081/easyui/findUser.action',
columns : [[
{
field : 'id',
title : '编号',
width : 120,
},
{
field : 'user',
title : '帐号',
width : 120,
},
{
field : 'email',
title : '邮箱',
width : 120,
},
{
field : 'date',
title : '创建时间',
width : 120,
},
]]
});
});

效果图

【EasyUI篇】ComboGrid数据表格下拉框组件_css_04

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】ComboGrid数据表格下拉框组件_ComboGrid

------------------------------------------------

 

标签:------------------------------------------------,field,EasyUI,title,id,120,width
From: https://blog.51cto.com/u_12131813/6002833

相关文章

  • 【EasyUI篇】TreeGrid树表格组件
    微信公众号:​​程序yuan​​关注可获得更多干货哦!。问题或建议,请公众号留言;------------------------------------------------关注小编微信公众号获取更多资源----------......
  • 【EasyUI篇】Spinner微调组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​24.Spinner微调组件    JSP文件<%--CreatedbyInt......
  • 【EasyUI篇】NumberSpinner数字微调组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​25.NumberSpinner数字微调组件属性列表,事件列表,方法列表全部......
  • 【EasyUI篇】Slider滑动条组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​26.Slider滑动条组件      JSP文件<%--Createdb......
  • 【EasyUI篇】Form表单组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​27.Form表单组件Controller文件@RequestMapping(value="/v......
  • 【EasyUI篇】PropertyGrid属性表格组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​28.PropertyGrid属性表格组件  JSP文件<%--Createdby......
  • 【EasyUI篇】Calendar日历组件
    微信公众号:​​程序yuan​​关注可了解更多的教程。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​22.Calendar日历组件    JSP文件<%--Createdby......
  • 【EasyUI篇】Datebox日期输入框组件
    微信公众号:​​程序yuan​​关注可了解更多的教程。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​23.Datebox日期输入框组件     JSP文件<%--Created......
  • bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
    bootstrap-select的多选+模糊查询下拉框详解(官方示例文档解读)引入问题之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知......
  • Bootstrap select多选下拉框赋值
    selectpicker下拉多选框ajax异步或者提前赋值=》默认值Bootstrapselect多选下拉框赋值success:function(data){varoldnumber=newArray();$.each(data......