开发杂记

1. Ajax 请求

$.getrdsqlResult = function() {
        var nocoderd = $.ajax({
            type: "POST",
            url: '<?php echo $this->ModuleUrl ?>/report/selectdisplay',
            async: false,
            cache: false,
            data: $("#testform").serializeArray(),
            beforeSend: function() {
                add_part_loading(11, true);
            },
            success: function(msg){
                if (msg.error > 0){
                    $('#enterSql').parent().addClass('has-error');
                    $('#enterSql').siblings().html(msg.msg);
                    // $('#selectDisplay').css('display','none');tableResult
                    $(".resultTab").hide();
                    $("#tableResult").html("");
                    $('#formCodeDiv').css('display','none');
                    return false;
                }else{
                    $('#enterSql').parent().removeClass('has-error');
                    $('#enterSql').siblings().html('');
                    // if project type is 0 then not need add this function
                        $('#enterSql').attr('onfocus', 'changeSql()');
                }
            }
        }).done(function(){
            add_part_loading(11, false); 
        }).responseText;
        return nocoderd;
    };

我们从服务器接收了以下数据 { “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }，一般情况下都是string的，‘{ “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }’，需要使用var obj = JSON.parse(’{ “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }’);之后再获取object的数据，如obj.name; 如果不进行JSON.parse，那么直接获取里面的name值，是undefined

2. 点击button 刷新了整个页面

有时候在点击button的时候发现竟然刷新了整个页面，这是因为type没有设定

<button type="button">Save</button>

3. select2 使用多选multiple属性时，在form提交时候只能获取其中一个值

如果select 使用了multiple时，在php开发中，一定要将name设置为数组形式，如name = "chartType[]"

<select class="dataTypeSelect" name="dataDisplayType[]" multiple="multiple">
</select>

multiple 的select2 使用数据库data回显赋值时，一定要在点击事件里面进行赋值，如果在$(document).ready里赋值，那么会出错，再重新获取一下该select2的val值，发现是null。
我这边的业务select2 插件在D的tab里，需要实现multiple的回显。ABCD均在一个页面上，点击不同的tab显示不同的内容。最开始的思路就是在直接进入A的时候，就把从数据库请求来的数据放在了一个hidden的input框里，在初始化的时候直接赋值，虽然是赋值成功了，可是再重新获取一下该select2的val值，发现是null通过看官方文档，赋值均在click事件里，所以，我换了一个思路，就是在点击D的时候，给select2赋值。

Html: 
       <input type="text" id="displayData" hidden value="<?php echo ($this->info['report']['sqlStatement'][0]['DataDisplayType'])?>">
			<div class="col-sm-7">
					<select class="dataTypeSelect" name="dataDisplayType[]" multiple="multiple">
					</select>
			</div>	
JS:
$(".tbox li[href='#D']").on("click",()=>{
        var displayType = $("#displayData").val();
        if(displayType.indexOf(",")){
            var typeArray = displayType.split(",");
            $(".dataTypeSelect").val(typeArray).trigger("change");
        }else{
            $(".dataTypeSelect").val(displayType).trigger("change");
        }
    })

4. select2 赋值

mulitple 赋值：
如果值只有一个，则 $(".dataTypeSelect").val("1").trigger("change");
如果值只有多个，则$(".dataTypeSelect").val(["1","2"]).trigger("change");
Note : 1，2 为 select2 数据源Data的id值。数据源要按照select2 官方文档指定的格式去赋值，可以参考我的这篇文章Select2 Attention。有一个情况需要注意一下，就是id 最好为数字，或者简单的两个字符，如果太多，在赋值是会出错，没有找到具体原因。最开始的将<option value="ProjectName">ProjectName</option> ，赋值不成功，是因为我将Data的id和text均设置为了ProjectName。最后将id设置为了数字，才赋值成功<option value="1">ProjectName</option>

非multiple赋值：
$(“select[name=‘chart[chartType]’]”).select2(“val”, 2);

5. ion.rangeSlider 插件初始化和赋值

RangeSlider 官方文档

初始化：

<input type="text" class="js-range-slider" name="my_range" value="" />

 $(".js-range-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });

更新赋值：

虽然这个插件用在input框上，获取该input框的value值时，和正常的input框获取时一样，(".js-range-slider").val()，但是再从数据库拿到数据后，想要改变rangeslider的值时，发现直接用(".js-range-slider").val(23)f赋值不成功，通过调查，采用以下的方式可以赋值成功。

let my_range = $(".js-range-slider").data("ionRangeSlider");
    
    // 3. Update range slider content (this will change handles positions)
    my_range.update({
        from: 300,
        to: 400
    });

来源：CSDN

作者：拥抱相柳的小夭

链接：https://blog.csdn.net/weixin_43439782/article/details/103523798

标签

赋值

select2

1. Ajax 请求

2. 点击button 刷新了 整个页面

3. select2 使用多选multiple属性时，在form提交时候只能获取其中一个值

4. select2 赋值

5. ion.rangeSlider 插件初始化和赋值

2. 点击button 刷新了整个页面