看板 Mesak
作者 標題 [JS] Form 設定 & 取值 jQuery 擴充
時間 2014年10月17日 Fri. AM 09:02:33
(function( $ ){
$.fn.formBuilder = function(options) {
var $bform=this.eq(0);
var opt = {
plugins : []
}
$.extend(opt, options);
function getNT(obj){ return { nName : obj.nodeName.toUpperCase(), nType : obj.type.toUpperCase()} }
if( ! $bform.data('formBuilder') )
{
return $bform;
};
})(jQuery);
$.fn.formBuilder = function(options) {
var $bform=this.eq(0);
var opt = {
plugins : []
}
$.extend(opt, options);
function getNT(obj){ return { nName : obj.nodeName.toUpperCase(), nType : obj.type.toUpperCase()} }
if( ! $bform.data('formBuilder') )
{
$.extend($bform, {
fields: {},
pluginEle : {},
get: function(key) {
return $((typeof $bform.fields[key] != 'undefined') ? $bform.fields[key] : {});
},
getValue: function(key) {
var value, $f = $bform.get(key),d = getNT($f[0]);
if( $.isArray( $bform.pluginEle[d.nType] ) )
{
$.each( $bform.pluginEle[d.nType] , function(i,pluginName){
value = $bform.triggerHandler(d.nType+'_getValue.'+pluginName , [$f,$bform]);
})
}else if ($f.length > 1) {
$f = $f.filter(':checked');
var v = [];
if ($f.length > 1) {
$f.each(function(i, n) {
v.push( n.value )
})
} else {
v = $f.val();
}
value = v;
} else {
value = $f.val();
}
return value
},
setValue: function(key, value) {
if ($.isPlainObject(key)) {
$.each(key, function(k, v) {
$bform.setValue(k, v);
});
return $bform;
} else {
if (typeof $bform.fields[key] != 'undefined') {
var $field = $bform.fields[key],d = getNT($field[0]);
if( $.isArray( $bform.pluginEle[d.nType] ) )
{
$.each( $bform.pluginEle[d.nType] , function(i,pluginName){
$bform.triggerHandler(d.nType+'_setValue.'+pluginName , [$field,value,$bform]);
})
}else{
switch (d.nName) {
case 'INPUT':
if (d.nType == 'CHECKBOX') {
var $obj;
if ( $.isArray(value) )
{
$.each(value, function(k, v) {
var $f = $field.filter('[value="' + v + '"]');
$obj = (typeof $obj != 'undefined') ? $obj.add($f) : $f;
})
} else {
$obj = $field.filter('[value="' + value + '"]');
}
$field.prop('checked', false);
$obj.prop('checked', true);
} else if (d.nType == 'RADIO') {
var $obj = $field.filter('[value="' + value + '"]');
$obj.prop('checked', true);
} else {
$field.val(value);
}
break;
case 'BUTTON':
$field.html(value);
break;
default:
$field.val(value);
break;
}
}
}
}
},
build : function(){
$bform.find('input,select,textarea,button').each(function(i, n) {
var name = n.name || n.id;
if (typeof name == 'string' && name != '') {
name = name.replace(/(\[|\])/g, '');
if (typeof $bform.fields[name] !== 'undefined') {
$bform.fields[name] = $bform.fields[name].add($(n));
} else {
$bform.fields[name] = $(n);
}
}
});
},
checkPlugin : function( nType , event)
{
if( $.inArray( pluginName , $bform.pluginEle[nType] ) == -1 )
return false
}
});
$bform.build();
$bform.data('formBuilder', true);
}
if( $.isArray( opt.plugins ) && opt.plugins.length )
{
$.each( opt.plugins ,function(pi,pluginName){
$.each( opt[pluginName] ,function(nType,nFunction){
if( !$.isArray($bform.pluginEle[nType]))
{
$bform.pluginEle[nType] = [];
}
if( $.inArray( pluginName , $bform.pluginEle[nType] ) == -1 )
{
$bform.pluginEle[nType].push(pluginName);
}
$.each( nFunction ,function(nFunctionName,fCallback){
$bform.bind( nType+'_'+nFunctionName+'.'+pluginName , fCallback );
})
})
})
}
return $bform;
};
})(jQuery);
http://fiddle.jshell.net/mesak/uwz8vcar/
利用 formBuilder 可以快速的把 FORM 下的物件 利用 get 取得物件，只需要 ID OR NAME 就可以賦值取值，選擇器不用打很長
另外複數物件 NAME 重複自動 變成 群組，例如 CHECKBOX 或是陣列輸入框，一樣可以直接一次控制
Plugin 目前只測試 iCheck 有機會在fix 新的進去
--
Mesak Blog
http://mesak.tw
--
※ 作者: mesak 時間: 2014-10-17 09:02:33
※ 看板: Mesak 文章推薦值: 0 目前人氣: 0 累積人氣: 121
回列表(←)
分享