开发工具与关键技术:JavaScript
作者:LJR
撰写时间:2019年 6 月 16 日
- 在做修改数据的时候,可能会遇到数据回填的问题,如果我们选中了一条数据,点击修改的按钮,会弹出一个修改数据的模态框,我们需要做的是把选中的数据回填到模态框里面。那么这个该如何去实现呢?
- 很简单,首先在控制器写一个查询远程数据ID的方法,方法里面查询出相对应要回填的字段,int HostId是用来接收查询数据的ID值。如果查询到数据就直接返回数据的值,如果查询不到就跳转到catch输出空值。
- 写完控制器的方法后,来到视图这里写弹出模态框的方法:
首先:要生命两个变量,var checkStatus 是用来接收表格中选中行的数据,var strides是在下面用来接收checkStatus选中的数据的。
第二:用一个if判断它选中的数据行,如果没用选中数据,那么直接跳到else弹出提示用户选择要修改的数据。
第四:判断到选中的数据行数大于零了,然后用strIds去接收Status的数据行的远程主机ID,接下来就用POST提交数据,让HostId:strIds,然后用function(data)接收到数据,
把他们回填到模态框里面即可。
loadDatatoFrom 是我们已经封装好的一个方法,直接调用它就行了。
function loadDatatoForm(fromId, jsonDate) {
var obj = jsonDate;
var key, value, tagName, type, arr;
for (x in obj) {
key = x;
value = obj[x];
$("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']").each(function () {
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
$(this).attr('checked', $(this).val() == value);
} else if (type == 'checkbox') {
try {
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} catch (e) {
$(this).attr('checked', value);
}
} else {
$(this).val(value);
}
} else if (tagName == 'TEXTAREA') {
$(this).val(value);
} else if (tagName == 'SELECT') {
if ($(this).hasClass("select2")) {
$(this).val(value).trigger("change");
} else {
$(this).val(value);
}
}
});
}
}
- 最后我们在修改按钮添加一个onclick事件,点击的时候就调用刚刚写的方法即可。
来到页面这里,选中一行数据修改的时候,弹出的模态框如下图,已经把选中的数据行的数据信息全部回填成功了。