首页 > 代码库 > JavasScript实现调查问卷插件

JavasScript实现调查问卷插件

原文:JavasScript实现调查问卷插件

鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来与各程序员共享,聊以自慰.

前台代码如下:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Aim.Examining.Web.SurveyUI.WebForm1" %> 2  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6     <title></title> 7     <link href="http://www.mamicode.com/SurveyRazor/css/surveyq.css" rel="stylesheet" type="text/css" /> 8     <link href="http://www.mamicode.com/SurveyRazor/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" /> 9     <script src="http://www.mamicode.com/SurveyRazor/jquery-1.6.min.js" type="text/javascript"></script>10     <script src="http://www.mamicode.com/SurveyRazor/SurveyRaZor.js" type="text/javascript"></script>11     <script src="http://www.mamicode.com/JsonData.js" type="text/javascript"></script>12     <script type="text/javascript">13         $(function () {14 15             var desc = "<p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">16                         <span style=\"font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">親愛的客戶,</span>17                     </p>18                     <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">19                         <span style=\"font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">感謝您一直以來的支持與厚愛。</span>20                     </p>21                     <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">22                         <span style=\"font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">為了更好地提升我們的服務, 邀請您對我們的服務進行評價。您的評價與意見,將幫助我們提供更加優質的服務!</span>23                     </p>24                     <p style=\"white-space: normal; background-color: rgb(255, 255, 255); text-align: center;\">25                         <span style=\"font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">請針對2014年第1季度的服務狀況進行評價</span>26                     </p>27                     <p style=\"text-align: center;\">28                         <span style=\"font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">請您配合在3月26日前回復,謝謝。收集窗口: </span>29                     </p>";30             SurveyRazor.dataStore.load(data);31             SurveyRazor.surveyRazor.options({32                 description: desc, //描述33                 haveBgImg: false,  //启用背景图片34                 surveyTitle: "客戶滿意度調查表"35             }).create().show();36         });37     </script>38 </head>39 <body style="margin: 0 auto; background-image: url(&#39;&#39;); width: 700px;">40 </body>41 </html>

 Js代码如下:

  

  1 /*  2 *SurveyRazor.js 问卷渲染引擎  3 *Version:RW_1.1  4 *Author:WGM  5 *Data:2014-6-20  6 */  7 var SurveyRazor = {  8   9     /*html模版*/ 10     htmlTemplate: { 11         //必填 12         mustFill: "<span style=\"color: red;\">&nbsp;*(必填)</span>", 13         //多选 14         moreSelc: "<span>[多选题]</span>", 15         //问卷大分类 16         questionBigType: "<div class=‘qType‘>" 17                           + "<label style=\"display: block; padding-top: 7px;\">{content}</label></div>", 18         //题的Div 19         qustionBody: "<div class=\"div_question\" id=\"{id}\">{content}</div>", 20         //题的题干 21         questionHead: "<div class=\"div_title_question_all\">" 22                        + "<div class=\"div_topic_question\"><b>{seq}.</b></div>" 23                        + "<div id=\"{id}\" class=\"div_title_question\">" 24                        + "{headTitle}{extend}</div>" 25                        + "<div style=\"clear: both;\"></div></div>", 26  27         //单选类型,单选项选项补充 28         radio: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=http://www.mamicode.com/"{value}\"  class=\" {validation}\" onclick=‘{onclick};‘ /><label for=\"{for}\">{content}</label>", 29         radioAdd: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=http://www.mamicode.com/"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>" 30                            + "<input class=\"underline itemExtend\" type=\"text\" value=http://www.mamicode.com/"{extendValue}\" rel=\"{rel}\" " 31                            + "style=\"color: rgb(153, 153, 153); position: static;\">", 32         itemAppend: "<input class=\"underline itemExtend\" type=\"text\" value=http://www.mamicode.com/"{value}\" rel=\"{rel}\" name=\"{name}\"  " 33                      + "style=\"color: rgb(153, 153, 153); position: static;\">", 34         //多选类型,多选项补充 35         checkbox: "<input id=\"{id}\" type=\"checkbox\" name=\"{name}\" value=http://www.mamicode.com/"{value}\" class=\" {validation}\" /><label for=\"{for}\">{content}</label>", 36         checkboxAdd: "<input type=\"checkbox\" name=\"{name}\" id=\"{id}\" value=http://www.mamicode.com/"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>" 37                            + "<input class=\"underline itemExtend\" type=\"text\" value=http://www.mamicode.com/"{extendValue}\" rel=\"{rel}\" " 38                            + "style=\"color: rgb(153, 153, 153); position: static;\">", 39         //包裹的元素 40         radioOrCheckboxWrap: "<div class=\"div_table_radio_question\" id=\"{id}\">" 41                             + "<div class=\"div_table_clear_top\"></div>" 42                             + " <ul class=\"ulradiocheck\">{items}<div style=\"clear: both;\"></div></ul>{discuss}</div>", 43         //填空题 44         fillInput: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 45                    + "<textarea  class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%; height: 22px;\" " 46                    + " title=‘{title}‘ id=\"{id}\" name=\"{name}\" value=http://www.mamicode.com/‘{value}‘>" 47                    + "<div class=\"div_table_clear_bottom\"></div></div>", 48  49         fillInputWrap: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 50                     + "{content}<div class=\"div_table_clear_bottom\"></div></div>", 51         fillInputItem: "<label>{title}</label>" 52                        + "<textarea title=\"{tip}\" style=\"overflow: auto; width: 20%; height: 22px;\" " 53                        + " class=\"inputtext {validation}\" value=http://www.mamicode.com/‘{value}‘ id=/"{id}\" name=\"{name}\"></textarea>", 54  55  56         //大填空题 57         bigInput: " <div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 58                          + "<textarea  class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%;\" rows=\"3\" " 59                          + "id=‘{id}‘ value=http://www.mamicode.com/‘{value}‘ name=‘{name}‘ title=‘{title}‘ >" 60                          + "<div style=\"clear: both;\"></div>" 61                          + "<div class=\"div_table_clear_bottom\"></div></div>", 62         //评论框 63         discussInput: "<ul class=\"ulradiocheck\">" 64                               + "<div style=\"float: left; padding: 1px; margin-top: 12px; margin-right: 5px; border: 1px solid gray\">" 65                               + "<span>评论</span> </div>" 66                               + "<textarea style=\"width: 60%\" rows=\"3\" name=‘{name}‘ class=\"inputtext {validation}\" id=‘{id}‘ for=‘{for}‘ ></textarea>" 67                               + "<div style=\"clear: both;\"></div>" 68                               + "</ul>", 69         //下拉选择题 70         comboxSlt: " <div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 71                           + "<select id=\"{id}\" name=\"{name}\">{option}</select>" 72                           + "<div style=\"clear: both;\"></div>" 73                           + "<div class=\"div_table_clear_bottom\"></div></div>", 74         //排序题 75         sortQuestion: { 76             checkItem: "<li style=\"float: none;\" class=\"lisort\">" 77                                + "<input id=\"{id}\" type=\"checkbox\" rel=\"{rel}\" value=http://www.mamicode.com/"{value}\" class=\" {validation}\" style=\"color: rgb(153, 153, 153);\" />" 78                                + "<label for=\"{for}\">{content}</label></li>", 79             sortArea: "<select size=\"{size}\" id=‘{id}‘ name=‘{name}‘ style=\"width:{width}px; overflow: auto; height:{height}px;\"></select>", 80             body: "<div class=\"div_table_radio_question\" id=\"{id}\" ><div class=\"div_table_clear_top\"></div>" 81                             + "<div style=\"width: 90%;\">" 82                             + "<ul style=\"float: left;\">{checkItem}</ul>" 83                             + "<table style=\"float: left;\"><tbody>" 84                             + "<tr>" 85                             + "<td verticalalign=\"center\">" 86                             + "<div style=\"margin-left: 10px;\">{sortArea}</div>" 87                             + "</td>" 88                             + "<td verticalalign=\"center\">" 89                             + "<div class=\"qButton\">" 90                             + "<ul>" 91                             + "<li><a rel=\"{rel}\" class=\"goTop\" href=http://www.mamicode.com/"javascript:void(0);\" name=\"first\">移至最前</a></li>" 92                             + "<li><a rel=\"{rel}\" href=http://www.mamicode.com/"javascript:void(0);\" class=\"upMove\" name=\"up\">上移一位</a></li>" 93                             + "<li style=\"margin-top: 10px\"><a rel=\"{rel}\" href=http://www.mamicode.com/"javascript:void(0);\" class=\"downMove\" name=\"down\">下移一位</a> </li>" 94                             + "<li><a rel=\"{rel}\" class=\"goBottom\" href=http://www.mamicode.com/"javascript:void(0);\" name=\"last\">移至最后</a>" 95                             + "</li>" 96                             + "</ul>" 97                             + "</div></td>" 98                             + "</tr>" 99                             + "</tbody></table>"100                             + "<div style=\"clear: both;\"></div></div></div>"101         },102 103         //矩阵题104         matrix: {105             titleTd: "<td align=\"center\">{content}</td>",106             contentTd: "<td align=\"center\" class=\"##line##\" style=\"cursor: pointer;\">{content}</td>",107             item: "<tr align=\"left\" rowindex=\"{rowindex}\" >"108                 + "<th class=\"rowth\" align=\"left\" style=\"\">{leftTitle}</th>"109                 + "{items}<th class=\"rowth\" align=\"left\" style=\"\">{rightTitle}</th></tr>",110 111             body: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=‘div_table_clear_top‘></div>"112                       + "<table style=\"width: 100%;\" border=\"0px\" cellpadding=\"5\" cellspacing=\"0\">"113                       + "<thead><tr><th></th>{head}</tr></thead>"114                       + "<tbody><tr align=\"left\">{items}"115                       + "</tbody></table>"116                       + "<div class=\"div_table_clear_bottom\"></div></div>"117         }118     },119     //包括标题,页眉, 描述120     headBar: {121         title: ""122     },123     //提交工具栏124     submitBar: {125         title: ""126     },127 128     typeSign: { //题目类型129         "大类别": "BIGTYPE",130         "矩阵": "JUZHEN",131         "单选": "DANXUAN",132         "多选": "DUOXUAN",133         "下拉": "XIALA",134         "评论": "PINGLUN",135         "排序": "PAIXU",136         "填空": "TIANKONG",137         "填写": "TIANXIE",138         "图片单选": "TUPIANDANXUAN",139         "图片多选": "TUPIANDUOXUAN",140         "单选说明": "DANXUANSHUOMING",141         "多选说明": "DUOXUANSHUOMING"142     },143     dataStore: {144         globalData: [],145         mapFields: {146             isInit: false,                   //是否初始化147             Id: "Id",148             Name: "Name",149             LName: "LName",                  //用于矩阵题 (左侧名称)150             RName: "RName",151             SortIndex: "SortIndex",152             Type: "Type",153             TypeCode: "TypeCode",154             IsMoreSlc: "IsMoreSlc",         //多选155             IsMustSlc: "IsMustSlc",         //必选156             IsTiGan: "IsTiGan",             //是否为题干157             ValidateRule: "ValidateRule",   //验证规则158             Layout: "Layout",                //横向,纵向159             ParentId: "ParentId",160             Path: "Path",                   //Path161             IsLeaf: "IsLeaf",               //是否子节点162             Extend: "Extend",                //扩展信息163             Ext1: ""164         },165         configFields: function (option) {166             var option = $.extend(this.mapFields, option || {});167             this.mapFields = option;168             this.mapFields.isInit = true;169             return option;170         },171 172         //获取子节点173         getChildsById: function (id) {174             if (this.globalData.length <= 0) {175                 throw new Error("dataStore数据集无数据");176                 return;177             }178             var tempArr = [];179             for (var i = 0; i < this.globalData.length; i++) {180                 if (this.globalData[i][this.mapFields.ParentId] == id) {181                     tempArr.push(this.globalData[i]);182                 }183             }184             return tempArr;185         },186         //获取题干187         getTiGanArr: function () {188             if (!$.isArray(this.globalData)) {189                 throw new Error("数据源为空");190                 return;191             }192             var arr = [];193             for (var i = 0; i < this.globalData.length; i++) {194                 if (this.globalData[i][this.mapFields.IsTiGan]) {195                     arr.push(this.globalData[i]);196                 }197             }198             return arr;199         },200         //加载数据201         load: function (data) {202             if (!$.isArray(data)) {203                 throw new Error("数据源为空");204                 return;205             }206             if (!this.mapFields.isInit) {207                 this.configFields(); //使用默认配置初始化208             }209             function getChildByPId(pid) {210                 var tempArr = [];211                 for (var i = 0; i < data.length; i++) {212                     if (data[i][SurveyRazor.dataStore.mapFields.ParentId] == pid) {213                         tempArr.push(data[i]);214                     }215                 }216                 return tempArr;217             }218             for (var i = 0; i < data.length; i++) {219                 //  if (data[i][this.mapFields.TypeCode] == SurveyRazor.typeSign.矩阵) {220                 //      var arr = getChildByPId(data[i][this.mapFields.Id]);221                 //      data[i][this.mapFields.Extend] = arr; //扩展字段存子节点222                 //  }223 224                 var dt = $.extend({225                     Extend: "",226                     Layout: "SingleCln" //默认单列显示227                 }, data[i] || {})228                 this.globalData.push(dt)229             }230         }231     },232     surveyRazor: {233         config: {234             surveyTitle: "",        //问卷标题235             description: "",        //问卷描述236             header: "",              //问卷眉头237             filesItem: [],          //附加的文件238             mapFields: "",          //映射到的字段239             haveBgImg: false,       //是否启用背景   240             bgColor: "",            //背景颜色241             bgImg: "./SurveyRazor/img/bg1.jpg", //背景图片242             mainCss: "./SurveyRazor/surveyq.css",243             extCss: "./SurveyRazor/surveyextend.css",244             records: []               //数据集245         },246 247         /**248         *  配置项249         */250         options: function (options) {251             if (options && $.isEmptyObject(options)) {252                 throw new Error("参数不是对象或对象为空!");253                 return254             }255             this.config.mapFields = SurveyRazor.dataStore.mapFields;256             var opt = $.extend(this.config, options || {});257             this.config = opt;258             return this;259         },260         /**261         *   单选或多选262         *   rec:题干数据263         *   seq:序号264         */265         clearChecked: function (objId) {266             $(":radio[name=‘" + objId + "‘]").each(function () {267                 $(this).attr("checked", false);268             })269             $("#clr_" + objId).hide();270         },271         showClrBtn: function (Id) {272             $("#clr_" + Id).show();273         },274         radioOrCheckbox: function (rec, seq) {275             var Id = rec[SurveyRazor.dataStore.mapFields.Id];276             var title = rec[SurveyRazor.dataStore.mapFields.Name];277             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];278             var IsMoreSlc = rec[SurveyRazor.dataStore.mapFields.IsMoreSlc];279 280             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_281             var content = SurveyRazor.htmlTemplate.questionHead;282             content = content.replace("{seq}", seq); //序号283             content = content.replace("{id}", Id); //Id284             content = content.replace("{headTitle}", title) //题干内容285             var extend = "";286             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填287             extend += IsMoreSlc ? SurveyRazor.htmlTemplate.moreSelc : ""; //[多选题]288 289             if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {290                 extend += "<span class=‘clrBtn‘ id=‘clr_" + Id + "‘ style=‘ color:rgb(153,51,0);cursor:pointer;font-size:12px;display:none;‘"291                        + " onclick=SurveyRazor.surveyRazor.clearChecked(\"" + Id + "\") ;‘>【清除】</span>";292 293             }294             content = content.replace("{extend}", extend);295             var wrapHtml = SurveyRazor.htmlTemplate.radioOrCheckboxWrap;296             wrapHtml = wrapHtml.replace("{id}", "w_" + Id);297 298             //添加选择项299             var gItemHtml = "", pingLun = []; //pingLun:评论项300             var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);301             for (var j = 0; j < childNodeArrs.length; j++) {302                 var childRec = childNodeArrs[j];303                 if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.评论) { //如果是评论项304                     pingLun.push(childRec);305                     continue;306                 }307                 var itemHtml = "";308                 if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {309                     if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选说明) {310                         itemHtml = SurveyRazor.htmlTemplate.radioAdd;311                         itemHtml = itemHtml.replace("{rel}", childRec[SurveyRazor.dataStore.mapFields.Id]); //关联的Id312                         itemHtml = itemHtml.replace("{extendValue}", "")313                     } else {314                         itemHtml = SurveyRazor.htmlTemplate.radio;315                         itemHtml = itemHtml.replace("{onclick}", "SurveyRazor.surveyRazor.showClrBtn(\"" + Id + "\")")316                     }317                 } else if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选) {318                     if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选说明) {319                         itemHtml = SurveyRazor.htmlTemplate.checkboxAdd;320                         itemHtml = itemHtml.replace("{rel}", childRec[SurveyRazor.dataStore.mapFields.Id]);321                         itemHtml = itemHtml.replace("{extendValue}", "")322                     } else {323                         itemHtml = SurveyRazor.htmlTemplate.checkbox;324                     }325                 }326 327                 itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);328                 itemHtml = itemHtml.replace("{name}", Id);329                 itemHtml = itemHtml.replace("{value}", childRec[SurveyRazor.dataStore.mapFields.Name]);330                 //验证规则331                 itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "")332                 //选项名称333                 itemHtml = itemHtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]);334 335                 if (rec[SurveyRazor.dataStore.mapFields.Layout] == "moreCln") {336                     //需要自动计算列宽337                     var width = parseInt($("body").width() || 700); //默认为700338                     var length = childNodeArrs.length;339                     var parcent = Number(parseFloat(1 / (length > 7 ? 7 : length) * 100)).toFixed(3);340                     itemHtml = "<li style=\"width: " + parcent + "%;\">" + itemHtml + "</li>";341                 } else {//单列布局342                     itemHtml = "<li style=\"width: 99%;\">" + itemHtml + "</li>";343                 }344                 gItemHtml += itemHtml;345             }346             //评论项347             var pinlunItemHtml = "";348             for (var i = 0; i < pingLun.length; i++) {349                 var childRec = pingLun[i];350                 var html = SurveyRazor.htmlTemplate.discussInput;351                 html = html.replace("{name}", Id);352                 html = html.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);353                 html = html.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");354                 pinlunItemHtml += html;355             }356             wrapHtml = wrapHtml.replace("{discuss}", pinlunItemHtml); //添加评论357             wrapHtml = wrapHtml.replace("{items}", gItemHtml);358             tigan = tigan.replace("{content}", content + wrapHtml);359             return tigan;360         },361 362         /*363         *下拉选择364         *365         */366         combox: function (rec, seq) {367             var Id = rec[SurveyRazor.dataStore.mapFields.Id];368             var title = rec[SurveyRazor.dataStore.mapFields.Name];369             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];370 371             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_372             var content = SurveyRazor.htmlTemplate.questionHead;373             content = content.replace("{seq}", seq); //序号374             content = content.replace("{id}", Id); //Id375             content = content.replace("{headTitle}", title) //题干内容376             var extend = "";377             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填378 379             content = content.replace("{extend}", extend);380             var wrapHtml = SurveyRazor.htmlTemplate.comboxSlt;381             wrapHtml = wrapHtml.replace("{id}", "w_" + Id);382             wrapHtml = wrapHtml.replace("{id}", Id);383             wrapHtml = wrapHtml.replace("{name}", Id);384 385             //添加子项386             var gItemHtml = "<option value=http://www.mamicode.com/‘‘>请选择...";387             var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);388             for (var j = 0; j < childNodeArrs.length; j++) {389                 var childRec = childNodeArrs[j];390                 var itemHtml = "<option value=http://www.mamicode.com/‘" + childRec[SurveyRazor.dataStore.mapFields.Id] + "‘>"391                                 + childRec[SurveyRazor.dataStore.mapFields.Name]392                                 + "</option>";393                 gItemHtml += itemHtml;394             }395             wrapHtml = wrapHtml.replace("{option}", gItemHtml);396             tigan = tigan.replace("{content}", content + wrapHtml);397             return tigan;398         },399         /**400         * 文本输入401         */402         bigTextarea: function (rec, seq) {403             var Id = rec[SurveyRazor.dataStore.mapFields.Id];404             var title = rec[SurveyRazor.dataStore.mapFields.Name];405             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];406 407             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_408             var content = SurveyRazor.htmlTemplate.questionHead;409             content = content.replace("{seq}", seq); //序号410             content = content.replace("{id}", Id); //Id411             content = content.replace("{headTitle}", title) //题干内容412             var extend = "";413             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填414 415             content = content.replace("{extend}", extend);416             var wrapHtml = SurveyRazor.htmlTemplate.bigInput;417             wrapHtml = wrapHtml.replace("{id}", "w_" + Id);418             wrapHtml = wrapHtml.replace("{id}", Id);419             wrapHtml = wrapHtml.replace("{value}", "");420             wrapHtml = wrapHtml.replace("{name}", Id);421             wrapHtml = wrapHtml.replace("{title}", ""); //提示,暂时为空422             wrapHtml = wrapHtml.replace("{validation}", rec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则423             tigan = tigan.replace("{content}", content + wrapHtml);424             return tigan;425         },426         smallTextarea: function (rec, seq) {427             var Id = rec[SurveyRazor.dataStore.mapFields.Id];428             var title = rec[SurveyRazor.dataStore.mapFields.Name];429             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];430 431             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_432             var content = SurveyRazor.htmlTemplate.questionHead;433             content = content.replace("{seq}", seq); //序号434             content = content.replace("{id}", Id); //Id435             content = content.replace("{headTitle}", title) //题干内容436             var extend = "";437             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填438             content = content.replace("{extend}", extend);439 440             if (rec[SurveyRazor.dataStore.mapFields.IsLeaf]) { //如果是子节点441                 var wrapHtml = SurveyRazor.htmlTemplate.fillInput;442                 wrapHtml = wrapHtml.replace("{id}", "w_" + Id);443                 wrapHtml = wrapHtml.replace("{id}", Id);444                 wrapHtml = wrapHtml.replace("{name}", Id);445                 wrapHtml = wrapHtml.replace("{validation}", rec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则446                 wrapHtml = wrapHtml.replace("{title}", ""); //提示,暂时为空447                 tigan = tigan.replace("{content}", content + wrapHtml);448                 return tigan;449             } else if (!rec[SurveyRazor.dataStore.mapFields.IsLeaf]) {450                 //还有子节点451                 var wrapHtml = SurveyRazor.htmlTemplate.fillInputWrap;452                 wrapHtml = wrapHtml.replace("{id}", "w_" + Id);453                 //处理子节点454                 var gItemHtml = "";455                 var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);456                 for (var j = 0; j < childNodeArrs.length; j++) {457                     var childRec = childNodeArrs[j];458                     var itemHtml = SurveyRazor.htmlTemplate.fillInputItem;459                     itemHtml = itemHtml.replace("{title}", (j > 0 ? "&nbsp;" : "") + childRec[SurveyRazor.dataStore.mapFields.Name] + ":");460                     itemHtml = itemHtml.replace("{tip}", ""); //提示暂时为空461                     itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");462                     itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);463                     itemHtml = itemHtml.replace("{value}", "");464                     itemHtml = itemHtml.replace("{name}", childRec[SurveyRazor.dataStore.mapFields.Id]);465                     gItemHtml += itemHtml;466                 }467                 wrapHtml = wrapHtml.replace("{content}", gItemHtml);468                 tigan = tigan.replace("{content}", content + wrapHtml);469                 return tigan;470             }471         },472         /***473         ** 排序题474         ** 475         **/476         sortQuestion: function (rec, seq) {477             var Id = rec[SurveyRazor.dataStore.mapFields.Id];478             var title = rec[SurveyRazor.dataStore.mapFields.Name];479             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];480 481             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_482             var content = SurveyRazor.htmlTemplate.questionHead;483             content = content.replace("{seq}", seq); //序号484             content = content.replace("{id}", Id); //Id485             content = content.replace("{headTitle}", title) //题干内容486             var extend = "";487             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填488             extend += "<span>【排序题】</span>";489             content = content.replace("{extend}", extend);490 491             var body = SurveyRazor.htmlTemplate.sortQuestion.body;492 493             //子项494             var gItemHtml = "";495             var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);496             for (var j = 0; j < childNodeArrs.length; j++) {497                 var childRec = childNodeArrs[j];498                 var itemHtml = SurveyRazor.htmlTemplate.sortQuestion.checkItem;499                 itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);500                 itemHtml = itemHtml.replace("{rel}", Id);501                 itemHtml = itemHtml.replace("{value}", "");502                 itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");503                 itemHtml = itemHtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]);504                 gItemHtml += itemHtml;505             }506             //textarea 区域507             var sortArea = SurveyRazor.htmlTemplate.sortQuestion.sortArea;508             sortArea = sortArea.replace("{id}", Id);509             sortArea = sortArea.replace("{name}", Id);510             sortArea = sortArea.replace("{width}", 170);511             sortArea = sortArea.replace("{size}", 6);512             sortArea = sortArea.replace("{height}", (childNodeArrs.length <= 6) ? 120 : (childNodeArrs.length * 22));513 514             body = body.replace("{id}", "w_" + Id);515             body = body.replace("{checkItem}", gItemHtml);516             body = body.replace("{sortArea}", sortArea);517             body = body.replace("{rel}", Id).replace("{rel}", Id).replace("{rel}", Id).replace("{Id}", Id); //排序按钮518 519             tigan = tigan.replace("{content}", content + body);520             return tigan;521         },522         /**523         * 大类别524         */525         bigType: function (rec, seq) {526             var Id = rec[SurveyRazor.dataStore.mapFields.Id];527             var title = rec[SurveyRazor.dataStore.mapFields.Name];528             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];529 530             var html = SurveyRazor.htmlTemplate.questionBigType;531             html = html.replace("{content}", title);532             return html;533         },534         /**535         *  矩阵题536         */537         matrix: function (rec, seq) {538             var Id = rec[SurveyRazor.dataStore.mapFields.Id];539             var title = rec[SurveyRazor.dataStore.mapFields.Name];540             var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];541 542             var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_543             var content = SurveyRazor.htmlTemplate.questionHead;544             content = content.replace("{seq}", seq); //序号545             content = content.replace("{id}", Id); //Id546             content = content.replace("{headTitle}", title) //题干内容547             var extend = "";548             extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填549             content = content.replace("{extend}", extend);550             //topcln title551             var theadArr = rec[SurveyRazor.dataStore.mapFields.Extend];552             var theadHtml = "";553             for (var i = 0; i < theadArr.length; i++) {554                 var childRec = theadArr[i];555                 var headhtml = SurveyRazor.htmlTemplate.matrix.titleTd;556                 headhtml = headhtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]);557                 theadHtml += headhtml;558             }559 560             //判断是单选还是多选561             var itemHtml = "<input type=\"{type}\" id=‘{id}‘ value=http://www.mamicode.com/"{value}\" class=‘ {validation}‘ selfId=\"{selfId}\" name=\"{name}\" />";562             if (theadArr.length >= 0) {563                 if (theadArr[0][SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选) {564                     itemHtml = itemHtml.replace("{type}", "checkbox");565                 }566                 if (theadArr[0][SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {567                     itemHtml = itemHtml.replace("{type}", "radio");568                 }569             } else {570                 itemHtml = itemHtml.replace("{type}", "radio");571             }572 573             //子项574             var gItemHtml = "";575             var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);576             for (var j = 0; j < childNodeArrs.length; j++) {577                 var childRec = childNodeArrs[j];578                 var childHtml = SurveyRazor.htmlTemplate.matrix.item;579                 childHtml = childHtml.replace("{rowindex}", j);580                 childHtml = childHtml.replace("{leftTitle}", childRec[SurveyRazor.dataStore.mapFields.LName] || "");581                 childHtml = childHtml.replace("{rightTitle}", childRec[SurveyRazor.dataStore.mapFields.RName] || "");582 583                 //584                 var clnHtml = "";585                 for (var k = 0; k < theadArr.length; k++) {586                     var clnRec = theadArr[k];587                     var tdHtml = SurveyRazor.htmlTemplate.matrix.contentTd;588                     var tempHtml = itemHtml;589                     tempHtml = tempHtml.replace("{id}", clnRec[SurveyRazor.dataStore.mapFields.Id]);590                     tempHtml = tempHtml.replace("{value}", clnRec[SurveyRazor.dataStore.mapFields.Name]);591                     tempHtml = tempHtml.replace("{name}", childRec[SurveyRazor.dataStore.mapFields.Id]); //hang592                     tempHtml = tempHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则593                     tempHtml = tempHtml.replace("{selfId}", clnRec[SurveyRazor.dataStore.mapFields.Id]);594                     if (j < childNodeArrs.length - 1) { //设置下划线595                         tdHtml = tdHtml.replace("##line##", "div_matrix_bottomline");596                     }597                     tdHtml = tdHtml.replace("{content}", tempHtml);598                     clnHtml += tdHtml;599                 }600                 //601                 childHtml = childHtml.replace("{items}", clnHtml);602                 gItemHtml += childHtml;603             }604 605             //body606             var body = SurveyRazor.htmlTemplate.matrix.body;607             body = body.replace("{head}", theadHtml);608             body = body.replace("{id}", "w_" + Id);609             body = body.replace("{items}", gItemHtml);610             tigan = tigan.replace("{content}", content + body)611             //finally html612             return tigan;613         },614         create: function (option) {615             if (option == undefined || option == "") {616                 this.options()617             }618             if (SurveyRazor.dataStore.globalData.length <= 0) {619                 throw new Error("请配置数据源");620                 return;621             }622             var divHtml = "<form id=‘aspnetForm‘>"623                         + "<div class=\"rootDiv\" style=\"margin: 0px; padding: 0px; text-align: left;display:none; \">"624                         + "<div class=‘header‘><label>{header}</label></div>"625                         + "<div class=‘surveyTitle‘ style=\"text-align: center; height: 30px; margin: 10px 0px;"626                         + "margin-bottom: 0px;\">"627                         + "<label style=\"font-weight: bolder;font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; font-size: 16px;\">{surveyTitle}</label></div>"628                         + "<div class=\"descript\" "629                         + "style=\"margin-bottom: 1px; padding-top: 12px; padding-bottom: 12px;border-top: 1px solid gray; border-left: 1px solid gray;"630                         + "border-right: 1px solid gray;\"><label>{content}</label></div>"631                         + "<div class=\"survey\" style=\"margin: 0px auto; width: 700px\">"632                         + "<div id=\"contentPlaceHolder1\" class=\"surveycontent\">"633                         + "<div id=\"surveyContent\"></div>"634                         + "</div></div>"635                         + "<div style=\"width:100.3%; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 1px;"636                         + "background-color: rgb(224,224,224  );\">"637                         + "<div style=\"margin-left: 38%; margin-right: 38%; padding-top: 5px; padding-bottom: 5px;\">"638                         + "<input type=\"button\" id=\"submit\" value=http://www.mamicode.com/"  提交\" "639                         + "style=\"cursor:pointer;width: 60px; height: 28px; background-image: url(./SurveyRazor/img/submit.gif);"640                         + "background-repeat: no-repeat; background-position: left center;\" />&nbsp;&nbsp;&nbsp;"641                         + "<input type=\"button\" id=\"cancel\" value=http://www.mamicode.com/"  取消\" "642                         + "style=\"cursor:pointer;width: 60px; height: 28px; background-image: url(./SurveyRazor/img/cancel.png);"643                         + "background-repeat: no-repeat; background-position: left center;\" /></div></div>"644                         + "</div></form>";645             divHtml = divHtml.replace("{header}", this.config.header || "");           //问卷眉头646             divHtml = divHtml.replace("{surveyTitle}", this.config.surveyTitle || ""); //问卷标题647             divHtml = divHtml.replace("{content}", this.config.description || "");     //描述648             $("body").addClass("bodyDiv").append(divHtml);  //追加隐藏649 650             //1设置问卷头部651             // -------------------------652             //题型渲染653             var htmlContainer = "";654             var records = SurveyRazor.dataStore.getTiGanArr();655             for (var i = 0; i < records.length; i++) {656                 var recObj = records[i];657                 switch (recObj[this.config.mapFields.TypeCode]) {658                     case SurveyRazor.typeSign.大类别:659                         var html = this.bigType.call(this, recObj, i + 1);660                         htmlContainer += html;661                         break;662                     case SurveyRazor.typeSign.单选:663                     case SurveyRazor.typeSign.多选:664                         var html = this.radioOrCheckbox.call(this, recObj, i + 1);665                         htmlContainer += html;666                         break;667                     case SurveyRazor.typeSign.下拉:668                         var html = this.combox.call(this, recObj, i + 1);669                         htmlContainer += html;670                         break;671                     case SurveyRazor.typeSign.填写:672                         var html = this.bigTextarea.call(this, recObj, i + 1);673                         htmlContainer += html;674                         break;675                     case SurveyRazor.typeSign.填空:676                         var html = this.smallTextarea.call(this, recObj, i + 1);677                         htmlContainer += html;678                         break;679                     case SurveyRazor.typeSign.排序:680                         var html = this.sortQuestion.call(this, recObj, i + 1);681                         htmlContainer += html;682                         break;683                     case SurveyRazor.typeSign.矩阵:684                         var html = this.matrix.call(this, recObj, i + 1);685                         htmlContainer += html;686                         break;687 688                 }689             }690             $("#surveyContent").append(htmlContainer);691 692             //2设置问卷尾部693             return this;694         },695         /*696         *设置背景图片697         */698         setBgImg: function () {699             if (this.config.haveBgImg) {700                 $("body").css({ "background-image": "url(" + this.config.bgImg + ")"701                 })702             }703             return this;704         },705         show: function () {706             $(".rootDiv").show();707             $("head").append("<script src=http://www.mamicode.com/‘./SurveyRazor/jquery.validationEngine.min.js‘ type=‘text/javascript‘>" + "<" + "/" + "script>");708             window.setTimeout(function () {709                 $("#aspnetForm").validationEngine({710                     onSuccess: function () {711                         alert(true);712                     },713                     onFailure: function () {714                         alert("验证未通过!");715                     },716                     scroll: true717                 });718 719             }, 100);720             this.setBgImg();721             return this;722         }723     }724 }

 实现的效果图如下:

图二:

  

版权所有,请尊重作者汗水, 如若用于商业,请联系作者.