使用jQuery将数据快速填充到表单

http://my.oschina.net/crazymus/blog/345586




返回博客列表

原 使用jQuery将数据快速填充到表单




 
crazymus

发布时间: 2014/11/17 16:32 
阅读: 6870 
收藏: 14 
点赞: 0 
评论: 1

作为WEB程序员，我们经常与表单打交道。例如在通过表单编辑一些数据时，读取后台数据并填充到表单是一件繁琐的事情,尤其是表单域很多而且包含radio，checkbox，select等的时候。你一定见过下面的代码：

<select name="area">
<option value="nankai" <?php if($area=='nankai') echo 'selected="selected"';?>>南开区</option>
<option value="hexi" <?php if($area=='hexi') echo 'selected="selected"';?>>河西区</option>
<option value="xiqing" <?php if($area=='xiqing') echo 'selected="selected"';?>>西青区</option>
</select>

PHP和HTML混在一起非常乱，于是我想到用jQuery来优化这一过程，将PHP代码和HTML分离。
请看下面的HTML：

<table>
<tr>
<td>姓名</td>
<td>
<input type="hidden" name="id" />
<input type="text" name="name" />
</td>
</tr>

<tr>
<td>地区</td>
<td>
<select name="area">
<option value="nankai">南开区</option>
<option value="hexi">河西区</option>
<option value="xiqing">西青区</option>
</select>
</td>
</tr>

<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>

<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby[]" value="movie" />电影
<input type="checkbox" name="hobby[]" value="music" />音乐
<input type="checkbox" name="hobby[]" value="basketball" />篮球
</td>
</tr>

<tr>
<td>简介</td>
<td>
<textarea name="intro"></textarea>
</td>
</tr>

</table>

这里面包含了常用的表单域，下面我们从服务端读取数据（PHP示例）：

<?php
//从数据库读取的用户信息,需要注意的是，数组的键名应和表单域保持一致
$user = array(
'id'=>1,
'name'=>'张三',
'area'=>'hexi',
'sex'=>'male',
'hobby'=>'music,movie',
'intro'=>'你好，世界'
);

//将数组序列化为json字符串
$json = json_encode($user);

?>

使用下面的代码即可将数据填充到表单：

//将PHP生成的json字符串赋值给js变量
var user = '<?php echo $json;?>';

$(function(){

//将数据加载到表单中
loadData(user);

});

loadData的实现很简单，封装成函数后可以在任何地方使用，请看代码：

function loadData(jsonStr){
var obj = eval("("+jsonStr+")");
var key,value,tagName,type,arr;
for(x in obj){
key = x;
value = obj[x];

$("[name='"+key+"'],[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'){
arr = value.split(',');
for(var i =0;i<arr.length;i++){
if($(this).val()==arr[i]){
$(this).attr('checked',true);
break;
}
}
}else{
$(this).val(value);
}
}else if(tagName=='SELECT' || tagName=='TEXTAREA'){
$(this).val(value);
}

});
}
}

前台效果：