基础知识储备-前端-常用控件用法

option的onchange事件附加，用jquery重写，替换在附加之前把onchange事件清空掉

$("#AreaProvince").change(function(){
    queryDataOfTrendLine()
});

根据option的value近似匹配 实现指定option的点击事件

$("#AreaProvince option").each(function(){
    if($(this).text().indexOf(mapParams.name) != -1){
        $("#AreaProvince option[value='"+$(this).val()+"']").attr("selected","selected");
        $("#AreaProvince").trigger("change");
        return false;
    }
});

手机端页面调试 （超级神器登场）

<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script>
<script>eruda.init();</script>

收起折叠实现

<div class="zhyx-cont-item">
    <div class="item-tit-wrap">
        <h2 class="text-tit">本店线索量构成</h2>
        <span class="text-right arr-down">收起</span>
    </div>
    <div class="folede-box" >
        <div class="tab-echart-wrap">
            <!-- echart表单 -->
            <div class="echart-wrap">
                <div style="height: 300px;width:100%" id="phoneAndNetLeadsNumContainer"></div>
            </div>
        </div>
    </div>
</div>



<!-- 本品热门车系 -->
<div class="zhyx-cont-item">
    <div class="item-tit-wrap">
        <h2 class="text-tit">本品热门车系</h2>
        <span class="text-right arr-down">收起</span>
    </div>
    <div class="folede-box">
        <div class="tab-echart-wrap">
            <!-- echart表单 -->
            <div class="echart-wrap">
                <div style="height: 300px;width:100%" id="seriesContainer"></div>
            </div>
        </div>
    </div>
</div>

// 收起
var itemTitWrap = $(".item-tit-wrap");
var textRight = itemTitWrap.find(".text-right");
textRight.bind("click", function () {
    if ($(this).hasClass("arr-down")) {
        $(this).removeClass("arr-down");
        $(this).parent().next().addClass("fn-hide");
    }else {
        $(this).addClass("arr-down");
        $(this).parent().next().removeClass("fn-hide");
    }
});

layer中弹出的控件被layer覆盖，设置layer.zIndex的层级来控制

layer.open({
    type: 1,
    title: '创建短信',
    offset: '100px',    //距离顶部的距离
    zIndex: '1',      
    skin: 'layui-layer-rim', //加上边框
    area: ['520px', '340px'], //宽高
    content:''

layer弹窗 daterangepicker时间插件点击无效问题

 在layer.open()打开时，加载datetimepicker时间插件； layer.open()中success - 弹出后的成功方法

skin: 'layui-layer-rim', //加上边框 
area: ['520px', '340px'], //宽高
content:'',
success:function(layero, index){
    if (excelPath != ''){
        $("#excelName").val(excelPath);
        $("#excelName").css({"display":"inline"});
        $("#delExcelId").css({"display":"inline"});
    }
    $("input[name='dateCreate']").daterangepicker(
            {

 

jquery操作select(取值，设置选中）

http://www.cnblogs.com/hailexuexi/p/6708110.html  这位老兄总结的很全

添加tab页（一次全请求）

<div class="ics_box_v1 mb20" data-plug="tab">
        <!-- tab -->
        <ul class="ics_tab_v1 ics_tab_v1-big">
          <li class="tab-item  pl20 pr20 mr0 selected" data-item="tabItem">第一签<i class="tab-item-linebottom"></i></li>
          <li class="tab-item  pl20 pr20" data-item="tabItem">第二签<i class="tab-item-linebottom"></i></li>
        </ul>
        <div class="box-bd">
          <div data-item="tabList">内容一</div>

          <div data-item="tabList" class="fn-hide">内容二</div>
        </div>
      </div>

tab页（点击tab标签请求一次）

var ifDealerRank = $('.tab-item').eq(0).hasClass("selected");  用来获取点击了哪个tab页

<div class="ics_box_v1 mb20">
    <!-- tab -->
    <ul class="ics_tab_v1 ics_tab_v1-big">
        <li class="tab-item  pl20 pr20 mr0 selected">${(rankTrendName)!}<i class="tab-item-linebottom"></i></li>
        <li class="tab-item  pl20 pr20">${(subScoreName)!}<i class="tab-item-linebottom"></i></li>
    </ul>
    <div class="box-bd">
        <div>
        <#--本店商擎排名start-->
            <div class="box-hd">
                <span id="trendTitle" class="box-hd-txt pt5"></span>
                <div class="fn-right">
                    <div id="factoryListDiv" class="ics_select-native-box fn-left mr10">
                        <select class="ics_select-native noshadow" style="width:120px" id="factoryList"
                                style="width:34px" onchange="factoryListChange()">
                            <#list factoryList as item>
                                <option value="${item.factoryId}">
                                    ${item.factoryName}
                                </option>
                            </#list>
                        </select>
                    </div>
                </div>
            </div>
            <div class="box-bd">
                <div style="height: 330px;width:100%" id="rankContainer"></div>
                <div style="display: none" id="rankContainerhtml"></div>
            </div>
            <div name="loading" class="ics_loading n-hide"><i class="loading-icon"></i></div>
        <#--本店商擎排名end-->
        </div>

        <div>
        </div>
    </div>
</div>

点击事件

$('.tab-item').eq(1).on('click', function () {
    var title = '${(subScoreName)!}';
    $("#trendTitle").html(title);
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#factoryListDiv").hide();
    var startDate = window.__startDate;
    var endDate = window.__endDate;
    var dealerId = ${dealerId?c};
    getDealerEngineSubScore(startDate, endDate, dealerId);
})

$('.tab-item').eq(0).on('click', function (){
    var title = '${(rankTrendName)!}';
    $("#trendTitle").html(title);
    $(this).addClass('selected').siblings().removeClass('selected');
    if ($("#factoryList").find("option").length > 1) {
        $("#factoryListDiv").show();
    }
    var startDate = window.__startDate;
    var endDate = window.__endDate;
    var dealerId = ${dealerId?c};
    var factoryId = $('#factoryList').val();
    getDealerRankTrend(startDate, endDate, dealerId, factoryId);
})

获取select标签选项个数

if ($("#factoryList").find("option").length < 2) {
    $("#factoryListDiv").hide();
}

将后端传来的model列表参数循环生成表格输出

<#list giftTypeList as item>
    <tr>
        <td>
            <input name="giftLevelName" class="wukuang" maxlength="5" value="${(item.giftLevelName)}""/>
        </td>
        <td><input name="giftTypeName" class="wukuang" maxlength="20" value="${(item.giftTypeName)}"/></td>
        <input type="hidden" name="typeId" value=" ${(item.id)}"/>
        <td><button class="btn btn-primary" type="button" name="delBtn" onclick="delRow(this,0)">删除</button></td>
    </tr>
</#list>

第二种方法需要先对giftInfoList做处理，不然传入list前端直接${}获取会报错

modelAndView.addObject("giftInfoList", JSON.toJSONString(giftConfigurationIn.getAtActivityGiftTypes()));

var numIndex=0;
var giftInfoList='${giftInfoList}';
giftInfoList = JSON.parse(giftInfoList);

//初始化不可编辑数据
<#list dateBeforeList as item>
rowStr += '<tr><td>${(item)}</td>';
for (var i = 1; i < redbagtb.rows.length; i++) {
    numIndex = numIndex+i-1;
    rowStr += '<td><input name="giftNum" class="wukuang"  readonly="true" value="'+giftInfoList[numIndex].giftNum+'" style="border-style: none"/></td>';
}
numIndex++;
rowStr += '</tr>';
</#list>

循环遍历相同名称元素集合并添加属性

 

$(document).ready(function () {
    if (${onlineBool}==1){
        var delList = document.getElementsByName("delBtn");
        for (var i=0;i<delList.length;i++){
            delList[i].setAttribute("disabled", true);
        }
    }
});

或者  （用了框架最好别用原生的 有时候出了问题不好排查原因，alert其实也是调试忌用的  建议用console.log('ok');）

$(document).ready(function () {
    if (${onlineBool}==1){
        $('[name="delBtn"]').each(function () {
            $(this).attr('disabled',true);
        });
    }
});

jquery设置控件是否可用，是否可见

1,   $('.selector').attr("disabled", true);// 让控件不可用 属性        控件中不能添加此属性，否则无效

2，$('.selector').attr("disabled", false);// 让控件可用 属性  

3，$('.selector').css({ "display": "none" });// 让控件不可见 css  

4，$('.selector').css({ "display": "inline" });// 让控件可见 css  

5，remove() - 删除被选元素（及其子元素）

     删除div下边所有元素

var div = document.getElementById("div1");
    while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        div.removeChild(div.firstChild);
    }

循环遍历表格中input数据动态生成表格

//删除之前表格
var giftRule=document.getElementById("giftRule");
for(var i=1;i<giftRule.rows.length;i++){
    giftRule.deleteRow(i);
}
//生成新的表格 注意giftRule这个table下面必须有一个已存在的隐藏的tr、td标签才能动态添加
var trLen = $("#giftRule tr").size();
var redbagtb=document.getElementById("redbagtb");
var rowStr = '<tr bgcolor="#dcdcdc"><td>日期</td>';
for(var i=1;i<redbagtb.rows.length;i++){
    var giftLevelName = redbagtb.rows[i].cells[0].getElementsByTagName("INPUT")[0].value;
    var giftTypeName = redbagtb.rows[i].cells[1].getElementsByTagName("INPUT")[0].value;
    rowStr += '<td>' + giftLevelName + '  ' + giftTypeName + '</td>';
}
rowStr += '<td>操作</td></tr>';
var at = trLen - 1;
$("#giftRule tr:eq(" + (at) + ")").after(rowStr); **tb.rows[i].cells[0].getElementsByTagName("INPUT")[0].value;  ->43
 **tb.rows[i].cells[1].innerHTML;  ->input标签内容
 **tb.rows[i].cells[2].innerText;  ->删除