您的位置：首页 > Web前端 > JQuery

JQuery技巧|教你如何更快的赋值取值

2016-07-05 16:20 337 查看






显示数据时，常规赋值与取值是这样的.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15
// set


$(
"#name"
).val(data.name);


$(
"#realname"
).val(data.realname);


$(
"#address"
).val(data.address);


$(
"#sex"
).val(data.name);


$(
"#love"
).attr(!!data.love);


 

// get


var data ={


    
name:$(
"#name"
).val(),


    
realname:$(
"#realname"
).val(),


    
address:$(
"#address"
).val(),


    
sex:$(
"#sex"
).val(),


    
love:$(
"#love"
).attr(
'checked'
)


};

最近的项目字段是相当多，大概有30+，楼主写的也郁闷了。赋值与取值，真是机械活。于是想到表单提交时，不准确的说，是后台接收到的数据均是控件的name与value的键值对，既然表单可以这样直接取值，并提交给后台，那赋值也应该是可以的。

总结楼主的需求，获取到一个实体对象，直接将对象的数据赋值到页面的控件中。根据实体对象的定义，直接取得页面上控件的值，以对象形式返回。


实现

看不明白没关系，大意就是这样，先来看看页面与js调用是怎么写的。
1

2

3

4

5

6

7

8

9

10

11

12

13

14
<form id=
"form1"
>


    
<input type=
"text"

name=
"uid"
/>


    
<input type=
"text"

name=
"pwd"
/>


    
<input type=
"checkbox"

name=
"love"
/>


    
<input type=
"radio"

name=
"g1"
value=
"1"

/>


    
<input type=
"radio"

name=
"g1"
value=
"2"

/>


    
<input type=
"radio"

name=
"g1"
value=
"3"

/>


    
<input type=
"text"

name=
"gselect"
value />


    
<select name=
"sl"
>


        
<option value=
"11"
>11</option>


        
<option value=
"22"
>22</option>


    
</select>


</form>


<input type=
"button"
id=
"btn"

value=
"取值"
/>

表单里的控件均指定了name，作为存值或取值的key。
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15
var data ={


    
uid:
'cnblogs'
,


    
pwd:
'12345'
,


    
sl:
'22'
,


    
love:
true
,


    
g1:
'3'
,


    
gselect: function () {


        
return
$(
"#form1 [name=g1]:checked"
).val();


    
}


};


$(
"#btn"
).on(
'click'
, function () {


    
var d =$(
"#form1"
).getModel(data);


    
alert(JSON.stringify(d));


});


$(
"#form1"
).setModel(data);

这样就能完成赋值与取值了。其中具体实现则是根据控件的类型，取出相应的值，如vakue属性，checked属性等。

初步实现是这样的，可以根据实际的应用做修改。
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61
(function ($) {


    
function BindModel(p) {


        
p =$.extend({ method:
'get'
, data: {}}, p);


        
var isGet =p.method ==
"get"
;


        
var ret ={};


        
for
(var name

in
p.data) {


 

            
var $name =$(p.container).find(
"[name='"

+ name +
"']"
);


 

            
//未找到则跳过


            
if
(!$name.length)
continue
;


 

            
//获取当前对象值


            
var value;


            
if
(
typeof

p.data[name] ==
"function"
) {


                
//为函数时,取值就终止


                
if
(isGet){


                    
ret[name] =p.data[name].call();


                    
continue
;


                
}


                
else
{


                    
value =p.data[name].call();


                
}


            
}
else

{


                
value =p.data[name];


            
}


 

            
//根据控件类型来赋值


            
var tag =$name[0].tagName;


            
var t =$name.attr(
"type"
);


            
if
(tag ==
"SELECT"
|| t ==
"text"
) {


                
if
(isGet)ret[name] =$name.val();


                
else
$name.val(value ||
''
);


            
}
else

if
(t ==
"checkbox"
) {


                
if
(isGet)ret[name] =!!$name.attr(
'checked'
);


                
else
$name.attr(
'checked'
, !!value);


            
}
else

if
(t ==
"radio"
) {
//单选框name相同为一组，根据value来区分啦


                
$name.each(function () {


                    
if
(isGet &&
this
.
checked
) {


                        
ret[name] =
this
.value;


                        
return
false
;


                    
}


                    
else
if
(!isGet &&
this
.value ==value) {


                        
this
.
checked

=
true
;


                    
}


                
});


            
}


            
else
if

(tag ==
'TD'
|| tag ==
'SPAN'
) {


                
if
(isGet)ret[name] =$name.text();


                
else
$name.text(value)


            
}


        
}


        
if
(isGet)

return
ret;


    
}


    
$.fn.setModel =function (data) {


        
BindModel({ method:
'set'
, data: data, container:
this
});


    
}


    
$.fn.getModel =function (data) {


        
return
BindModel({ method:
'get'
, data: data, container:

this
});


    
}


})(jQuery);

此举的目的旨在维护老项目时，让大家取值赋值更快，解放亲们的双手。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 数据 职场
相关文章推荐
新的分享
章节导航