* finished modifying 'PM_TYPE' record for 'EditHistoryData' page

 * synced '97suifang-front'

 TODO:
 * to merge changes of '97suifang-front'

2 files changed, 72 insertions, 2 deletions

diff --git a/97suifangqa/apps/indicator/static/css/edit_history_data.css b/97suifangqa/apps/indicator/static/css/edit_history_data.css
index 9775539..49005be 100644
--- a/97suifangqa/apps/indicator/static/css/edit_history_data.css
+++ b/97suifangqa/apps/indicator/static/css/edit_history_data.css
@@ -1,3 +1,26 @@
+/*
+ * How To Change Radio Button Checkbox Style in CSS:
+ * http://viralpatel.net/blogs/css-radio-button-checkbox-background/
+ */
+input[type="radio"] {
+	display: none;
+	margin: 4px;
+	vertical-align: middle;
+}
+input[type="radio"] + label {
+	display: inline-block;
+	height: 17px;
+	line-height: 17px;
+	margin-right: 2px;
+	padding: 2px 7px;
+	background-color: #F3F3F1;
+	border: 1px solid #9C9C9C;
+}
+input[type="radio"]:checked + label {
+	background-image: none;
+	background-color: #99CC33;
+}
+
 #edit_history_data_container {
 	width: 588px;
 	height: 180px;
@@ -147,6 +170,10 @@
 .edit_history_data_content .editing_data .data .invalid {
 	border: 2px solid red;
 }
+.edit_history_data_content .editing_data .data .radio_input {
+	margin-right: 8px;
+	float: left;
+}
 .edit_history_data_content .editing_data .data .data_input {
 	width: 200px;
 	height: 17px;
diff --git a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
index f4deafd..e0dff4a 100644
--- a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
+++ b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
@@ -74,10 +74,21 @@ $(document).ready(function(){
     });
     // }}}
 
+    // initalize
     // set datepicker 'date_input' value
     var date_init = $.datepicker.parseDate('yy-mm-dd',
             $(".date_input").attr('value'));
     $(".date_input").datepicker("setDate", date_init);
+    // select radio button according to the original value
+    if ($(".editing_data .radio_input").length) {
+        $(".radio_input input:radio").prop("checked", false);
+    }
+    if (record.value === '-') {
+        $(".radio_input #minus_r").prop("checked", true);
+    }
+    else {
+        $(".radio_input #plus_r").prop("checked", true);
+    }
 
     // record data validate {{{
     // date {{{
@@ -314,9 +325,41 @@ $(document).ready(function(){
     else if (data_type == DATA_TYPES.FLOAT_RANGE_TYPE) {
         // TODO
     }
-    else if (data_type == DATA_TYPES.PM_TYPE) {
+    else if (data_type == DATA_TYPES.PM_TYPE) {             // {{{
         // TODO
-    }
+        var radioinput_help = '<p>请直接点击选择</p>';
+        // tooltip
+        $(".radio_input").qtip({
+            id: 'radioinput',
+            prerender: false,
+            content: {
+                text: radioinput_help
+            },
+            position: {
+                my: 'bottom left',
+                at: 'top right'
+            },
+            show: {
+                event: 'mouseenter'
+            },
+            hide: {
+                event: 'mouseleave unfocus'
+            }
+        });
+        // validate
+        $(".radio_input").on('validate', null, function() {
+            if ($(".radio_input input:radio:checked").length != 1) {
+                var qtip_content = '<p>请选择化验结果</p>';
+                $(this).qtip('api').set('content.text',
+                    qtip_content);
+                $(this).qtip('api').show();
+            }
+            else {
+                // valid
+                record_data.value = $(".radio_input input:radio:checked").val();
+            }
+        });
+    } // }}}
     else {
         // unknown
         return false;