现有一个需求,已知能够从后台获取到json数据,现在要根据数据中的值动态解析成页面控件,不同的数据类型要解析成不同的表单控件,而数据不会告诉你具体用什么类型的控件。要实现的话难道只能js判断,动态拼接dom?
现有一个需求,已知能够从后台获取到json数据,现在要根据数据中的值动态解析成页面控件,不同的数据类型要解析成不同的表单控件,而数据不会告诉你具体用什么类型的控件。要实现的话难道只能js判断,动态拼接dom?
楼主可以把从后台获取到的json数据的基本格式发一下吗
后端返回给你的数据中应该有字段来表述其属于哪种数据类型,那么我们根据不同的数据类型来生成相应的dom即可,但是在js中拼接字符串又是一件很坑底的事情,javascript的几种使用多行字符串的方式
<div id="app"></div>
<script>
var conf = {
'sex': 'radio',
'city': 'select'
};
var extra = {
'sex': [
{ k: '1', v: '男' },
{ k: '2', v: '女' }
],
'city': [
{ k: '1', v: '北京' },
{ k: '2', v: '上海' }
]
};
var data = {
"id": "1",
"sex": "2",
"city": "2"
};
function render(type, key, value, ext) {
// radio/checkbox
if (type == 'radio' || type == 'checkbox') {
return renderCheckbox(key, value, ext, type);
}
// select
if (type == 'select') {
return renderSelect(key, value, ext);
}
// text
return renderText(key, value);
}
function renderText(key, value) {
var $input = $('<input type="text" />');
$input
.attr('name', key)
.attr('placeholder', key)
.attr('title', key)
.val(value);
return $input;
}
function renderCheckbox(key, value, ext, type) {
var ret = [];
if (ext) {
$.each(ext, function (idx, val) {
var k = val.k;
var v = val.v;
ret.push(
$('<input />')
.attr('type', type)
.attr('name', key)
.attr('placeholder', key)
.attr('title', key)
.prop('checked', k == value)
.val(k)
, v
);
});
return ret;
}
ret.push(
$('<input />')
.attr('type', type)
.attr('name', key)
.attr('placeholder', key)
.attr('title', key)
.prop('checked', !!value.length)
.val(value)
);
return ret;
}
function renderSelect(key, value, ext) {
var $select = $('<select></select>')
.attr('name', key)
.attr('title', key);
$select.append('<option value="">请选择<option');
$.each(ext, function (idx, val) {
var k = val.k;
var v = val.v;
$select.append(
$('<option><option')
.text(v)
.val(k)
.prop('selected', k == value)
)
});
return $select;
}
$.each(data, function (key, value) {
var type = conf[key] || 'text';
var ext = extra[key];
$('#app').append(render(type, key, value, ext))
})
</script>
数字 -> input[typ='number']
字符串 -> input[type='text']
字符串有@ -> input[type='email']
这种方案自己被坑过,上手就放弃了;单不说服务器返回的数据,可不可以做到那么纯净;就是往服务器上上传,客户端一份校验、服务器上一份校验就已经要人命了;
当时没办法,程序员就认定这条路了,只好变通一下,json数据分成两段,一段数据,一段DOM模板~
10 回答11.3k 阅读
5 回答4.9k 阅读✓ 已解决
4 回答3.2k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答5.2k 阅读✓ 已解决
5 回答2k 阅读
3 回答2.4k 阅读✓ 已解决
1, 数据肯定有一个特征值来确定使用什么类型的组件,通过
js
进行判断有什么不好?数据本身是没有逻辑的2, 判断之后可以使用动态拼接,但是如果无法保证数据的安全性的话,最好使用模版引擎,比如
handlerbars
或者ejs
之类的