脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html XMlns="https://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 <link href="SurveyRazor/css/surveyq.css" rel="stylesheet" type="text/css" />
8 <link href="SurveyRazor/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
9 <script src="SurveyRazor/jquery-1.6.min.js" type="text/javascript"></script>
10 <script src="SurveyRazor/SurveyRaZor.js" type="text/javascript"></script>
11 <script src="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;/">H鄣目簦</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;/">感x您一直以淼闹С峙c厚邸</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;/">榱烁玫靥嵘的服眨 邀您ξ的服者M行ur。您的urc意，助我提供更加|的服眨</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季度的服rM行ur</span>/
26 </p>/
27 <p style=/"text-align: center;/">/
28 <span style=/"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;/">您配合在3月26日前回,xx。收集窗口： </span>/
29 </p>";
30 SurveyRazor.dataStore.load(data);
31 SurveyRazor.surveyRazor.options({
32 description: desc, //描述
33 haveBgimg: false, //启用背景图片
34 surveyTitle: "客M意度{查表"
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: "<p class='qType'>"
17 + "<label style=/"display: block; padding-top: 7px;/">{content}</label></p>",
18 //题的Div
19 qustionBody: "<p class=/"p_question/" id=/"{id}/">{content}</p>",
20 //题的题干
21 questionHead: "<p class=/"p_title_question_all/">"
22 + "<p class=/"p_topic_question/"><b>{seq}.</b></p>"
23 + "<p id=/"{id}/" class=/"p_title_question/">"
24 + "{headTitle}{extend}</p>"
25 + "<p style=/"clear: both;/"></p></p>",
26
27 //单选类型,单选项选项补充
28 radio: "<input type=/"radio/" name=/"{name}/" id=/"{id}/" value=/"{value}/" class=/" {validation}/" onclick='{onclick};' /><label for=/"{for}/">{content}</label>",
29 radioAdd: "<input type=/"radio/" name=/"{name}/" id=/"{id}/" value=/"{value}/" class=/" {validation}/" ><label for=/"{for}/" style=/"display: inline-block;/">{content}</label>"
30 + "<input class=/"underline itemExtend/" type=/"text/" value=/"{extendValue}/" rel=/"{rel}/" "
31 + "style=/"color: rgb(153, 153, 153); position: static;/">",
32 itemAppend: "<input class=/"underline itemExtend/" type=/"text/" value=/"{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=/"{value}/" class=/" {validation}/" /><label for=/"{for}/">{content}</label>",
36 checkboxAdd: "<input type=/"checkbox/" name=/"{name}/" id=/"{id}/" value=/"{value}/" class=/" {validation}/" ><label for=/"{for}/" style=/"display: inline-block;/">{content}</label>"
37 + "<input class=/"underline itemExtend/" type=/"text/" value=/"{extendValue}/" rel=/"{rel}/" "
38 + "style=/"color: rgb(153, 153, 153); position: static;/">",
39 //包裹的元素
40 radioOrCheckboxWrap: "<p class=/"p_table_radio_question/" id=/"{id}/">"
41 + "<p class=/"p_table_clear_top/"></p>"
42 + " <ul class=/"ulradiocheck/">{items}<p style=/"clear: both;/"></p></ul>{discuss}</p>",
43 //填空题
44 fillInput: "<p class=/"p_table_radio_question/" id=/"{id}/"><p class=/"p_table_clear_top/"></p>"
45 + "<textarea class=/"inputtext {validation}/" style=/"overflow: auto; width: 62%; height: 22px;/" "
46 + " title='{title}' id=/"{id}/" name=/"{name}/" value='{value}'></textarea>"
47 + "<p class=/"p_table_clear_bottom/"></p></p>",
48
49 fillInputWrap: "<p class=/"p_table_radio_question/" id=/"{id}/"><p class=/"p_table_clear_top/"></p>"
50 + "{content}<p class=/"p_table_clear_bottom/"></p></p>",
51 fillInputItem: "<label>{title}</label>"
52 + "<textarea title=/"{tip}/" style=/"overflow: auto; width: 20%; height: 22px;/" "
53 + " class=/"inputtext {validation}/" value='{value}' id=/"{id}/" name=/"{name}/"></textarea>",
54
55
56 //大填空题
57 bigInput: " <p class=/"p_table_radio_question/" id=/"{id}/"><p class=/"p_table_clear_top/"></p>"
58 + "<textarea class=/"inputtext {validation}/" style=/"overflow: auto; width: 62%;/" rows=/"3/" "
59 + "id='{id}' value='{value}' name='{name}' title='{title}' ></textarea>"
60 + "<p style=/"clear: both;/"></p>"
61 + "<p class=/"p_table_clear_bottom/"></p></p>",
62 //评论框
63 discussInput: "<ul class=/"ulradiocheck/">"
64 + "<p style=/"float: left; padding: 1px; margin-top: 12px; margin-right: 5px; border: 1px solid gray/">"
65 + "<span>评论</span> </p>"
66 + "<textarea style=/"width: 60%/" rows=/"3/" name='{name}' class=/"inputtext {validation}/" id='{id}' for='{for}' ></textarea>"
67 + "<p style=/"clear: both;/"></p>"
68 + "</ul>",
69 //下拉选择题
70 comboxslt: " <p class=/"p_table_radio_question/" id=/"{id}/"><p class=/"p_table_clear_top/"></p>"
71 + "<select id=/"{id}/" name=/"{name}/">{option}</select>"
72 + "<p style=/"clear: both;/"></p>"
73 + "<p class=/"p_table_clear_bottom/"></p></p>",
74 //排序题
75 sortQuestion: {
76 checkItem: "<li style=/"float: none;/" class=/"lisort/">"
77 + "<input id=/"{id}/" type=/"checkbox/" rel=/"{rel}/" value=/"{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: "<p class=/"p_table_radio_question/" id=/"{id}/" ><p class=/"p_table_clear_top/"></p>"
81 + "<p style=/"width: 90%;/">"
82 + "<ul style=/"float: left;/">{checkItem}</ul>"
83 + "<table style=/"float: left;/"><tbody>"
84 + "<tr>"
85 + "<td verticalalign=/"center/">"
86 + "<p style=/"margin-left: 10px;/">{sortArea}</p>"
87 + "</td>"
88 + "<td verticalalign=/"center/">"
89 + "<p class=/"qButton/">"
90 + "<ul>"
91 + "<li><a rel=/"{rel}/" class=/"goTop/" href=/"javascript：void(0);/" name=/"First/">移至最前</a></li>"
92 + "<li><a rel=/"{rel}/" href=/"javascript：void(0);/" class=/"upMove/" name=/"up/">上移一位</a></li>"
93 + "<li style=/"margin-top: 10px/"><a rel=/"{rel}/" href=/"javascript：void(0);/" class=/"downMove/" name=/"down/">下移一位</a> </li>"
94 + "<li><a rel=/"{rel}/" class=/"goBottom/" href=/"javascript：void(0);/" name=/"last/">移至最后</a>"
95 + "</li>"
96 + "</ul>"
97 + "</p></td>"
98 + "</tr>"
99 + "</tbody></table>"
100 + "<p style=/"clear: both;/"></p></p></p>"
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: "<p class=/"p_table_radio_question/" id=/"{id}/"><p class='p_table_clear_top'></p>"
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 + "<p class=/"p_table_clear_bottom/"></p></p>"
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", //Path
161 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 return
254 }
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); //Id
284 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]); //关联的Id
312 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); //默认为700
338 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); //Id
375 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=''>请选择...</option>";
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='" + 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];
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); //Id
411 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); //Id
435 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); //Id
485 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); //Id
546 content = content.replace("{headTitle}", title) //题干内容
547 var extend = "";
548 extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填
549 content = content.replace("{extend}", extend);
550 //topcln title
551 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=/"{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]); //hang
592 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##", "p_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 //body
606 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 html
612 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 pHtml = "<form id='aspnetForm'>"
623 + "<p class=/"rootDiv/" style=/"margin: 0px; padding: 0px; text-align: left;display:none; /">"
624 + "<p class='header'><label>{header}</label></p>"
625 + "<p 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></p>"
628 + "<p 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></p>"
631 + "<p class=/"survey/" style=/"margin: 0px auto; width: 700px/">"
632 + "<p id=/"contentPlaceHolder1/" class=/"surveycontent/">"
633 + "<p id=/"surveyContent/"></p>"
634 + "</p></p>"
635 + "<p style=/"width:100.3%; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 1px;"
636 + "background-color: rgb(224,224,224 );/">"
637 + "<p style=/"margin-left: 38%; margin-right: 38%; padding-top: 5px; padding-bottom: 5px;/">"
638 + "<input type=/"button/" id=/"submit/" value=/" 提交/" "
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=/" 取消/" "
642 + "style=/"cursor:pointer;width: 60px; height: 28px; background-image: url(./SurveyRazor/img/cancel.png);"
643 + "background-repeat: no-repeat; background-position: left center;/" /></p></p>"
644 + "</p></form>";
645 pHtml = pHtml.replace("{header}", this.config.header || ""); //问卷眉头
646 pHtml = pHtml.replace("{surveyTitle}", this.config.surveyTitle || ""); //问卷标题
647 pHtml = pHtml.replace("{content}", this.config.description || ""); //描述
648 $("body").addClass("bodyDiv").append(pHtml); //追加隐藏
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='./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: true
717 });
718
719 }, 100);
720 this.setBgImg();
721 return this;
722 }
723 }
724 }
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JavasScript实现调查问卷插件全部内容，希望文章能够帮你解决javascript代码实例教程-JavasScript实现调查问卷插件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。