记录week4

Goal

1、VaspSubmit需要实现版本选择器、核数选择器（可自定义、可选择）
2、传入到后台的数据包括软件版本、节点数、作业名（可以默认定义）、提交日期（服务器时间？）、用户名（默认定义）、作业状态（默认为1）、作业ID（按阿拉伯数字自增，如果前端不能保证原子操作，可以在后端实现）

What I Get

1、Edit实现

1）保存修改
Problem：修改后的文件内容没有正确地传到后台，格式不对:(
Description：在编辑器上显示空行，保存后再次打开却没有显示出来
Solution：每个空行里的innerHTML都是
,在读取时，检查该元素是否只有
(使用Object.indexOf(string)，如果可以找到该字符串，函数会返回存在的位置，否则会返回-1)。如果找到，就只添加自定义的换行标识符，否则添加innerHTML+自定义换行标识符。最后在读取显示时，找到该换行标识符，将其替换成换行符

for (var i = 0; i < content_text.length; i++) {      var temp="";      if (content_text[i].innerHTML.indexOf("<br>") != -1) {          temp = "_Edit_br_";      } else {          temp = content_text[i].innerHTML + "_Edit_br_";  }

2、行号实现

行号随行数变化而变化
1）增加
Description：判断键盘输入的符号，当键盘的输入为Enter时，div增加一个，行数加1

if (event.keyCode == 13) {       var showNumDiv = document.getElementById("showNum");      var cur_num = showNumDiv.className;      var numDiv = document.createElement("div");      cur_num++;      numDiv.innerHTML=cur_num;      numDiv.className="lineNum";      numDiv.style.height=22.67+"px";      showNumDiv.appendChild(numDiv);      showNumDiv.className=cur_num;      lineNum++;      console.log("current line num="+lineNum);  }

2）减少
Description：判断键盘输入的符号，当键盘的输入为Delete,同时当前div内容为空时，div减少一个，行数减1

3、版本选择===

实现比较容易，提供版本号给用户选择：

<select class="form-control input-lg" name="versions">            <option>Version 1</option>            <option>Version 2</option>            <option>Version 3</option>            <option>Version 4</option>            <option>Version 5</option></select>

同时具有搜索功能（添加了boostrap的插件：select2.min.js）

 $("#选择器ID/.选择器类名").select2({    theme: "classic"//主题类型，可以通过搜索选项来快速选择  });

4、核数选择

既可以选择既定的选项，也可以自定义选项

<select class="form-control input-lg cores" onchange="editable(this);" id="cores">            <option value="1">1</option>            <option value="2">2</option>            <option value="4">4</option>            <option value="8">8</option>            <option value="18">18</option>            <option value="36">36</option>            <option value=""  id="enterId">Enter Your Value</option>   </select>

实现自定义选项：点击了“Enter Your Value”的选项后，弹出对话框，提示用户输入自定义的值；点击Save按钮后，会触发SaveInput()方法；调用addSelected(value1,text1)方法来增加一个自定义的option，然后显示在selector内。

// show the modal  function editable(select1){      if(select1.value == ""){          $(function ()  {              $("#EnterValueModal").modal();          });       }  }  //add new option to the cores selector  function addSelected(value1,text1){      var fld1 = document.getElementById("cores")      if (document.all)    {        //IE browser        var Opt = fld1.document.createElement("OPTION");        var enter = fld1.options[fld1.options.length-1];        Opt.text = text1;        Opt.value = value1;        fld1.add(Opt, enter);        console.log("Opt.value="+Opt.value );        Opt.selected = true;      }else{        // not IE        var Opt = new Option(text1,value1,false,false);        var enter = fld1.options[fld1.options.length-1];        Opt.selected = true;        // add the new option        fld1.add(Opt, enter);        console.log("Opt.value="+Opt.value );      }    }  // function of Save button  function SaveInput() {      var inputValue = document.getElementById("inputText").innerHTML;      console.log("before save "+ inputValue);      // call the create option function      if(inputValue){          addSelected(inputValue,inputValue);      }      inputValue="";      console.log("after save "+inputValue);  }

5、插件

1、jquery的smartWizard插件常用在一些向导式的，按步骤的功能中，是的用户按照我们设定的步骤进行操作，这样一方面有较好的用户体验，可以将庞大的表格数据分解成多个步骤，是的每个步骤的数据量减少；另一方面流程比较清晰，先做那个下一步做什么都是可控可设定的。
源码：http://techlaboratory.net/smartwizard
demo：http://techlaboratory.net/smartwizard/demo
2、boostrap的select2支持模糊筛选

$("#select2-id").select2({     templateResult : formatState, // 列表带图片     templateSelection : formatState, // 选中的带图片     language: "zh-CN", //设置 提示语言     width: "100%", //设置下拉框的宽度     placeholder: "请选择", // 空值提示内容，选项值为 null     //placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 ''     minimumInputLength: 10  //最小需要输入多少个字符才进行查询     allowClear: true, //是否允许清空选中     tags: false,  //设置必须存在的选项 才能选中，设置不存在的值则为null,如果 placeholder: {id: '', text: "请选择"} 则为 ''     selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项 （不建议使用）     closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用）     minimumResultsForSearch: Infinity, // 隐藏搜索框     theme: "classic", // 样式     maximumSelectionLength: 3,  // 多选 - 设置最多可以选择多少项     tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true  });