前端小总结
最近小编在写后台,利用两天的时间写了一个功能的增删改查。完成了开发任务,写个小总结。当时组长布置任务的时候说就一个增删改查很简单,半天就可以写完,当时也是这么想的。
理想和现实的差距就是,想象往往是美好的,当时后台的增删改的确写的很快,但是没有想到,前端可是我超薄弱的地方。写完代码以后想着怎么布局,怎么实现。
后台前端用的是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/
先总结到这里,下次准备写图片上传 ,有兴趣的可以关注哦。