如何从 Javascript 创建动态组件
How to create a dynamic component from Javascript
我正在尝试使用 html 和 Javascript 创建一个 ComboBox。所以我必须从这个 link 开始这个想法。 MultiSelect Combo(多选组合框)
在这个 link 中,我把所有的资源都放在我的本地,并得到了想要的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<div style="margin-bottom:20px">
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
formatter: formatItem,
label: 'Language:',
labelPosition: 'top'
">
</div>
<script type="text/javascript">
function formatItem(row){
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
'<span style="color:#888">' + row.desc + '</span>';
return s;
}
</script>
</body>
</html>
现在我希望我的输入框是动态的,这样我就可以通过传递 div 和其他必需的属性在任何地方和任意次数地使用它。
我这里试的是
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="JS/NewCombo.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<script type="text/javascript">
var myCombo = new NewCombo({
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
//formatter: formatItem,
label: 'Language:',
});
</script>
</body>
</html>
JS代码是
JS代码
NewCombo = function(args){
var mydiv = "<div style="margin-bottom:20px">"+"
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',\
method: 'get',\
valueField: 'id',\
textField: 'text',\
panelWidth: 350,\
multiple:true,\
formatter: formatItem,\
label: 'Language:',\
labelPosition: 'top'\
">"+"
</div>"
}
ut 我面临的挑战是
- 无法创建导致错误的正确输入标签元素。
此处示例:
第一种情况:
输入标签是
"<input class="easyui-combobox" name="language" style="width:100%;" data-options="url: "JSON/combobox_data1.json",method: "get",valueField: "id",textField: "text", panelWidth: 350,multiple:true,label: "Language:",labelPosition: "top">"
在第二种情况下,输入标签是:
"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options=" url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"
现在请帮我解决这个问题。
尝试使用 setAttribute 方法动态添加 data-options
属性:
document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');
我正在尝试使用 html 和 Javascript 创建一个 ComboBox。所以我必须从这个 link 开始这个想法。 MultiSelect Combo(多选组合框)
在这个 link 中,我把所有的资源都放在我的本地,并得到了想要的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<div style="margin-bottom:20px">
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
formatter: formatItem,
label: 'Language:',
labelPosition: 'top'
">
</div>
<script type="text/javascript">
function formatItem(row){
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
'<span style="color:#888">' + row.desc + '</span>';
return s;
}
</script>
</body>
</html>
现在我希望我的输入框是动态的,这样我就可以通过传递 div 和其他必需的属性在任何地方和任意次数地使用它。
我这里试的是
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="JS/NewCombo.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<script type="text/javascript">
var myCombo = new NewCombo({
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
//formatter: formatItem,
label: 'Language:',
});
</script>
</body>
</html>
JS代码是 JS代码
NewCombo = function(args){
var mydiv = "<div style="margin-bottom:20px">"+"
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',\
method: 'get',\
valueField: 'id',\
textField: 'text',\
panelWidth: 350,\
multiple:true,\
formatter: formatItem,\
label: 'Language:',\
labelPosition: 'top'\
">"+"
</div>"
}
ut 我面临的挑战是
- 无法创建导致错误的正确输入标签元素。
此处示例:
第一种情况:
输入标签是
"<input class="easyui-combobox" name="language" style="width:100%;" data-options="url: "JSON/combobox_data1.json",method: "get",valueField: "id",textField: "text", panelWidth: 350,multiple:true,label: "Language:",labelPosition: "top">"
在第二种情况下,输入标签是:
"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options=" url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"
现在请帮我解决这个问题。
尝试使用 setAttribute 方法动态添加 data-options
属性:
document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');