JS实际使用总结

<1>jquery循环遍历

$('input[type=checkbox][name=check_subjectid]:checked').each(function(i,o){
if(o.getAttribute("seriestype") == 3)
{
    $.umapMessager.alert('<bean:message key="IPTV.SLCS.TITLE"/>', '<bean:message key="contentmgr.content.series.dele_error1"/>', 'error' , function(r){});
      retflag = true;
}
});

 

<2>表单序列化

/**
 * 获得form表单元素
 * @param formObj
 * @returns
 */
function changeAjaxFormData(formObj){
var data=formObj.serialize();
data= decodeURIComponent(data,true);// 防止中文乱码
var json=formToJson(data);// 转化为json
return JSON.parse(json);
}

function formToJson(data) {
   data=data.replace(/&/g,"\",\"").replace(/=/g,"\":\"").replace(/\+/g," ").replace(/[\r\n]/g,"<br>");
   data="{\""+data+"\"}";
   return data;
}

var formJson = changeAjaxFormData($("#actionForm"));
ajaxTemplate("/admin/product/addProduct","json", true, formJson, function(data){

<3>js知识点

 

//隐藏显现  HTML设置默认值：style="display:none"//隐藏
$("#aid2").show(); //显现
$("#aid1").hide(); //隐藏
$("#servicenameA").attr("value",data.servicename); //设置value值
$("#jiben_smname").val(data[0].smname); //给select设置默认值 data是ajax返回值

//直接请求路径
function _go(pageNum){
    var servicename = $("#servicename").val();
    var pageNum = pageNum;
    location='/saltportal/serviceInfo?servicename='+servicename+'&pageNum='+pageNum;    
}

//返回主页面并刷新
window.location.href="";

//不应许更改
disabled

history.go(-1) ：后退+刷新；
history.go(1) ：前进
history.back() ：后退 ； 
history.back(-1) ：返回上一页，原页表表单中的内容会保留
history.back(0) ：刷新；
history.back(1) ： 前进 

th:href="@{${model中的name值}}"
th:href="@{/demand(username=${username})}"
js:  href="'+obj.icenterurl+'"

将input表单在没有提交按钮下，回车绑定事件，由ajax提交
$(function(){
方法一
    $('#addlabel').bind('keypress',function(event){
          if(event.keyCode == "13")
          {
             var label = $("#addlabel").val();
            var requireid = $("#label_requireid").val();
            alert('你输入的内容为：' + label+','+requireid);
          }
    });

//方法二如下
   $(document).keydown(function(e) {
         if (e.keyCode == 13) {
            //dologin();
         }
  });

});

（12）弹出新窗口
function icenterpage(icenterurl){
    window.open(icenterurl,'','height=600,width=1000,top=140,left=300');
    //$("#icenter_url").attr("href",icenterurl);
    //$('#icenter_url').html('<span></span>').children().trigger('click');
}

//console.log(servicecode);
//console.log(parentcode);
//parent.frames["treeDemo"].refreshNode(parentcode);
window.location.href="";

经典的js操作：
function serciceList(requireid){
    $.ajax({
        type: 'GET',
        async: false,
           url: '/saltportal/demand/getSerciceList?requireid='+requireid,
            dataType: "json",
        //data: {requireid : requireid},
            success: function(data){
            $("#sercice_requireid").attr("value",requireid);
            $('#sercice_list').empty();
            html="";
            html+='<table class="table table-striped"><thead><tr><th>归属服务编号</th><th>归属服务名称</            th><th>服务编号</th><th>服务名称</th><th>icenterurl</th><th>操作</th></tr></thead>';
            for (var i=0;i<data.length;i++ ){
                html+='<tr id="rowOne">';
                html+='<td>'+data[i].parentcode+'</td>';
                html+='<td>'+data[i].parentname+'</td>';
                html+='<td>'+data[i].servicecode+'</td>';
                html+='<td>'+data[i].servicename+'</td>';
                html+='<td><a style="width:200px; cursor:pointer;" οnclick="icenterpage(\''+data                [i].icenterurl+'\');">'+data[i].icenterurl+'</a></td>';
                html+='<td><button  data-target="#step1" οnclick="delSerciceByid(\''+requireid+'\',            \''+data[i].servicecode+'\');"><a>删除</a></button><br>';
                html+='</tr>';
            }
            html+='</tbody>';
            html+='</table>';
            html+='<div class="modal-footer">';
            html+='<button type="button"  class="btn btn-primary" οnclick="queSercice                (\''+requireid+'\')">增加</button></div>';
            $("#sercice_list").append(html);
             },error:function(err){
                 alert("服务树初始化数据加载失败！");
             }
        });
}

选项框条件补充
//页面初始化赋值
function loadRolename3Options(Rolename3){
    var newRolename3=Rolename3.substring(1,Rolename3.length-1);
    var arr=newRolename3.split(",");
    $("#qaname").append('<option value="">--请选择--</option>');
    for(var i=0;i<arr.length;i++){
        $("#qaname").append('<option value="'+trim(arr[i])+'">'+arr[i]+'</option>');
        $("#jiben_qaname").append('<option value="'+trim(arr[i])+'">'+arr[i]+'</option>');
    }
}

//去除字符串前后空格
function trim(str){ 
    return str.replace(/(^\s*)|(\s*$)/g, ""); 
}

新页面弹出框
//点击icenterpage，弹出新页面窗口
function icenterpage(icenterurl){
    window.open(icenterurl,'','height=600,width=1000,top=140,left=300');
}

<4>html

把div变成input输入框<div></div>

contenteditable="plaintext-only"
或者contenteditable="true"

*<span></span>标签也可以用

跳出新窗口，用于href=""访问
<1>iframe  缺点：https或者http请求的连接地址一些会受返回的信息不同而不通过
<iframe id="icenterurlPage" name="icenterurlPage" style="width:100%; height:500px; overflow:auto;"     frameborder="0" src="" marginheight="0" marginwidth="0"></iframe>
<2>window.open();   //推荐使用

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no,     scrollbars=no, resizable=no,location=n o, status=no')

 <SCRIPT LANGUAGE="javascript"> js脚本开始； 
  window.open 弹出新窗口的命令； 
  'page.html' 弹出窗口的文件名； 
  'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
  height=100 窗口高度； 
  width=400 窗口宽度； 
  top=0 窗口距离屏幕上方的象素值； 
  left=0 窗口距离屏幕左侧的象素值； 
  toolbar=no 是否显示工具栏，yes为显示； 
  menubar，scrollbars 表示菜单栏和滚动栏。 
  resizable=no 是否允许改变窗口大小，yes为允许； 
  location=no 是否显示地址栏，yes为允许； 
  status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； 
  </SCRIPT> js脚本结束

style="display: ${iscbt ? 'none' : 'block'}"   //通过获取iscbt的参数（true/false）来控制隐藏和显现

<5>服务树

zTree
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

导入jar包  ztree包
<link rel="stylesheet" th:href="@{ztree/css/zTreeStyle.css}">
<script type="text/javascript" th:src="@{ztree/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{ztree/jquery.ztree.core-3.2.js}"></script>
<script type="text/javascript" th:src="@{ztree/jquery.ztree.core-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{ztree/jquery.ztree.excheck-3.2.js}"></script>
<script type="text/javascript" th:src="@{ztree/jquery.ztree.excheck-3.5.min.js}"></script>

HTML
<ul id="treeDemo" class="ztree"></ul>

<iframe id="mainContent" name="mainContent1" src="" style="width:100%; height:768px; background-color: #fff; overflow:auto;  float:right;" ></iframe>

<script type="text/javascript">
var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };
     

//请求controller获取数据
$(document).ready(function () {
    jQuery.ajax({
        url: "/saltportal/treeList",
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            $.fn.zTree.init($("#treeDemo"), setting, data);
        }
    });
});

//点击节点的onclick事件
function getInfoId(id) {
   $("#mainContent").attr("src","/saltportal/ApplicationPageList?servicecode="+id).children().trigger('click');
}

 //异步刷新tree
var curMenu = null, 
zTree_Menu = null;
var zNodes = [];
function refreshNode(id){
    //获取当前节点
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var nodes = treeObj.getSelectedNodes();
    var selectId = nodes[0].id;
    //重置树
    $.ajax({
        url: "/saltportal/treeList",
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            $.fn.zTree.init($("#treeDemo"), setting, data);
            zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
            curMenu = zTree_Menu.getNodes()[0].children[0];
            zTree_Menu.selectNode(curMenu);
        }
    });
    treeObj.selectNode(selectId, true);
}

</script>

<7>表单数据转换成集合

例如：  注释：$("").val();智能获取input框的参数值
前提：<input type="hidden" id="Ass_versionid" name="versionid"/>
function queRequire(id){
    
    var JSONObj=new Object();//为JSON对象  
    var list=[];//生成集合（保存多个商品对象）
    var versionid=null;//保存商品对象  
    //循环将多个商品对象保存到集合中
    for (var i = 0; i<id; i++) {  
        versionid=new Object();//生成一个商品对象
        versionid.versionid=$('#vers'+i).val();//moduleworkload
        list.push(versionid);//保存商品对象到集合中  
    }
    JSONObj.jsonStr=JSON.stringify(list);//将集合转成JSON("jsonStr"用于后台定位)
    $.ajax({
        type: 'GET',
        async: false,
        data: JSONObj,
        url: '/saltportal/version/getVersionAndRequireLists',
        dataType: "json",
        success: function(data){
            var data = data;
            var b = data.length;
            $("#Details_list").empty();
            html='';
            html+='<table class="table table-striped" style="text-align:left;"><thead><tr><th>版本名称</th><th>需求名称</th></tr></thead>';
            html+='<tbody>';
            for (var i = 0; i < data.length; i++) {
                html+='<td >'+data[i].versionname+'</td>';
                html+='<td >'+data[i].requirename+'</td>';
                html+='</tr>';
            }
            html+='</tbody></table>';
            if(b == 0){
                html+='<div style="color:#dd4b39; text-align:center; width:100%;"><span >暂没有版本关联的需求!!!</span></div>';
            }
            $("#Details_list").append(html);
        },error:function(){
            alert("数据加载失败！");
            Details_version(versionid);
        }
    });
}

后端接收
//关联详情>>单集版本>>（多版本）关联需求查询加载数据
      @RequestMapping(value="/version/getVersionAndRequireLists" ,method = RequestMethod.GET)
      @ResponseBody
      public List<DemandListBean> getVersionAndRequireLists(HttpServletRequest request){
          List<DemandListBean> list = new ArrayList<DemandListBean>();
          try {
              String jsonStr = request.getParameter("jsonStr");
              System.out.println("我进来了！"+jsonStr);
              List<DemandListBean> versionids = JSON.parseArray(jsonStr,DemandListBean.class);
              List<Integer> list2 = new ArrayList<Integer>();
              for (DemandListBean i: versionids) {
                  list2.add(i.getVersionid());
              }
              list = versionService.getVersionAndRequireLists(list2);
          } catch (Exception e) {
              e.printStackTrace();
          }
          return list;
      }

知识扩展：
来源：https://blog.csdn.net/qq_32786873/article/details/80280869

《传入数组》
$(document).on('click', '#sendArr', function () {
    var ids = [];
    for(var i=0; i<10; i++){
        ids.push(i);
    }
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/test/test/sendArr',
        data: {ids:ids},
        traditional: true,
        success: function (result) {
            console.log(result)
        },
        error: function(data){
          alert("操作异常");
        }
    });
});

后端：

@PostMapping("/sendArr")
public Map<String,Object> sendArr(String[] ids) {
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("ids", ids);
    return map;

《2传入List集合》

$("#sendList").click(function(){
    var ids = [];
    for(var i=0; i<10; i++){
        ids[i] = i;
    }
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/test/test/sendList',
        data: JSON.stringify(ids),
        contentType:"application/json",
        success: function (result) {
            console.log(result)
        },
        error: function(data){
          alert("操作异常");
        }
    });
});

后端：
@PostMapping("/sendList")
public Map<String,Object> sendList(@RequestBody List<String> ids) {
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("ids", ids);
    return map;
}

<8>bootstrap-select简单使用

网址：https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html

单选框可以输入 引入文件
<link href="/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>

注意名称class="selectpicker"

自己写的
<label>局点</label>
<div class="form-control" style="padding:0px; border: 0px solid #ccc;">
    <div style="width:16%; float:left;">
        <select name="postname" class="form-control" id="demand_postname" onChange="Change_postname();">
           </select>
    </div>
    <div style="width:84%; float:left;">
         <input type="text" placeholder="--请输入--" class="form-control" name="postname11" id="postname11" th:value="${postname}" >
    </div>
</div>

js

//局点选择后，input框显示数据
function Change_postname(){
    var postname = $("#demand_postname").val();
    $("#postname11").attr("value",postname);
}

（5）在框架下，重置一下选项框方式

    普通select下
    document.getElementById("selectid").options.length = 0; 
    //对input框重置
    $("#iRequireChanger_versionname").val("");

    *bootstrap-select下拉框对select选项框重置
        document.getElementById("version_postname").options.selectedIndex = 0; //回到初始状态
            $("#version_postname").selectpicker('refresh');

设置初始化值：$("#jz_statusname").val(statusname).trigger("change");
        
// 赋值 - 单选
$
    $("#select2-id").val('value').trigger("change");

// 赋值 - 多选
$
    $("#select2-id").val(['value1','value2']).trigger("change");

<9>雷达图-------------------------------------------------------------------------

雷达图，画图 学习网站：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

前提：
<script type="text/javascript" th:src="@{adminlte/plugins/jQuery/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{adminlte/plugins/ECharts/echarts.min.js}"></script>

HTML

<div id="main" style="width: 500px;height:450px;"></div>

script
<script>
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '人员画像'
            }, 
        tooltip: {},
           legend: {
            data: ['预算分配','实际开销']
            },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                       }
                },
            indicator: [
                   { name: '销售', max: 6500},
                   { name: '管理', max: 16000},
                   { name: '信息技术', max: 30000},
                   { name: '客服', max: 38000},
                   { name: '研发', max: 52000},
                   { name: '市场', max: 25000},
                   { name: '人员', max: 5000}
                ]
            },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                 {
                value : [4300, 10000, 28000, 35000, 50000, 19000,3500],
                name : '预算分配'
            }, 
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000,4200],
                name : '实际开销'
            }
        ]
    }]
};
//调用方法
myChart.setOption(option);
</script>

ajax加载雷达图

//雷达图
function getMap(moduleid,modulename){
    $.ajax({
        type: 'GET',
        async: false,
        url: '/saltportal/getMapByAbility?moduleid='+moduleid,
        dataType: "json",
        success: function(result){
            var result = result;
            if(result.length>0){
                var myChart = echarts.init(document.getElementById('main'));
                option = {
                    title: {
                        text: ''
                    }, 
                    tooltip: {},
                    legend: {
                        data: []
                    },
                    radar: {
                       // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                               }
                        },
                        indicator: []
                    },
                    series: [{
                        name: '预算 ',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data : [
                            {
                                name :'',
                                value : []
                               
                            }
                        ]
                    }]
                    
                };
                //调用方法
                if(result){
                    var lable = [];
                    var val = [];
                    var nas = '';
                    nas = modulename;
                    for(var i =0;i<result.length;i++){
                        lable.push({name: result[i].abilityname,max: 5})
                        val.push(result[i].abilitylevel);
                    }
                    option.title.text = nas +'技能信息图';
                    option.legend.data[0] = nas;
                    option.radar.indicator = lable;   
                    option.series[0].data[0].value = val;
                    option.series[0].data[0].name = nas;
                    
                    //隐藏图表数据加载过度提示信息
                    myChart.hideLoading();  
                    myChart.setOption(option);
                }
            }else{
                alert("该模块暂未关联任何技能！");
            }
        },error:function(data){
            alert("技能图数据加载失败！");
        }
    });
}

 

<10>JSON转换

JSON.stringify(obj)将JSON转为字符串。
JSON.parse(string)将字符串转为JSON格式；

 

参考地址：

单选框取值和动态复制网址：https://blog.csdn.net/qq_40015157/article/details/80692296

js及HTML5的基础学习  https://www.runoob.com/jsref/prop-win-opener.html

css样式    http://www.divcss5.com/rumen/r418.shtml

jQuery学习网站：https://www.w3school.com.cn/jquery/index.asp

雷达图，画图 学习网站：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts