前端小结

前端小总结

最近小编在写后台，利用两天的时间写了一个功能的增删改查。完成了开发任务，写个小总结。当时组长布置任务的时候说就一个增删改查很简单，半天就可以写完，当时也是这么想的。
理想和现实的差距就是，想象往往是美好的，当时后台的增删改的确写的很快，但是没有想到，前端可是我超薄弱的地方。写完代码以后想着怎么布局，怎么实现。
后台前端用的是bootstrap，翻了翻bootstrap的文档，写了前端页面，页面写出了，虽然不太好看，但是自己怎么看怎么喜欢，自己写的开心(晒图)。


- 模态框

   模态框的展示：
     1.通过JavaScript调用   $('#模态框Id').modal('show');
     2 .css控制   data-target="#模态框id"

- 下拉框

         <div class="col-sm-6" id="consumeN">
           <select class="form-control consumeName">
                        <option value="">--请选择--</option>
                        <option value="0">助力</option>
                        <option value="1">消耗扫码数</option>
                        <option value="2">消耗烟酒币</option>
            </select>
         </div>

值的获取

获取文本值：
var name=$(“#consumeN”).find(“option:selected”).text();
获取文本value值：

var type=$(".consumeName").val(); //select 后面的class选择器或id选择器才能获取value值

回显下拉框中的值：
1. 对应value值
$("#updateconsumeN").find("option[value="+res.entity.type+"]").attr("selected",true) //回显数据时必须使用id属性
2.

 $("#updateconsumeN option").each(function(){
            var optionText=$(this).text();//这是对应文本的(如果想要对应value值 可以用上面获取value值的方式)
            if(optionText==res.entity.name){            
            $(this).attr("selected","selected");
            }
 })         

3.我们最常用的是，下拉框中的内容时ajax请求加载的

   $('.consumeName').html(" ");
   var html="<option value=''>--请选择--</option>";
   for(var i=0;i<res.length;i++){
      html+="<option value='"+res[i].taskId+"'>"+res[i].task+"  </option>";
   }
   $('.consumeName').append(html); 

-radio单选框

<div class="form-group" id="consumeSelect">
<input type="radio" class="status" name="status" value="0">不删除
<input type="radio" class="status" name="status" value="1">删除
</div> 

获取单选框中的value值：

var  selectOrNot=$("#consumeSelect  input[name='selectOrNot']:checked").val();

回显：

$(".status input[name='status'][value='"+res.entity.isDelete+"']").attr("checked",true); 

• jqGrid
  jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.
  推荐两篇文章：https://www.cnblogs.com/kissdodog/p/3875992.html
             http://blog.mn886.net/jqGrid/

先总结到这里，下次准备写图片上传 ，有兴趣的可以关注哦。