生産制造追溯系統-線上技能考試

前言

我們在項目開發過程中，經常會遇到頁面html元素無法提前預設，而是通過某一些條件動态生成的情況，這裡我們需要考慮如下幾個因素：

1.需要動态建立的元素類型，比如TextBox, Radio, CheckBox等

2.每一個元素動态命名，確定ID唯一

3.如何擷取每一個元素的值

目的

1.預先設定題庫

2.建立試卷，并針對該試卷選擇題目，題目類型包含單選題與多選題

3.線上生成電子試卷，使用者線上考試

4.考試完畢後線上給出得分

代碼

通過一個ajax請求，根據考試試卷的名稱加載該試卷下所有的試題：

public void GetItems() 
        {
            var sqldb = SqlHelper.createdb("mts");
            string strSql = "usp_get_items";
            var dt = sqldb.GetDataTable(strSql);
            var json = Library.JsonLib.DataTableToJson(dt);
            Response.Write(json);
            Response.End()
        }      

function gen_paper(paper_name) {

            var strhtml_single = "";    //題目類型-單選題
            var strhtml_double = "";    //題目類型-多選題
            var sub_single = "";    //單選題下面的題目
            var sub_double = ""; //多選題下面的題目
            var main_title = "";    //試卷名稱
            var strhtml_operation = ""; //操作選項

            $.ajax({
                type: "post",
                url: "exam.aspx?Oper=gen_paper&key=" + Math.random(),
                data: { paper: encodeURIComponent(paper_name) },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        strhtml_single = "<span id='span_single_01' ><div style='font-weight:bold'>一 單選題</div></span></br>";
                        strhtml_double = "<span id='span_double_01' ><div style='font-weight:bold'>二 多選題</div></span></br>";
                        main_title = "<div style='font-weight:bold;font-size:30px'align='center'>" + paper_name + "<div/>";
                        strhtml_operation = "<a id='btn_save' href='javascript:void(0);' class='easyui-linkbutton c6' style='padding:0 30px;text-align:center' onclick='save_result()'>送出</a>";
                        $(main_title).appendTo("#div_main");
                        $(strhtml_single).appendTo("#div_main");
                        $(strhtml_double).appendTo("#div_main");
                        $(strhtml_operation).appendTo("#div_main");
                        $.parser.parse("#div_main");
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].TYPE_NAME == "單選題") {
                                single_title_id_arr.push(data[i].FID);
                                sub_single = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "radio_" + i.toString()) + "</span></br>";
                                $(sub_single).appendTo("#span_single_01");
                            }
                            if (data[i].TYPE_NAME == "多選題") {
                                double_title_id_arr.push(data[i].FID);
                                sub_double = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "ckb_" + i.toString()) + "</span></br>";
                                $(sub_double).appendTo("#span_double_01");
                            }
                        }
                    }
                }
            });
        }      

 針對單選題與多選題分開處理，在動态建立元素的時候調用這個方法：

function seting_items(typeName, items, control_name) {
            if (typeName == "單選題") {
                var _single_str = "";
                var _single_value_id = "";
                var arr_single = items.split("@");
                for (var i = 0; i < arr_single.length; i++) {

                    if (i == 0) {
                        _single_value_id = "A";
                    }
                    if (i == 1) {
                        _single_value_id = "B";
                    }
                    if (i == 2) {
                        _single_value_id = "C";
                    }
                    if (i == 3) {
                        _single_value_id = "D";
                    }
                    _single_str += "<input  name='" + control_name + "'  type='radio' value='" + _single_value_id + "' />" + arr_single[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

                }
                return _single_str;
            }

            if (typeName == "多選題") {
                var _double_str = "";
                var _double_value_id = "";
                var arr_double = items.split("@");
                for (var i = 0; i < arr_double.length; i++) {

                    if (i == 0) {
                        _double_value_id = "A";
                    }
                    if (i == 1) {
                        _double_value_id = "B";
                    }
                    if (i == 2) {
                        _double_value_id = "C";
                    }
                    if (i == 3) {
                        _double_value_id = "D";
                    }
                    _double_str += "<input  name='" + control_name + "'  type='checkbox' value='" + _double_value_id + "' />" + arr_double[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }

                return _double_str;
            }
        }      

取值

元素動态建立完成之後，我們需要取值，方法如下：

function getRadioBoxValue(radioName) { 

            for (i = 0; i < obj.length; i++) {

                if (obj[i].checked) {
                    return obj[i].value;
                }
            }
            return "undefined";
        }

        function getCheckBoxValue(checkBoxName) {
            var obj = document.getElementsByName(checkBoxName);
            var _select_list = "";
            for (k in obj) {
                if (obj[k].checked) {
                    _select_list += obj[k].value + ",";
                }
            }
            _select_list = _select_list.substring(0, _select_list.length - 1);
            return _select_list;

        }      

取到使用者選擇的項目，我們就可以用來做進一步處理了，比如根據這個值判斷使用者是否考試合格等等！

作者：Allen Chen無影

出處：http://www.cnblogs.com/allen0118/

郵箱：[email protected] 本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利.