Easyui的propertygrid实现下拉框值回显

最新推荐文章于 2021-03-19 00:09:07 发布

西城十七妹

最新推荐文章于 2021-03-19 00:09:07 发布

阅读量475

点赞数

分类专栏： EasyUI 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/songdancer/article/details/110448506

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Easyui的propertygrid下拉框值回显

- HTML示例代码
- 效果图

HTML示例代码

原理是通过formatter函数实现转化

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PropertyGrid Combobox</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./themes/icon.css">
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.easyui.min.js"></script>
	<script>
		$(function(){			
			var data = {"total":4,"rows":[
				{"code":"Name", "name":"Name", "value":"Bill Smith","group":"ID Settings","editor":"text"},
				{"code":"Address", "name":"Address","value":"","group":"ID Settings","editor":"text"},
				{"code":"SSN", "name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
				{"code":"Email", "name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{"type":"validatebox","options":{"validType":"email"}}},
				{"code":"status", "name":"状态","value":"1","group":"Marketing Settings","editor":{type:"combobox",
																			options:{
																				editable: false,
																				valueField: "value",
																				textField: "text",
																				data: [{value: "0", text: "显示"}, {value: "1", text: "隐藏"}]
																			}}}
				
				
				]};
			$('#pg').propertygrid({
				columns: [
					[
						{ field:'name', title:'Name', width:500, sortable:true },
						{ field:'value', title:'Value', width:400 ,
							formatter: function (value,rowData,rowIndex) {
								if (rowData.code=="status") {
									if (value == '0') {
										return "显示";
									} else {
										return "隐藏";
									}
								} else {
									return value;
								}
							}
						}
					]
				],
				showGroup: true,
				scrollbarSize: 0,
				data: data
			});
		})
		
		function getData(){
			const rows = $('#pg').propertygrid('getRows');		
			console.table(rows );
		}
	</script>
</head>
<body>
	<a href="javascript:void(0)" onclick="getData()">button</a>
	<table id="pg" style="width:300px"></table>
</body>
</html>

效果图

在这里插入图片描述

西城十七妹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Easyui的propertygrid实现下拉框值回显

Easyui的propertygrid下拉框值回显HTML示例代码效果图HTML示例代码原理是通过formatter函数实现转化<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>PropertyGrid Combobox</title> <meta http-equiv="X-UA-Compatible" content="IE
复制链接

扫一扫