首页 > 代码库 > 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: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">親愛的客戶，</span>17 </p>18 <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">19 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">感謝您一直以來的支持與厚愛。</span>20 </p>21 <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">22 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; 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: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">請針對2014年第1季度的服務狀況進行評價</span>26 </p>27 <p style=\"text-align: center;\">28 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; 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(''); 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;\"> *(必填)</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 ? " " : "") + 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: 微软雅黑, 'Microsoft YaHei'; 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;\" /> "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 }
实现的效果图如下:
图二:
版权所有,请尊重作者汗水, 如若用于商业,请联系作者.
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。