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>&nbsp');
                            });
                        }
                    }
                });
            }
        });
    }
    //图片放大显示
    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>