jquery 自整理
echarts官方：Documentation - Apache ECharts
1、CheckBox复选框
//选中事件（页面点击）
$('#operateExit').on('ifChecked', function(){
$('input[name="operateExit"]').val('1');
});
//非选中事件（页面点击）
$('#operateExit').on('ifUnchecked', function(){
$('input[name="operateExit"]').val('0');
});
//知道CheckBox值让其选中或非选中（如：初始化页面时）
if($('input[name="operateImport"]').val()=='1'){
$('#operateImport').iCheck('check'); //选中
}else{
$('#operateImport').iCheck('uncheck'); //非选中
}
2、radio单选
//动态获取的值进行动态选中
$("input[name='carType'][value="+data.car.carType+"]").iCheck('check'); //data.car.carType要选中的值
//页面选中的值动态将其取消（选中改为非选中）
var carType = $("input[name='carType']:checked").val(); //获取到选中的值
$("input[name='carType'][value="+carType+"]").iCheck('uncheck'); //将其改为非选中
3、动态给select下拉框赋值
后台controller查询：
@ResponseBody
@RequestMapping({"checkInfo"})
public Map<String, Object> checkDriver(String belongsType){
Map map = new HashMap();
try {
SysUser user = UserUtils.getSysUser();
LogDriversExample driversExam = new LogDriversExample();
LogDriversExample.Criteria driversCri = driversExam.createCriteria();
driversCri.andCompanyIdEqualTo(user.getCompanyId());
driversCri.andEnabledEqualTo(Integer.valueOf(1));
if ("1".equals(belongsType))
driversCri.andDriverTypeEqualTo("0");
else {
driversCri.andDriverTypeEqualTo("1");
}
List drivers = this.logDriversService.selectByExample(driversExam);
LogCarManagementExample carExam = new LogCarManagementExample();
LogCarManagementExample.Criteria carCri = carExam.createCriteria();
if ("1".equals(belongsType))
carCri.andTypeEqualTo("1");
else {
carCri.andTypeEqualTo("2");
}
carCri.andCompanyIdEqualTo(user.getCompanyId());
List car = this.carManagementService.selectByExample(carExam);
map.put("drivers", drivers); //司机
map.put("car", car); //车辆
} catch (Exception e) {
e.printStackTrace();
this.logger.error("调度单查询所属类型出错:" + e.getMessage());
}
return map;
}
jQuery赋值：
$("#belongsType").change(function() {
if ($("#belongsType").val() != '') {
$.post(ctx+"/log/sendOrder/checkInfo", {
"belongsType" : $("#belongsType").val()
}, function(data) {
$("#driverMobile").val("");
$("#driverName").html("");
$("#carInfo").html("");
jQuery("#driverName").append("<option value=''></option>");
jQuery("#carInfo").append("<option value=''></option>");
$.each(data.drivers, function (i, item) {
jQuery("#driverName").append("<option value="+ item.id+"-"+item.name+">"+ item.name+"</option>"); //司机
});
$.each(data.car, function (i, item) {
jQuery("#carInfo").append("<option value="+ item.carNumber+">"+ item.carNumber+"</option>"); //车辆
});
}, "json");
}else{
$("#driverMobile").val("");
$("#carInfo").val("");
}
});
jsp页面效果：
<!-- 司机 -->
<select id="driverName" name="driverName" class="select">
<option></option>
<option value="13-李师傅" selected="selected">李师傅</option>
</select>
<!-- 车辆 -->
<select id="carInfo" name="carInfo" class="select">
<option></option>
<option value="陕A888888" selected="selected">陕A888888</option>
</select>
jQuery：
//所属类型
$("#belongsType").change(function() {
if ($("#belongsType").val() != '') {
$.post(ctx+"/log/sendOrder/checkInfo", {
"belongsType" : $("#belongsType").val()
}, function(data) {
$("#driverName").html("");
$("#carInfo").html("");
jQuery("#driverName").append("<option value="+ +">"+ +"</option>");
jQuery("#carInfo").append("<option value="+ +">"+ +"</option>");
$.each(data.drivers, function (i, item) {
jQuery("#driverName").append("<option value="+ item.id+"-"+item.name+">"+ item.name+"</option>");
});
$.each(data.car, function (i, item) {
jQuery("#carInfo").append("<option value="+ item.carNumber+">"+ item.carNumber+"</option>");
});
}, "json");
}else{
$("#driverMobile").val("");
$("#carInfo").val("");
}
});
controller：
LogCarManagementExample carExam = new LogCarManagementExample();
com.tp.log.model.LogCarManagementExample.Criteria carCri = carExam.createCriteria();
if("1".equals(belongsType)){
carCri.andTypeEqualTo("1");
}else{
carCri.andTypeEqualTo("2");
}
carCri.andCompanyIdEqualTo(user.getCompanyId());
List<LogCarManagement> car = carManagementService.selectByExample(carExam);
map.put("car", car);
//rangeSlider
官方网站：http://ionden.com/a/plugins/ion.rangeSlider/index.html
试用网站：http://jsrun.net/4NYKp/edit
js/css下载：https://www.bootcdn.cn/ion-rangeslider/
<%--引用ion.rangeslider--%>
<link rel="stylesheet" href="/rangeslider/css/ion.rangeSlider.css" />
<script type="text/javascript" src="/rangeslider/js/ion.rangeSlider.js"></script>
//页面div
<div style="width: 45%; margin-top: 10px; margin-left: 10px; float: left;">
<div id="jdRange"></div>
</div>
//初始化rangeSlider
var timer = null;
var sliderFrom = 1;
var valueArray = new Array();
valueArray.push("123");
valueArray.push("456");
$(function() {
$("#jdRange").ionRangeSlider({
min: 0,
max: 100,
from: 1,
to: 5,
step: 1,
values: valueArray,
onFinish: function(data){
console.log(data.from);
sliderFrom = data.from;
}
});
timer = setTimeout("bf()", 1000);//1s调用一次
});
function bf() {
$("#jdRange").data("ionRangeSlider").update({//更新rangeSlider
from: sliderFrom,
to: sliderFrom+1
});
clearInterval(timer);//清除定时任务
}
分录图片展示
js：
//初始化异常节点图片
function init_optEntry(){
$('.tbody tr').each(function(){
var tbody_tr=$(this);
var id=$(this).find("input").val();
if(id != null){
$.ajax({
url : ctx+'/ft/transOrder/selectImage',
data:{id:id},
type : 'post',
async: false,//使用同步的方式,true为异步方式
success : function(data){
if(data != null && data != ""){
var ImageList=data.ImageList;
$.each(ImageList, function(index,item){
tbody_tr.find('.Image').append('<a href="javascript:;" οnmοuseοver="imagePreview(this);"><img style="width:20px;height:26px;" src='+item.url+'></a> ');
});
}
}
});
}
});
}
//图片放大显示
function imagePreview(obj){
xOffset = 100;
yOffset = -230;
$(obj).hover(function(e){
var imgPath = $(obj).find('img').attr("src") ;
var img_html = "<div id='preview'><img style='position:absolute;width:400px;height:500px;z-index:99;' src='"+ imgPath +"' /></div>" //position:absolute;z-index:99;让图片悬浮在页面之上
$("body").append(img_html);
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
$("#preview").fadeOut("fast");
$("body").find("#preview").remove();
});
$(obj).mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
}
jsp：
<style type="text/css">
#preview{
border:1px solid #ddd;
/* background:#f9f9f9; */
color:#666;
/* padding:12px 15px; */
/* width: 320px; */
/* height: 145px; */
display:none;
position:absolute;
}
</style>
<td>
<c:if test="${not empty map.ZCJD009}">
<input value="${map.ZCJD009.id}" type="hidden"/>
<div class="pos-r Image">
</div>
</c:if>
</td>