动态给H5页面绑定数据，基本万能无错误！

最新推荐文章于 2022-07-24 13:08:08 发布

weixin_30577801

最新推荐文章于 2022-07-24 13:08:08 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 json

原文链接：http://www.cnblogs.com/weijieyun/p/6050834.html

本文介绍了一种通用的页面数据绑定方法，通过解析JSON数据并根据不同类型的DOM元素（如span、textarea等）进行数据绑定。此外，还涉及表格数据填充及下拉选择框的选项设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此为原创，转载请注明出处！

/*
* 共通用绑定页面数据用方法
*
* @param bingData 需要绑定的数据
*
* @return 无
*
*/
function commonBindData(bingData) {
// 取得需绑定的json数据
var jsonArray = eval("(" + bingData + ")");

// 按照控件类型进行动态绑定数据
for ( var jsonUnit in jsonArray) {
// 取得类型
selObjStr = "#" + jsonUnit;
var tagType = $(selObjStr).attr("type");

// 绑定数据
switch (tagType) {
// 该控件为Span
case ("span"):
$(selObjStr).html(jsonArray[jsonUnit]);
break;
// 该控件为Text
case ("text"):
$(selObjStr).val(jsonArray[jsonUnit]);
break;
// 该控件为textarea
case ("textarea"):
$(selObjStr).val(jsonArray[jsonUnit]);
break;
// 该控件为hidden
case ("hidden"):
$(selObjStr).val(jsonArray[jsonUnit]);
break;
// 该控件为radio
case ("radio"):
tmpStr = "#" + jsonUnit;
if (jsonArray[jsonUnit] != "" && jsonArray[jsonUnit] != "undefined") {
$(tmpStr).attr("checked", true);
}
break;
// 该控件为CheckBox
case ("checkBox"):
if (jsonArray[jsonUnit] != "") {
$(selObjStr).prop("checked", true);
} else {
$(selObjStr).prop("checked", false);
}
break;
// 该控件为Table
case ("table"):
var tableData = jsonArray[jsonUnit];
for(var rowData in tableData) {
addTableRow(jsonUnit, rowData);
}
break;
default:
// 该控件为Select
if ($(selObjStr)[0] != null) {
var selType = $(selObjStr)[0].type;
if (String(selType).indexOf("select") > -1) {
var selTmp = "option[value='" + jsonArray[jsonUnit] + "']";
$(selObjStr).find(selTmp).attr("selected",true);
}
}
break;
}
}
}