為什麼要這樣做咧??
因為我們不想要使用舊式的from表單來送整頁的資料，每次都重新整理
讓使用者感覺到操作非常的麻煩，不順暢
如果他可以點一個欄位就修改一個欄位，這是最理想的操作方式了
以下就分各部份來說明如何來實現這個動作
在HTML部分如下：
如果是Text欄位(一般的文字、數字欄位)
<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="telphone">
<a id="show_part_telphone_{{ row.id }}">
{{ row.telphone|default_if_none:"" }}
</a>
<input
id="edit_part_telphone_{{ row.id }}"
type="text" class="BlurUpdateInfo" style="display: none;"
field_type="str"
row_id="{{ row.id }}"
field_name="telphone"
table_name="UserProfile"
old_value="{{ row.telphone|default_if_none:"" }}"
value="{{ row.telphone|default_if_none:"" }}"/>
</td>
如果是Textarea欄位(如說明欄位)
<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="memo">
<a id="show_part_memo_{{ row.id }}">
{{ row.memo|linebreaks|default_if_none:"" }}
</a>
<textarea
id="edit_part_memo_{{ row.id }}"
class="BlurUpdateInfo" style="display: none;"
field_type="str"
row_id="{{ row.id }}"
field_name="memo"
table_name="UserProfile"
old_value="{{ row.memo|default_if_none:"" }}"/>
cols="40" rows="5">{{ row.memo|default_if_none:"" }}</textarea>
</td>
如果是Select欄位(一般用在ForeignKey欄位，例如縣市、單位等等)
<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="place">
<a id="show_part_memo_{{ row.id }}">
{{ row.place.name }}
</a>
<select class="ClickShowInfo"
id="edit_part_place_{{ row.id }}"
class="BlurUpdateInfo" style="display: none;"
field_type="select"
row_id="{{ row.id }}"
field_name="place"
table_name="UserProfile"
old_value="{{ row.place.id }}">
<option value="" {% if not row.place %}selected="selected"{% endif %}>
請選擇
</option>
{% for p in places %}
<option value="{{ p.id }}" {% ifequal row.place p %}selected="selected"{% endifequal %>
{{ p.name }}
</option>
{% endfor %}
</select>
</td>
然後再JavaScript部分開始整理所需的資料，如下：
//進行(顯示部分-輸入框)物件切換
function ClickShowInfo(){
var $obj = $(this);
var field_name = $obj.attr('field_name');
var row_id = $obj.attr('row_id');
$('#show_part_'+field_name+"_"+row_id).hide();
$('#edit_part_'+field_name+"_"+row_id).show().focus();
}
//送資料
function BlurUpdateInfo(){
//整理欄位資訊
var $obj = $(this);
var row_id = $obj.attr('row_id');
var field_type = $obj.attr('field_type');
var field_name = $obj.attr('name');
var table_name = $obj.attr('table_name');
var value = $obj.attr('value');
var old_value = $obj.attr('old_value');
var int_check=/^-?[0-9]*$/;
var float_check=/^[1-9]d*.d*|0.d*[1-9]d*$/;
var date_check=/^(([1-9]\d{0,3}|0)\-\d{2}\-\d{2})|(([1-9]\d{0,3}|0)\.\d{2}\.\d{2})|(([1-9]\d{0,3}|0)\/\d{2}\/\d{2})$/;
var email_check=/^[a-z0-9][-a-z0-9\.]*@([a-z0-9-]+\.)+[a-z]+$/;
//檢查各種格式是否正確
if (field_type=='int' && value){
if(!(int_check.test(value))){
var message = field_name + '須為整數！';
alert(message);
return false;
}
}
if (field_type=='float' && value){
if(!(float_check.test(value))){
var message = field_name + '須為數字！';
alert(message);
return false;
}
}
if (field_type=='date' && value){
if(!(date_check.test(value))){
var message = field_name + '須為日期格式(如2013-01-19)！';
alert(message);
return false;
}
}
if (field_type=='email' && value){
if(!(email_check.test(value))){
var message = field_name + '須為Email格式！';
alert(message);
return false;
}
}
//送資料到views.py
if (value!=old_value){
$.ajax({ url:"/your_app_name/ajax/", type: "POST", data:{submit: "BlurUpdateInfo",
row_id: row_id, field_name: field_name, table_name: table_name,
field_type: field_type, value: value
}, dataType:"json", success:function(data){
if(data["status"]){
//修改html資訊
$('#edit_part_'+field_name+"_"+row_id).attr('value', data['return_value']);
$('#edit_part_'+field_name+"_"+row_id).attr('old_value', data['return_value']);
$('#show_part_'+field_name+"_"+row_id).html(data['return_value_ch']);
} else {
//若修改失敗要把被修改的值改為原資料值
$('#edit_part_'+field_name+"_"+row_id).attr('value', old_value);
alert(data['error_message']);
}
}});
}
//將顯示物件切換回來
$('#show_part_'+field_name+"_"+row_id).show();
$('#edit_part_'+field_name+"_"+row_id).hide();
}
$(document).ready(function(){
$('.ClickShowInfo').click(ClickShowInfo);
$('.BlurUpdateInfo').blur(BlurUpdateInfo);
}
再來就是Django的部分了
第一部分是urls.py
urlpatterns = patterns('apps.project.views',
(r'^ajax/$', 'AJAX'),
)
第二部分是views.py
def AJAX(R):
submit = R.GET.get('submit', '')
html = False
if not submit: submit = R.POST.get('submit', '')
if 'BlurUpdateInfo' == submit:
result = BlurUpdateInfo(R)
else:
result = {'status': False, 'message': u'未指定方法'}
if html: return HttpResponse(result)
else: return HttpResponse(json.dumps(result))
def BlurUpdateInfo(R):
row_id = R.POST.get('row_id')
field_name = R.POST.get('field_name')
field_type = R.POST.get('field_type')
table_name = R.POST.get('table_name')
value = R.POST.get('value')
return_value = value
return_value_ch = value
if table_name == 'UserProfile':
row = UserProfile.objects.get(id=row_id)
if field_type == 'float':
if value:
value = str(value)
else:
value = '0'
return_value = '0'
return_value_ch = '0'
elif field_type == 'int':
if not value:
value = 0
return_value = 0
return_value_ch = 0
elif field_type == 'select':
if value:
if field_name == 'place':
value = Place.objects.get(id=value)
return_value = value.id
return_value_ch = value.name
else:
value = None
return_value = ''
return_value_ch = '請選擇'
if not value:
value = None
setattr(row, field_name, value)
row.save()
return {'status': True, 'return_value': return_value}
好了，大致上就是這樣，當然還是要依照你的資歷格式或需要輸入的資料來進行微調
但是萬變不離其宗阿
全站熱搜
留言列表
