前台细节和SQL总结

一、多选按钮总结

<input type="checkbox" class="checkStyle" onclick="checkSelected()" value="test" id="test">测试<br/>

     （1）获取选中的多选按钮的值：

   function checkSelected() {
        var checkText = "";
        $('input:checkbox:checked').each(function() {
            var name = $(this).val();
            checkText += name + ",";
        });
        console.log(checkText,"ddddd");
    }

     （2）使用函数设置多选按钮为选中或不选状态

$("#test").removeAttr("checked");

     （3）让多选框变大一些

zoom: 130%;

     （4）默认是选中状态，不可改变

<input type="checkbox" class="checkStyle" onclick="javascript:return false;" checked="checked">测试<br/>

二、javascript中的关键字

       javascript中的name以及关键字：https://blog.csdn.net/line233/article/details/82838686?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

       虽然name既不是关键字也不是保留字，但是在页面中不要使用name作为变量，会导致页面出现问题。例：https://blog.csdn.net/catascdd/article/details/90267320?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecasehttps://blog.csdn.net/catascdd/article/details/90267320?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

三、mysql细节知识总结

       mysql统计结果去重：https://www.cnblogs.com/liangzia/p/11753670.html

　　mysql函数group_concat()使用：https://www.jianshu.com/p/43cb4c5d33c1

　　　　　功能：将group by产生的同一个分组中的值连接起来，返回一个字符串结果。

　　mysql分组之后再根据某个字段统计数量，并且展示字段，字段自定义，统计使用case when然后加和

　　　　　参考：https://blog.csdn.net/buynider/article/details/81985

四、jQuery设置div的内容

       jQuery设置div的内容和属性：https://blog.csdn.net/qq_37189949/article/details/54374929

　　或者使用js：document.getElementById('showYear').innerHTML="填写的内容";

五、list使用hashset去重

       list去重：https://blog.csdn.net/heisetoufa/article/details/84239510

 六、一个jsp页面包含另一个页面

        三种方式：https://www.cnblogs.com/limn/p/8064445.html

　　静态引入和动态引入;https://blog.csdn.net/fn_2015/article/details/70311495

七、筛选条件存入动态显示在div中的实现思路

       首先定义一个div，当触发函数的时候，使用append将条件添加到div中，可以在每个条件的右上角放一个删除的图片，点击删除图标可以从div中去除筛选条件

//定义div
 <div style="margin-top: 15px; 100%;float: left;display: none;height:auto;" id="selcondition">
     <div style="float:left;min-height:30px;margin-top: 5px;margin-left: 32px;margin-left: 32px;">已选条件：</div>
 </div>

//定义图片
var deleteImg = "";
deleteImg = "<img src='${ctx}/static/images/delete2.png'style='display:block;float:left;margin-left:-10px;margin-top:-6px;'/>";

//动态添加条件
$("#selcondition").append("<div class="selectedCondition" name="companyName">"+companyName+ "</div>"+deleteImg);

//点击图片删除单个条件
$("#selcondition").on("click", "img", function () {
     //点击图片，删除图片并删除图片前面的元素
     $(this).prev().remove();
     $(this).remove();
}    

 八、搜索框中添加清空的方法

<div class="title-input">
     <input type="text" placeholder="请输入关键字" id="search-text2" value=""
           oninput="onInput (this)" style="height: 36px; 354px;padding-left: 20px;font-size: 14px; border:1px #ccc solid;outline:none;">
     <span id="clear" class="clear hidden" style="z-index:10;font-size:22px;height:36px;
           line-height:36px;left:700px;position:absolute;cursor:pointer;vertical-align: center">×
     </span>
     <button type="button" id="search-btn2" style="height: 36px;font-size: 14px; outline: none;"
           onclick="search()">搜索
     </button>
</div>

 //输入内容的时候就隐藏清除标志
 function onInput(obj) {
    if(obj!==""&&obj!==null){
       $("#clear").removeClass("hidden");
    }
 }

 //点击清除标志就清除输入框内容
 $("#clear").bind("click",function(){
     $("#clear").addClass("hidden");
     $("#search-text2").val("");
 });

九、在js里使用sort()对json数据进行排序

       javascript sort()方法：sort()方法用于对数组的元素进行排序。

       语法：arrayObject.sort(sortby)，其中sortby可选，规定排序顺序，必须是函数。

       返回值：对数组的引用，请注意，数组在原数组上进行排序，不生成副本。

//对根据json中的某个值进行排序
json数组:
{name:"张三",score:100}
{name:"李四",score:76}
{name:"王五",score:89}

//升序排序
function up(x,y){
     return x.score-y.score
}
//降序排序
function desc(x,y){
     return y.score-x.score
}

//获取到json数据
var jsondata=data.result；
jsondata.sort(desc);

此时json中的数据就会按照score值进行排序，注：sort()在原数据上进行排序，不会产生新的数据。

 十、table表格设置内容超出后显示省略号     

        表格设置：https://www.cnblogs.com/suni/p/8902249.html
        问题解决：https://blog.csdn.net/weixin_43804382/article/details/94735514

十一、设置表格滚动

        案例：https://blog.csdn.net/ww93920/article/details/78291550?utm_source=blogkpcl2

    function change(table){
        var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
        for(j=0;j<table.rows[0].cells.length;j++){//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
            var cell = row.insertCell(j);//给新插入的行中添加单元格
            cell.height="35px";
            cell.colSpan='2';
            cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
        }
        table.deleteRow(0);//删除table的第一行
    };
    function tableInterval(){
        var table = document.getElementById("tablebody");//获得表格
        change(table);//执行表格change函数，删除第一行，最后增加一行，类似行滚动
    };

    setInterval("tableInterval()",2000);