JavasScript实现调查问卷插件
鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来与各程序员共享,聊以自慰.
前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Aim.Examining.Web.SurveyUI.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="SurveyRazor/css/surveyq.css" rel="stylesheet" type="text/css" />
<link href="SurveyRazor/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="SurveyRazor/jquery-1.6.min.js" type="text/javascript"></script>
<script src="SurveyRazor/SurveyRaZor.js" type="text/javascript"></script>
<script src="JsonData.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { var desc = "<p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\
<span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">親愛的客戶，</span>\
</p>\
<p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\
<span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">感謝您一直以來的支持與厚愛。</span>\
</p>\
<p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\
<span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">為了更好地提升我們的服務， 邀請您對我們的服務進行評價。您的評價與意見，將幫助我們提供更加優質的服務！</span>\
</p>\
<p style=\"white-space: normal; background-color: rgb(255, 255, 255); text-align: center;\">\
<span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">請針對2014年第1季度的服務狀況進行評價</span>\
</p>\
<p style=\"text-align: center;\">\
<span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">請您配合在3月26日前回復,謝謝。收集窗口： </span>\
</p>";
SurveyRazor.dataStore.load(data);
SurveyRazor.surveyRazor.options({
description: desc, //描述
haveBgImg: false, //启用背景图片
surveyTitle: "客戶滿意度調查表"
}).create().show();
});
</script>
</head>
<body style="margin: 0 auto; background-image: url(''); width: 700px;">
</body>
</html>
Js代码如下:
/*
*SurveyRazor.js 问卷渲染引擎
*Version:RW_1.1
*Author:WGM
*Data:2014-6-20
*/
var SurveyRazor = { /*html模版*/
htmlTemplate: {
//必填
mustFill: "<span style=\"color: red;\"> *(必填)</span>",
//多选
moreSelc: "<span>[多选题]</span>",
//问卷大分类
questionBigType: "<div class='qType'>"
+ "<label style=\"display: block; padding-top: 7px;\">{content}</label></div>",
//题的Div
qustionBody: "<div class=\"div_question\" id=\"{id}\">{content}</div>",
//题的题干
questionHead: "<div class=\"div_title_question_all\">"
+ "<div class=\"div_topic_question\"><b>{seq}.</b></div>"
+ "<div id=\"{id}\" class=\"div_title_question\">"
+ "{headTitle}{extend}</div>"
+ "<div style=\"clear: both;\"></div></div>", //单选类型,单选项选项补充
radio: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" onclick='{onclick};' /><label for=\"{for}\">{content}</label>",
radioAdd: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>"
+ "<input class=\"underline itemExtend\" type=\"text\" value=\"{extendValue}\" rel=\"{rel}\" "
+ "style=\"color: rgb(153, 153, 153); position: static;\">",
itemAppend: "<input class=\"underline itemExtend\" type=\"text\" value=\"{value}\" rel=\"{rel}\" name=\"{name}\" "
+ "style=\"color: rgb(153, 153, 153); position: static;\">",
//多选类型,多选项补充
checkbox: "<input id=\"{id}\" type=\"checkbox\" name=\"{name}\" value=\"{value}\" class=\" {validation}\" /><label for=\"{for}\">{content}</label>",
checkboxAdd: "<input type=\"checkbox\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>"
+ "<input class=\"underline itemExtend\" type=\"text\" value=\"{extendValue}\" rel=\"{rel}\" "
+ "style=\"color: rgb(153, 153, 153); position: static;\">",
//包裹的元素
radioOrCheckboxWrap: "<div class=\"div_table_radio_question\" id=\"{id}\">"
+ "<div class=\"div_table_clear_top\"></div>"
+ " <ul class=\"ulradiocheck\">{items}<div style=\"clear: both;\"></div></ul>{discuss}</div>",
//填空题
fillInput: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>"
+ "<textarea class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%; height: 22px;\" "
+ " title='{title}' id=\"{id}\" name=\"{name}\" value='{value}'></textarea>"
+ "<div class=\"div_table_clear_bottom\"></div></div>", fillInputWrap: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>"
+ "{content}<div class=\"div_table_clear_bottom\"></div></div>",
fillInputItem: "<label>{title}</label>"
+ "<textarea title=\"{tip}\" style=\"overflow: auto; width: 20%; height: 22px;\" "
+ " class=\"inputtext {validation}\" value='{value}' id=\"{id}\" name=\"{name}\"></textarea>", //大填空题
bigInput: " <div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>"
+ "<textarea class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%;\" rows=\"3\" "
+ "id='{id}' value='{value}' name='{name}' title='{title}' ></textarea>"
+ "<div style=\"clear: both;\"></div>"
+ "<div class=\"div_table_clear_bottom\"></div></div>",
//评论框
discussInput: "<ul class=\"ulradiocheck\">"
+ "<div style=\"float: left; padding: 1px; margin-top: 12px; margin-right: 5px; border: 1px solid gray\">"
+ "<span>评论</span> </div>"
+ "<textarea style=\"width: 60%\" rows=\"3\" name='{name}' class=\"inputtext {validation}\" id='{id}' for='{for}' ></textarea>"
+ "<div style=\"clear: both;\"></div>"
+ "</ul>",
//下拉选择题
comboxSlt: " <div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>"
+ "<select id=\"{id}\" name=\"{name}\">{option}</select>"
+ "<div style=\"clear: both;\"></div>"
+ "<div class=\"div_table_clear_bottom\"></div></div>",
//排序题
sortQuestion: {
checkItem: "<li style=\"float: none;\" class=\"lisort\">"
+ "<input id=\"{id}\" type=\"checkbox\" rel=\"{rel}\" value=\"{value}\" class=\" {validation}\" style=\"color: rgb(153, 153, 153);\" />"
+ "<label for=\"{for}\">{content}</label></li>",
sortArea: "<select size=\"{size}\" id='{id}' name='{name}' style=\"width:{width}px; overflow: auto; height:{height}px;\"></select>",
body: "<div class=\"div_table_radio_question\" id=\"{id}\" ><div class=\"div_table_clear_top\"></div>"
+ "<div style=\"width: 90%;\">"
+ "<ul style=\"float: left;\">{checkItem}</ul>"
+ "<table style=\"float: left;\"><tbody>"
+ "<tr>"
+ "<td verticalalign=\"center\">"
+ "<div style=\"margin-left: 10px;\">{sortArea}</div>"
+ "</td>"
+ "<td verticalalign=\"center\">"
+ "<div class=\"qButton\">"
+ "<ul>"
+ "<li><a rel=\"{rel}\" class=\"goTop\" href=\"javascript:void(0);\" name=\"first\">移至最前</a></li>"
+ "<li><a rel=\"{rel}\" href=\"javascript:void(0);\" class=\"upMove\" name=\"up\">上移一位</a></li>"
+ "<li style=\"margin-top: 10px\"><a rel=\"{rel}\" href=\"javascript:void(0);\" class=\"downMove\" name=\"down\">下移一位</a> </li>"
+ "<li><a rel=\"{rel}\" class=\"goBottom\" href=\"javascript:void(0);\" name=\"last\">移至最后</a>"
+ "</li>"
+ "</ul>"
+ "</div></td>"
+ "</tr>"
+ "</tbody></table>"
+ "<div style=\"clear: both;\"></div></div></div>"
}, //矩阵题
matrix: {
titleTd: "<td align=\"center\">{content}</td>",
contentTd: "<td align=\"center\" class=\"##line##\" style=\"cursor: pointer;\">{content}</td>",
item: "<tr align=\"left\" rowindex=\"{rowindex}\" >"
+ "<th class=\"rowth\" align=\"left\" style=\"\">{leftTitle}</th>"
+ "{items}<th class=\"rowth\" align=\"left\" style=\"\">{rightTitle}</th></tr>", body: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class='div_table_clear_top'></div>"
+ "<table style=\"width: 100%;\" border=\"0px\" cellpadding=\"5\" cellspacing=\"0\">"
+ "<thead><tr><th></th>{head}</tr></thead>"
+ "<tbody><tr align=\"left\">{items}"
+ "</tbody></table>"
+ "<div class=\"div_table_clear_bottom\"></div></div>"
}
},
//包括标题,页眉, 描述
headBar: {
title: ""
},
//提交工具栏
submitBar: {
title: ""
}, typeSign: { //题目类型
"大类别": "BIGTYPE",
"矩阵": "JUZHEN",
"单选": "DANXUAN",
"多选": "DUOXUAN",
"下拉": "XIALA",
"评论": "PINGLUN",
"排序": "PAIXU",
"填空": "TIANKONG",
"填写": "TIANXIE",
"图片单选": "TUPIANDANXUAN",
"图片多选": "TUPIANDUOXUAN",
"单选说明": "DANXUANSHUOMING",
"多选说明": "DUOXUANSHUOMING"
},
dataStore: {
globalData: [],
mapFields: {
isInit: false, //是否初始化
Id: "Id",
Name: "Name",
LName: "LName", //用于矩阵题 (左侧名称)
RName: "RName",
SortIndex: "SortIndex",
Type: "Type",
TypeCode: "TypeCode",
IsMoreSlc: "IsMoreSlc", //多选
IsMustSlc: "IsMustSlc", //必选
IsTiGan: "IsTiGan", //是否为题干
ValidateRule: "ValidateRule", //验证规则
Layout: "Layout", //横向,纵向
ParentId: "ParentId",
Path: "Path", //Path
IsLeaf: "IsLeaf", //是否子节点
Extend: "Extend", //扩展信息
Ext1: ""
},
configFields: function (option) {
var option = $.extend(this.mapFields, option || {});
this.mapFields = option;
this.mapFields.isInit = true;
return option;
}, //获取子节点
getChildsById: function (id) {
if (this.globalData.length <= 0) {
throw new Error("dataStore数据集无数据");
return;
}
var tempArr = [];
for (var i = 0; i < this.globalData.length; i++) {
if (this.globalData[i][this.mapFields.ParentId] == id) {
tempArr.push(this.globalData[i]);
}
}
return tempArr;
},
//获取题干
getTiGanArr: function () {
if (!$.isArray(this.globalData)) {
throw new Error("数据源为空");
return;
}
var arr = [];
for (var i = 0; i < this.globalData.length; i++) {
if (this.globalData[i][this.mapFields.IsTiGan]) {
arr.push(this.globalData[i]);
}
}
return arr;
},
//加载数据
load: function (data) {
if (!$.isArray(data)) {
throw new Error("数据源为空");
return;
}
if (!this.mapFields.isInit) {
this.configFields(); //使用默认配置初始化
}
function getChildByPId(pid) {
var tempArr = [];
for (var i = 0; i < data.length; i++) {
if (data[i][SurveyRazor.dataStore.mapFields.ParentId] == pid) {
tempArr.push(data[i]);
}
}
return tempArr;
}
for (var i = 0; i < data.length; i++) {
// if (data[i][this.mapFields.TypeCode] == SurveyRazor.typeSign.矩阵) {
// var arr = getChildByPId(data[i][this.mapFields.Id]);
// data[i][this.mapFields.Extend] = arr; //扩展字段存子节点
// } var dt = $.extend({
Extend: "",
Layout: "SingleCln" //默认单列显示
}, data[i] || {})
this.globalData.push(dt)
}
}
},
surveyRazor: {
config: {
surveyTitle: "", //问卷标题
description: "", //问卷描述
header: "", //问卷眉头
filesItem: [], //附加的文件
mapFields: "", //映射到的字段
haveBgImg: false, //是否启用背景
bgColor: "", //背景颜色
bgImg: "./SurveyRazor/img/bg1.jpg", //背景图片
mainCss: "./SurveyRazor/surveyq.css",
extCss: "./SurveyRazor/surveyextend.css",
records: [] //数据集
}, /**
* 配置项
*/
options: function (options) {
if (options && $.isEmptyObject(options)) {
throw new Error("参数不是对象或对象为空!");
return
}
this.config.mapFields = SurveyRazor.dataStore.mapFields;
var opt = $.extend(this.config, options || {});
this.config = opt;
return this;
},
/**
* 单选或多选
* rec:题干数据
* seq:序号
*/
clearChecked: function (objId) {
$(":radio[name='" + objId + "']").each(function () {
$(this).attr("checked", false);
})
$("#clr_" + objId).hide();
},
showClrBtn: function (Id) {
$("#clr_" + Id).show();
},
radioOrCheckbox: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc];
var IsMoreSlc = rec[SurveyRazor.dataStore.mapFields.IsMoreSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填
extend += IsMoreSlc ? SurveyRazor.htmlTemplate.moreSelc : ""; //[多选题] if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {
extend += "<span class='clrBtn' id='clr_" + Id + "' style=' color:rgb(153,51,0);cursor:pointer;font-size:12px;display:none;'"
+ " onclick=SurveyRazor.surveyRazor.clearChecked(\"" + Id + "\") ;'>【清除】</span>"; }
content = content.replace("{extend}", extend);
var wrapHtml = SurveyRazor.htmlTemplate.radioOrCheckboxWrap;
wrapHtml = wrapHtml.replace("{id}", "w_" + Id); //添加选择项
var gItemHtml = "", pingLun = []; //pingLun:评论项
var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);
for (var j = 0; j < childNodeArrs.length; j++) {
var childRec = childNodeArrs[j];
if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.评论) { //如果是评论项
pingLun.push(childRec);
continue;
}
var itemHtml = "";
if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {
if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选说明) {
itemHtml = SurveyRazor.htmlTemplate.radioAdd;
itemHtml = itemHtml.replace("{rel}", childRec[SurveyRazor.dataStore.mapFields.Id]); //关联的Id
itemHtml = itemHtml.replace("{extendValue}", "")
} else {
itemHtml = SurveyRazor.htmlTemplate.radio;
itemHtml = itemHtml.replace("{onclick}", "SurveyRazor.surveyRazor.showClrBtn(\"" + Id + "\")")
}
} else if (rec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选) {
if (childRec[SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选说明) {
itemHtml = SurveyRazor.htmlTemplate.checkboxAdd;
itemHtml = itemHtml.replace("{rel}", childRec[SurveyRazor.dataStore.mapFields.Id]);
itemHtml = itemHtml.replace("{extendValue}", "")
} else {
itemHtml = SurveyRazor.htmlTemplate.checkbox;
}
} itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);
itemHtml = itemHtml.replace("{name}", Id);
itemHtml = itemHtml.replace("{value}", childRec[SurveyRazor.dataStore.mapFields.Name]);
//验证规则
itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "")
//选项名称
itemHtml = itemHtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]); if (rec[SurveyRazor.dataStore.mapFields.Layout] == "moreCln") {
//需要自动计算列宽
var width = parseInt($("body").width() || 700); //默认为700
var length = childNodeArrs.length;
var parcent = Number(parseFloat(1 / (length > 7 ? 7 : length) * 100)).toFixed(3);
itemHtml = "<li style=\"width: " + parcent + "%;\">" + itemHtml + "</li>";
} else {//单列布局
itemHtml = "<li style=\"width: 99%;\">" + itemHtml + "</li>";
}
gItemHtml += itemHtml;
}
//评论项
var pinlunItemHtml = "";
for (var i = 0; i < pingLun.length; i++) {
var childRec = pingLun[i];
var html = SurveyRazor.htmlTemplate.discussInput;
html = html.replace("{name}", Id);
html = html.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);
html = html.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");
pinlunItemHtml += html;
}
wrapHtml = wrapHtml.replace("{discuss}", pinlunItemHtml); //添加评论
wrapHtml = wrapHtml.replace("{items}", gItemHtml);
tigan = tigan.replace("{content}", content + wrapHtml);
return tigan;
}, /*
*下拉选择
*
*/
combox: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填 content = content.replace("{extend}", extend);
var wrapHtml = SurveyRazor.htmlTemplate.comboxSlt;
wrapHtml = wrapHtml.replace("{id}", "w_" + Id);
wrapHtml = wrapHtml.replace("{id}", Id);
wrapHtml = wrapHtml.replace("{name}", Id); //添加子项
var gItemHtml = "<option value=''>请选择...</option>";
var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);
for (var j = 0; j < childNodeArrs.length; j++) {
var childRec = childNodeArrs[j];
var itemHtml = "<option value='" + childRec[SurveyRazor.dataStore.mapFields.Id] + "'>"
+ childRec[SurveyRazor.dataStore.mapFields.Name]
+ "</option>";
gItemHtml += itemHtml;
}
wrapHtml = wrapHtml.replace("{option}", gItemHtml);
tigan = tigan.replace("{content}", content + wrapHtml);
return tigan;
},
/**
* 文本输入
*/
bigTextarea: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填 content = content.replace("{extend}", extend);
var wrapHtml = SurveyRazor.htmlTemplate.bigInput;
wrapHtml = wrapHtml.replace("{id}", "w_" + Id);
wrapHtml = wrapHtml.replace("{id}", Id);
wrapHtml = wrapHtml.replace("{value}", "");
wrapHtml = wrapHtml.replace("{name}", Id);
wrapHtml = wrapHtml.replace("{title}", ""); //提示,暂时为空
wrapHtml = wrapHtml.replace("{validation}", rec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则
tigan = tigan.replace("{content}", content + wrapHtml);
return tigan;
},
smallTextarea: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填
content = content.replace("{extend}", extend); if (rec[SurveyRazor.dataStore.mapFields.IsLeaf]) { //如果是子节点
var wrapHtml = SurveyRazor.htmlTemplate.fillInput;
wrapHtml = wrapHtml.replace("{id}", "w_" + Id);
wrapHtml = wrapHtml.replace("{id}", Id);
wrapHtml = wrapHtml.replace("{name}", Id);
wrapHtml = wrapHtml.replace("{validation}", rec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则
wrapHtml = wrapHtml.replace("{title}", ""); //提示,暂时为空
tigan = tigan.replace("{content}", content + wrapHtml);
return tigan;
} else if (!rec[SurveyRazor.dataStore.mapFields.IsLeaf]) {
//还有子节点
var wrapHtml = SurveyRazor.htmlTemplate.fillInputWrap;
wrapHtml = wrapHtml.replace("{id}", "w_" + Id);
//处理子节点
var gItemHtml = "";
var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);
for (var j = 0; j < childNodeArrs.length; j++) {
var childRec = childNodeArrs[j];
var itemHtml = SurveyRazor.htmlTemplate.fillInputItem;
itemHtml = itemHtml.replace("{title}", (j > 0 ? " " : "") + childRec[SurveyRazor.dataStore.mapFields.Name] + ":");
itemHtml = itemHtml.replace("{tip}", ""); //提示暂时为空
itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");
itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);
itemHtml = itemHtml.replace("{value}", "");
itemHtml = itemHtml.replace("{name}", childRec[SurveyRazor.dataStore.mapFields.Id]);
gItemHtml += itemHtml;
}
wrapHtml = wrapHtml.replace("{content}", gItemHtml);
tigan = tigan.replace("{content}", content + wrapHtml);
return tigan;
}
},
/***
** 排序题
**
**/
sortQuestion: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填
extend += "<span>【排序题】</span>";
content = content.replace("{extend}", extend); var body = SurveyRazor.htmlTemplate.sortQuestion.body; //子项
var gItemHtml = "";
var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);
for (var j = 0; j < childNodeArrs.length; j++) {
var childRec = childNodeArrs[j];
var itemHtml = SurveyRazor.htmlTemplate.sortQuestion.checkItem;
itemHtml = itemHtml.replace("{id}", childRec[SurveyRazor.dataStore.mapFields.Id]);
itemHtml = itemHtml.replace("{rel}", Id);
itemHtml = itemHtml.replace("{value}", "");
itemHtml = itemHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || "");
itemHtml = itemHtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]);
gItemHtml += itemHtml;
}
//textarea 区域
var sortArea = SurveyRazor.htmlTemplate.sortQuestion.sortArea;
sortArea = sortArea.replace("{id}", Id);
sortArea = sortArea.replace("{name}", Id);
sortArea = sortArea.replace("{width}", 170);
sortArea = sortArea.replace("{size}", 6);
sortArea = sortArea.replace("{height}", (childNodeArrs.length <= 6) ? 120 : (childNodeArrs.length * 22)); body = body.replace("{id}", "w_" + Id);
body = body.replace("{checkItem}", gItemHtml);
body = body.replace("{sortArea}", sortArea);
body = body.replace("{rel}", Id).replace("{rel}", Id).replace("{rel}", Id).replace("{Id}", Id); //排序按钮 tigan = tigan.replace("{content}", content + body);
return tigan;
},
/**
* 大类别
*/
bigType: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var html = SurveyRazor.htmlTemplate.questionBigType;
html = html.replace("{content}", title);
return html;
},
/**
* 矩阵题
*/
matrix: function (rec, seq) {
var Id = rec[SurveyRazor.dataStore.mapFields.Id];
var title = rec[SurveyRazor.dataStore.mapFields.Name];
var IsMustSlc = rec[SurveyRazor.dataStore.mapFields.IsMustSlc]; var tigan = SurveyRazor.htmlTemplate.qustionBody.replace("{id}", "p_" + Id); //p_
var content = SurveyRazor.htmlTemplate.questionHead;
content = content.replace("{seq}", seq); //序号
content = content.replace("{id}", Id); //Id
content = content.replace("{headTitle}", title) //题干内容
var extend = "";
extend += IsMustSlc ? SurveyRazor.htmlTemplate.mustFill : ""; //是否必填
content = content.replace("{extend}", extend);
//topcln title
var theadArr = rec[SurveyRazor.dataStore.mapFields.Extend];
var theadHtml = "";
for (var i = 0; i < theadArr.length; i++) {
var childRec = theadArr[i];
var headhtml = SurveyRazor.htmlTemplate.matrix.titleTd;
headhtml = headhtml.replace("{content}", childRec[SurveyRazor.dataStore.mapFields.Name]);
theadHtml += headhtml;
} //判断是单选还是多选
var itemHtml = "<input type=\"{type}\" id='{id}' value=\"{value}\" class=' {validation}' selfId=\"{selfId}\" name=\"{name}\" />";
if (theadArr.length >= 0) {
if (theadArr[0][SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.多选) {
itemHtml = itemHtml.replace("{type}", "checkbox");
}
if (theadArr[0][SurveyRazor.dataStore.mapFields.TypeCode] == SurveyRazor.typeSign.单选) {
itemHtml = itemHtml.replace("{type}", "radio");
}
} else {
itemHtml = itemHtml.replace("{type}", "radio");
} //子项
var gItemHtml = "";
var childNodeArrs = SurveyRazor.dataStore.getChildsById(Id);
for (var j = 0; j < childNodeArrs.length; j++) {
var childRec = childNodeArrs[j];
var childHtml = SurveyRazor.htmlTemplate.matrix.item;
childHtml = childHtml.replace("{rowindex}", j);
childHtml = childHtml.replace("{leftTitle}", childRec[SurveyRazor.dataStore.mapFields.LName] || "");
childHtml = childHtml.replace("{rightTitle}", childRec[SurveyRazor.dataStore.mapFields.RName] || ""); //列
var clnHtml = "";
for (var k = 0; k < theadArr.length; k++) {
var clnRec = theadArr[k];
var tdHtml = SurveyRazor.htmlTemplate.matrix.contentTd;
var tempHtml = itemHtml;
tempHtml = tempHtml.replace("{id}", clnRec[SurveyRazor.dataStore.mapFields.Id]);
tempHtml = tempHtml.replace("{value}", clnRec[SurveyRazor.dataStore.mapFields.Name]);
tempHtml = tempHtml.replace("{name}", childRec[SurveyRazor.dataStore.mapFields.Id]); //hang
tempHtml = tempHtml.replace("{validation}", childRec[SurveyRazor.dataStore.mapFields.ValidateRule] || ""); //验证规则
tempHtml = tempHtml.replace("{selfId}", clnRec[SurveyRazor.dataStore.mapFields.Id]);
if (j < childNodeArrs.length - 1) { //设置下划线
tdHtml = tdHtml.replace("##line##", "div_matrix_bottomline");
}
tdHtml = tdHtml.replace("{content}", tempHtml);
clnHtml += tdHtml;
}
//行
childHtml = childHtml.replace("{items}", clnHtml);
gItemHtml += childHtml;
} //body
var body = SurveyRazor.htmlTemplate.matrix.body;
body = body.replace("{head}", theadHtml);
body = body.replace("{id}", "w_" + Id);
body = body.replace("{items}", gItemHtml);
tigan = tigan.replace("{content}", content + body)
//finally html
return tigan;
},
create: function (option) {
if (option == undefined || option == "") {
this.options()
}
if (SurveyRazor.dataStore.globalData.length <= 0) {
throw new Error("请配置数据源");
return;
}
var divHtml = "<form id='aspnetForm'>"
+ "<div class=\"rootDiv\" style=\"margin: 0px; padding: 0px; text-align: left;display:none; \">"
+ "<div class='header'><label>{header}</label></div>"
+ "<div class='surveyTitle' style=\"text-align: center; height: 30px; margin: 10px 0px;"
+ "margin-bottom: 0px;\">"
+ "<label style=\"font-weight: bolder;font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">{surveyTitle}</label></div>"
+ "<div class=\"descript\" "
+ "style=\"margin-bottom: 1px; padding-top: 12px; padding-bottom: 12px;border-top: 1px solid gray; border-left: 1px solid gray;"
+ "border-right: 1px solid gray;\"><label>{content}</label></div>"
+ "<div class=\"survey\" style=\"margin: 0px auto; width: 700px\">"
+ "<div id=\"contentPlaceHolder1\" class=\"surveycontent\">"
+ "<div id=\"surveyContent\"></div>"
+ "</div></div>"
+ "<div style=\"width:100.3%; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 1px;"
+ "background-color: rgb(224,224,224 );\">"
+ "<div style=\"margin-left: 38%; margin-right: 38%; padding-top: 5px; padding-bottom: 5px;\">"
+ "<input type=\"button\" id=\"submit\" value=\" 提交\" "
+ "style=\"cursor:pointer;width: 60px; height: 28px; background-image: url(./SurveyRazor/img/submit.gif);"
+ "background-repeat: no-repeat; background-position: left center;\" /> "
+ "<input type=\"button\" id=\"cancel\" value=\" 取消\" "
+ "style=\"cursor:pointer;width: 60px; height: 28px; background-image: url(./SurveyRazor/img/cancel.png);"
+ "background-repeat: no-repeat; background-position: left center;\" /></div></div>"
+ "</div></form>";
divHtml = divHtml.replace("{header}", this.config.header || ""); //问卷眉头
divHtml = divHtml.replace("{surveyTitle}", this.config.surveyTitle || ""); //问卷标题
divHtml = divHtml.replace("{content}", this.config.description || ""); //描述
$("body").addClass("bodyDiv").append(divHtml); //追加隐藏 //1设置问卷头部
// -------------------------
//题型渲染
var htmlContainer = "";
var records = SurveyRazor.dataStore.getTiGanArr();
for (var i = 0; i < records.length; i++) {
var recObj = records[i];
switch (recObj[this.config.mapFields.TypeCode]) {
case SurveyRazor.typeSign.大类别:
var html = this.bigType.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.单选:
case SurveyRazor.typeSign.多选:
var html = this.radioOrCheckbox.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.下拉:
var html = this.combox.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.填写:
var html = this.bigTextarea.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.填空:
var html = this.smallTextarea.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.排序:
var html = this.sortQuestion.call(this, recObj, i + 1);
htmlContainer += html;
break;
case SurveyRazor.typeSign.矩阵:
var html = this.matrix.call(this, recObj, i + 1);
htmlContainer += html;
break; }
}
$("#surveyContent").append(htmlContainer); //2设置问卷尾部
return this;
},
/*
*设置背景图片
*/
setBgImg: function () {
if (this.config.haveBgImg) {
$("body").css({ "background-image": "url(" + this.config.bgImg + ")"
})
}
return this;
},
show: function () {
$(".rootDiv").show();
$("head").append("<script src='./SurveyRazor/jquery.validationEngine.min.js' type='text/javascript'>" + "<" + "/" + "script>");
window.setTimeout(function () {
$("#aspnetForm").validationEngine({
onSuccess: function () {
alert(true);
},
onFailure: function () {
alert("验证未通过!");
},
scroll: true
}); }, 100);
this.setBgImg();
return this;
}
}
}
实现的效果图如下:
图二:
版权所有,请尊重作者汗水, 如若用于商业,请联系作者.
JavasScript实现调查问卷插件的更多相关文章
- "琳琅满屋"调查问卷 心得体会及结果分析
·关于心得体会 当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...
- 关于“Durian”调查问卷的心得体会
这周我们做了项目着手前的客户需求调查,主要以调查问卷的方式进行.其实做问卷调查并不是想象中的那么简单,首先要确定问卷调查的内容,每一个问题都要经过深思熟虑,字字斟酌,既要切合问卷主要目的,又要简洁扼要 ...
- 从Adobe调查问卷看原型设计工具大战
近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...
- Scrum立会报告+燃尽图（十一月十七日总第二十五次）：设计调查问卷；修复上一阶段bug
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...
- <问吧>调查问卷心得体会
<问吧>调查问卷心得与体会 在这之前,我们已经组成了一个六个人的小团队---“走廊奔跑队”,我们这次做的这个项目的名称是:问吧.在项目实施之前,我们必做的一步就是需求分析,目的就是充分了解 ...
- android 实现调查问卷-单选-多选
非常久没写东西了.今天来总结下有关android调查问卷的需求实现. 转载请加地址:http://blog.csdn.net/jing110fei/article/details/46618229 先 ...
- 自动化测试调查问卷送《QTP自动化测试最佳实践》
自动化测试调查问卷送<QTP自动化测试最佳实践> http://automationqa.com/forum.php?mod=viewthread&tid=2308&fro ...
- HDU - 6344 2018百度之星资格赛 1001调查问卷（状压dp）
调查问卷 Accepts: 1289 Submissions: 5642 Time Limit: 6500/6000 MS (Java/Others) Memory Limit: 262144 ...
- SAP CRM Survey调查问卷的存储模型
数据库表CRM_SVY_DB_SVS,通过如下的函数CRM_SVY_DB_SVS_CREATE插入: 可以通过指定的创建者和创建时间很容易查找到特定的Survey: 调查问卷的答案明细以XML的格式存 ...
随机推荐
- .NET MVC学习笔记（一）
看了些关于MVC的资料,做一些MVC的笔记. 分解关注点 在MVC世界里有个很重要的观念--"分解关注点"(Separation of Concerns),指的是:当你进行软件开发 ...
- LinuxDLL加载优化方案
作者:zhanhailiang 日期:2014-10-26 linux程序动态库载入流程简单介绍 linux从程序(program或对象)变成进程(process或进程),简单说来须要经过三步: fo ...
- 跳跃Java一些周期，双跳FOR周期
今天写的代码写在一个双层for周期,目前仍在使用Iterator,大致意思是假定在第二个周期在排位赛中给了整个双回路跳. 刚開始,直接使用break.巴拉巴拉的敲了一堆代码,信心满满的就直接执行.等到 ...
- Serializable 作用
Serializable 作用 序列化的attribute,是为了利用序列化的技术 准备用于序列化的对象必须设置 [System.Serializable] 标签,该标签指示一个类能够序列化. 便于在 ...
- linux下一个php未找到php型材php.ini解决方案
编译并安装自己php经常会遇到这样的问题.我找不到php.ini.对于根据下面的方法可以解决例: 首先是需要解释.假设你php它被编译并安装,那么默认是没有php.ini的,你必须得去复制源代码包内. ...
- 表复制语句select into from 与 insert into select 区别鉴赏
select into from 与 insert into select 区别鉴赏 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,fi ...
- 编译的依赖不能vs的release工程
前言: 今天,我们正在做一个ocx插件的时候,放到刚装好win7系统的虚拟机上面注冊,弹出以下的一个错误提示: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- mysql压力测试
1.采用 mysqlslap 压力测试 mysqlslap --defaults-file=/etc/my.cnf --concurrency=200 --iterations=1 --numbe ...
- Net 项目代码风格
.Net 项目代码风格要求 .Net 项目代码风格要求 PDF版下载:项目代码风格要求V1.0.pdf 代码风格没有正确与否,重要的是整齐划一,这是我拟的一份<.Net 项目代码风格要求&g ...
- Hadoop获得先进的步步高（四）-试Hadoop
四.试Hadoop 一个简单的求每年温度最大值的程序. 1.准备两个文本測试数据 准备两个名为data1.txt及data2.txt的文件.用于做为计算的输入数据,将其放于/home/fenglibi ...