昨天学到的使用SSM框架时从mysql中查到数据并展示出来的的两个下拉框

最新推荐文章于 2024-08-21 23:39:15 发布

墨眉抹花素锦袖

最新推荐文章于 2024-08-21 23:39:15 发布

阅读量2k

点赞数

分类专栏： combobox javaEE 文章标签： mybatis spring spring mvc combobox

本文链接：https://blog.csdn.net/qq_34422642/article/details/51679009

版权

javaEE 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

combobox

2 篇文章 0 订阅

订阅专栏

本文介绍了在使用SSM（Spring、Spring MVC、MyBatis）框架时，如何从MySQL数据库获取数据并填充到页面的两个下拉框中。重点关注了在前端如何通过JS以及input标签结合JS实现下拉选项的展示，强调了textField的name属性需对应SQL查询的列名。

摘要由CSDN通过智能技术生成

排版不擅长,虽然有强迫症但是表示懒,然后重点说一下,后面的两个才是实现下拉框的代码,其中textFieId的name指的是你需要展示的名称,也就是sql中的列名,例如此时需要展示的是age,则需要写成 textField:'age'

两个办法一个是纯JS做,另一个是input标签+js做的

好,暂且如此,欢迎各位补充,请不要踩说错了可以呼我哈

下拉框中获取到查询到的数据的方法
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
属性:

	valueField			string					绑定到该组合框（ComboBox）的 value 上的基础数据的名称。
	textField			string					绑定到该组合框（ComboBox）的 text 上的基础数据的名称。
	groupField			string					指示要被分组的字段。该属性自版本 1.3.4 起可用。
	groupFormatter			function(group)				返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
										代码实例：
										$('#cc').combobox({
										groupFormatter: function(group){
										return '<span style="color:red">' + group + '</span>';
										}
										});
	mode				string					定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设					置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 					的 http 请求参数发送到服务器，以获取新的数据。
	url				string					从远程加载列表数据的 URL 。
	method				string					用来检索数据的 http 方法。
	data				array					被加载的列表数据。
										代码实例：
										<input class="easyui-combobox" data-options="
										valueField: 'label',
										textField: 'value',
										data: [{
										label: 'java',
										value: 'Java'
										},{
										label: 'perl',
										value: 'Perl'
										},{
										label: 'ruby',
										value: 'Ruby'
										}]" />

	filter				function				定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：
										q：用户输入的文本。
										row：列表中的行数据。
										返回 true 则允许显示该行。

										代码实例：
										$('#cc').combobox({
										filter: function(q, row){
										var opts = $(this).combobox('options');
										return row[opts.textField].indexOf(q) == 0;
										}
										});

	formatter			function				定义如何呈现行。该函数有一个参数：row。
										代码实例：
										$('#cc').combobox({
										formatter: function(row){
										var opts = $(this).combobox('options');
										return row[opts.textField];
										}
										});

	loader				function(param,success,error)		定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
										param：要传到远程服务器的参数对象。
										success(data)：当获取数据成功时将被调用的回调函数。
										error()：当获取数据失败时将被调用的回调函数


	loadFilter			function(data)				返回要显示的过滤数据。该属性自版本 1.3.3 起可用。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
事件:

	onBeforeLoad			param					在请求加载数据之前触发，返回 false 则取消加载动作。
										代码实例：
										// change the http request parameters before load data from server
										$('#cc').combobox({
											onBeforeLoad: function(param){
												param.id = 2;
												param.language = 'js';
											}
										});
	onLoadSuccess			none					当远程数据加载成功时触发。
	onLoadError			none					当远程数据加载失败时触发。
	onSelect			record					当用户选择一个列表项时触发。
	onUnselect			record					当用户取消选择一个列表项时触发。
		

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
方法:

	options				none					返回选项（options）对象。
	getData				none					返回加载的数据。
	loadData			data					加载本地列表数据。
	reload				url					请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。
										代码实例：
										$('#cc').combobox('reload');  // reload list data using old URL
										$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
	setValues			values					设置组合框（combobox）值的数组。
										代码实例：
										$('#cc').combobox('setValues', ['001','002']);
	setValue			value					设置组合框（combobox）的值。
										代码实例：
										$('#cc').combobox('setValue', '001');
	clear				none					清除组合框（combobox）的值。
	select				value					选择指定的选项。
	unselect			value					取消选择指定的选项。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

	办法①:
		<body>
	<input id="tts" class="easyui-combobox"
		data-options="
		url: 'game/gg',
        valueField: 'id',
        textField: 'name',
        editable:false,
        panelHeight:'auto',
        method:'post',
        onSelect: function(rec){
           console.log(rec.id);
        }">
        <button id="test3">test3</button>
		<input id="test2">

		</body>


	<script type="text/javascript">
$("#test3").click(function(){
	console.log("value:",$("#tts").combobox("getValue"),"text:",$("#tts").combobox("getText"))
		
	</script>



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

	办法②:


		<script type="text/javascript">
$('#test2').combobox({
    url:'game/gg',
    method:'post',
    editable:false,
    valueField:'id',
    textField:'name',
    panelHeight:'auto',
    onSelect: function(rec){
        console.log(rec.id)
    }
});
</script>