很久之前,就写了一个把 json 数据填充到表单的方法…当时是出于弹窗编辑数据的需要,于是干脆封装成一个方法.
今天发现,做搜索功能时,以 get 方式提交表单后,还得保持表单中的搜索条件不变.
当初是用服务器把 get 数据转成 json格式,然后传给 js, 但是遇到文本框name=”a[b]”这种数组形式的,就用不了,非得在服务器端再做处理.后面转念一想,也可以直接从浏览器地址栏上取查询字符串.再转成json就可以了.
说明,插件基于jquery,所以,要先引入jquery
<form action="/index.php" method="get">
<input type="text" name="Search[pn]">
<select name="Search[status]">
<option value="">=Status=</option>
<option value="0">无效</option>
<option value="1">有效</option>
</select>
</form>
<script type="text/javascript">
$.fn.formEdit = function(data){
if(typeof data != 'object'){
var search = '';
if(typeof data == 'undefined'){
var data = {};
search = decodeURIComponent(location.search).slice(1);
}else{
search = data;
data = {};
}
var search = search.split('&');
var row = [];
for(var i in search){
row = search[i].split('=');
data[row[0]] = row[1];
}
//console.log(data);
}
this.each(function(){
var input, name;
if(data == null || data instanceof Array){
this.reset(); return;
}
for(var i = 0; i < this.length; i++){
input = this.elements[i];
//checkbox的name可能是name[]数组形式
name = (input.type == "checkbox")? input.name.replace(/(.+)\[\]$/, "$1") : input.name;
if(typeof data[name] == 'undefined') continue;
switch(input.type){
case "checkbox":
if(data[name] === ""){
input.checked = false;
}else{
input.checked = (data[name].indexOf(input.value) > -1)? true : false;
}
break;
case "radio":
if(data[name] === ""){
input.checked = false;
}else if(input.value == data[name]){
input.checked = true;
}
case "file" : $('img[src='+name+']').attr('src', data[name]);
break;
default: input.value = data[name];
}
}
});
return this;
}
//传data值,当不传时,动取地址栏中的search 字符串
$('form:eq(1)').formEdit('r=test/index&Search[pn]=&Search[status]=1');
</script>