easyUI入门之实现easyui-combobox组件数据动态绑定时难点记录

最新推荐文章于 2021-08-14 11:16:24 发布

码上雏猿

最新推荐文章于 2021-08-14 11:16:24 发布

阅读量336

点赞数

分类专栏：技术文章

本文链接：https://blog.csdn.net/qq_42250644/article/details/110483957

版权

技术文章专栏收录该内容

7 篇文章 0 订阅

订阅专栏

初学easy UI，根据官方文档讲解去实现easyui-combobox组件的编写时，通过url去请求一个本地编写的json文件，将文件内的数据绑定到编写的easyui-combobox组件上，在Google上运行时遇到下列报错：

出现这个报错的原因是因为浏览的安全机制造成的，谷歌禁止本地跨域的访问，由上述报错信息也可以知道，谷歌支持的跨域访问只有http, data, chrome, chrome-extension, https开头的才可以，而我本地json文件访问是通过file://，所以出现上述错误；

解决方法也很简单，找到谷歌的安装目录，创建一个快捷方式到桌面上，右击桌面快捷方式，选择”属性“，在弹出框中选择”快捷方式“菜单，”目标“选项中添加” --allow-file-access-from-files“（注意：--前有个空格）

设置好后，用这个Google浏览器快捷方式去访问就可以实现预期效果啦~

最后附上我刚编写好的easyui-combobox静态/动态数据绑定的demo源码，供大家参考：

jquery_easyui_test.html：

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
	</head>

	<body>
		<div id="div1" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;"
			title="My Panel One" iconCls="icon-save" collapsible="true">
			The panel one content
		</div>

		<div id="div2" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;"
			title="My Panel Two" data-options="iconCls:'icon-save', collapsible: true">
			The panel two content
		</div>

		json请求数据绑定：<input class="easyui-combobox" name="databind1"
			data-options="url: 'combobox_data.json', valueField: 'id', textField: 'text', panelHeight: 'auto',
			onSelect:function(record) {
				alert('选项' + record.id + ':' + record.text + '被选中')
			}"><br>

		代码静态数据绑定：<input class="easyui-combobox" name="databind2" 
			data-options="data: [{id: '1', text: 'apple',selected: true}, {id: '2', text: 'oranage'}], 
			valueField: 'id', textField:'text', panelHeight:'auto', 
			onSelect:function(record) {
				alert(record.text)
			}"/>
	</body>
</html>

combobox_data.json：

[
	{
		"id"	: 1,
		"text"	: "apple"
	},
	{
		"id"	: 2,
		"text"	: "orange"
	},
	{
		"id"	: 3,
		"text"	: "banana",
		"selected" : true
	},
	{
		"id"	: 4,
		"text"	: "pear"
	}
]