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

实现的效果图如下:

图二:

　　

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

JavasScript实现调查问卷插件的更多相关文章

  1. "琳琅满屋"调查问卷 心得体会及结果分析

    ·关于心得体会       当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...

  2. 关于“Durian”调查问卷的心得体会

    这周我们做了项目着手前的客户需求调查,主要以调查问卷的方式进行.其实做问卷调查并不是想象中的那么简单,首先要确定问卷调查的内容,每一个问题都要经过深思熟虑,字字斟酌,既要切合问卷主要目的,又要简洁扼要 ...

  3. 从Adobe调查问卷看原型设计工具大战

    近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...

  4. Scrum立会报告+燃尽图（十一月十七日总第二十五次）：设计调查问卷；修复上一阶段bug

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  5. <问吧>调查问卷心得体会

    <问吧>调查问卷心得与体会 在这之前,我们已经组成了一个六个人的小团队---“走廊奔跑队”,我们这次做的这个项目的名称是:问吧.在项目实施之前,我们必做的一步就是需求分析,目的就是充分了解 ...

  6. android 实现调查问卷-单选-多选

    非常久没写东西了.今天来总结下有关android调查问卷的需求实现. 转载请加地址:http://blog.csdn.net/jing110fei/article/details/46618229 先 ...

  7. 自动化测试调查问卷送《QTP自动化测试最佳实践》

    自动化测试调查问卷送<QTP自动化测试最佳实践> http://automationqa.com/forum.php?mod=viewthread&tid=2308&fro ...

  8. HDU - 6344 2018百度之星资格赛 1001调查问卷（状压dp）

    调查问卷  Accepts: 1289  Submissions: 5642  Time Limit: 6500/6000 MS (Java/Others)  Memory Limit: 262144 ...

  9. SAP CRM Survey调查问卷的存储模型

    数据库表CRM_SVY_DB_SVS,通过如下的函数CRM_SVY_DB_SVS_CREATE插入: 可以通过指定的创建者和创建时间很容易查找到特定的Survey: 调查问卷的答案明细以XML的格式存 ...

随机推荐

  1. centos 彻底删除nodejs默认的安装文件

    1> yum remove nodejs npm -y 2> cd  /usr/local/lib 移除所有 node 和 node_modules目录 cd  /usr/local/in ...

  2. ZipDemo

    package swing.zip; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt. ...

  3. 解决java.sql.SQLException: ORA-01789: query block has incorrect number of result columns

    java.sql.SQLException: ORA-01789: query block has incorrect number of result columns at oracle.jdbc. ...

  4. Java多线程&lt;1&gt;

    1.Java多线程的概念: 线(Thread):它指的是一个任务的从开始执行流程到结束. 穿线提供执行任务的机构.供java条款.在一个程序可以启动多个并发线程.候执行. 在单处理器系统中,多个线程共 ...

  5. iOS在地图上WGS84、GCJ-02、BD-09互转解决方案

    该项目的最新进展包括地图共享模块,android同事集团开始,使用百度地图sdk,我开始回,运用iOS SDK的mapkit做,之后,问题是,用纬度和经度坐标iOS端和Android端出现了比較大偏差 ...

  6. 移动端 常见布局CSS3的细节

    结合 Framework7 和ios UI系统,微信weUI,支付宝H5    我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,bac ...

  7. Centos 6.5下一个SNMP简单配置(snmp protocol v3，监控宝)

    Centos 6.5下一个SNMP简单配置(snmp protocol v3.监控宝) jom_ch@2014/7/25 1,安装 >yum -y install net-snmp net-sn ...

  8. oracle触发农产品证明文件号码

    CREATE OR REPLACE TRIGGER TRG_KC_SPRK_i     BEFORE INSERT ON KC_SPRK     FOR EACH ROW DECLARE     vS ...

  9. 多于ListView同步滚动

    简介: 发展过程中可能遇到的2一个或多个其他listview为了用相应的关系保持滚动的情况下一起,本文演示了这种效应为大家. 功效: 实现原理: 在滚动当中不论什么一个ListView的时候,同一时候 ...

  10. MVC中下拉框显示枚举项

    原文:MVC中下拉框显示枚举项 本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框: 1.通过控制器返回List<SelectListItem>类型给前台视图 2.通过为枚举类型属性打 ...