jquery创建标签--$("<option></option>")
$("<option></option>")是创建标签不是标签选择器，text("")是给标签添加内容，也就是选择框显示的值，val("")是给标签value属性赋值，就是传递的值。例如$("<option></option>").text("2代表的内容").val("2")则表示：<option value="2">2代表的内容</option>
因为我们要给select中添加内容,所以我们先设置了$("#com").empty把select清空,所以才需要创建option并赋值,也可以清空option然后获取option标签再给他赋值,但是会比较麻烦
$.ajax({
url: "pro/project-cusshow",
type: "post",
dataType: "json",
cache: false,
contentType: "application/x-www-form-urlencoded",
success: function (data) {
//console.log(data);
$("#com").empty();
$("#com").append("<option id='aaaaaaa' value='-1'>选择公司</option>");
$.each(data,function (i,customer) {
var option = $("<option></option>");
option.val(customer.id).text(customer.comname).appendTo($("#com"));
});
}
});下拉列表如何让选择默认值时显示框的值清空
我们设置提示信息的option的id的值为-1.当id==-1时我们就可以给文本框赋值为"",这样就达到了清空的效果,而且我们不用过去后台判断,直接在前台判断即可,判断过后再向后台查询,这种方式比先传值到后台再判断要简便
function addcus(id) {
if(id == -1){//直接在页面判断即可,不用去后台
$("#cp").val("");
}else{
$("#comname").val(id);
$.ajax({
url: "pro/project-personshow?id=" + id,
dataType: "json",
success: function (data) {
$("#cp").val(data.companyperson);
}
});
}
}后台返回String如何解决前台中文乱码问题
当后台返回String类型的参数时页面接受会出现中文乱码问题,解决问题是后台先编码,然后到前台解码. 编码用String encode = URLEncoder.encode(name, "utf-8");,解码用$("#cp").val(decodeURI(data));
后台
@RequestMapping("/project-personshow")
@ResponseBody
public String showPerson(int idt) throws UnsupportedEncodingException {
if(id == -1){
return "";
}
Customer customer = customerService.queryCustomerById(id);
String name = customer.getCompanyperson();
System.out.println(name);
//解决后台响应到页面乱码问题,后台编码,页面解码
String encode = URLEncoder.encode(name, "utf-8");
return encode;
}前台
function addcus(id) {
// $("#comname").val(id);
$.ajax({
url: "pro/project-personshow?id=" + id,
dataType: "text",
//contentType:"application/x-www-form-urlencoded; charset=utf-8",
success: function (data) {
$("#cp").val(decodeURI(data));
}
});
}ajax页面拼接
1.拼接的时候要先清空原有数据才会生效,前两张图是select标签的拼接,我们拼接的时候用到了$("<option></option>")造出他里面的option标签进行拼接,因为我们清空的是select,它里面的标签option也没了,所以要创造出来,后两张图我们拼接的是ul无序列表,这里没有造ul标签的对象因为我们清空的是ul里面的内容,所以只需要把没有的部分写出来就可以,不用造对象,同时要注意的是页面返回的date是毫秒值,我们要把年月日拿出来需要先把他转化成日期对象.
HSSF和XSSF
HSSF 是Horrible SpreadSheet Format的缩写，也即“讨厌的电子表格格式”。 也许HSSF的名字有点滑稽，就本质而言它是一个非常严肃、正规的API。通过HSSF，你可以用纯Java代码来读取、写入、修改Excel文件。
HSSF - 提供读写Microsoft Excel格式档案的功能。
XSSF - 提供读写Microsoft Excel OOXML格式档案的功能(即xlsx格式的Excel)。
HWPF - 提供读写Microsoft Word格式档案的功能。
HSLF - 提供读写Microsoft PowerPoint格式档案的功能。
HDGF - 提供读写Microsoft Visio格式档案的功能。
https://blog.csdn.net/yzh18373476791/article/details/83044107
遮罩层
<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">
</div>
<!-- 弹窗 -->
<div id="showdiv" style="width: 60%; margin: 0 auto; height:500px; border: 1px solid #999; display: none; position: absolute; top: 20%; left: 20%; z-index: 3; background: #fff">
<!-- 标题 -->
<div id="ntitle" style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 2rem; line-height: 2.5rem; border: 1px solid #999; text-align: center;" >
</div>
<!-- 内容 -->
<div id="remark" style="text-indent: 50px; height: 4rem; font-size: 1.8rem; padding: 0.5rem; line-height: 2rem; ">
</div>
<!-- 按钮 -->
<div style="background: green; width: 10%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 28rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;cursor: pointer" onclick="closeWindow()">
关闭
</div>
</div>jQuery
// 弹窗
function showWindow(obj) {
$('#showdiv').show(); //显示弹窗
$('#cover').css('display','block'); //显示遮罩层
$('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
//通知公告的数据显示
//obj=编号
$.ajax({
url:"not/notice-get",
data:"id="+obj,
dataType:"json",
success:function (data) {
console.log(data);
$("#ntitle").text(data.ntitle);
$("#remark").text(data.remark);
}
});
}
// 关闭弹窗
function closeWindow() {
$('#showdiv').hide(); //隐藏弹窗
$('#cover').css('display','none'); //显示遮罩层
}
$("#btn").click(function () {
showWindow(1);
});富文本编辑器
需要用到utf8-jsp这个文件夹
图表插件Echarts的使用
- 首先需要导入echarts的js文件
- echarts需要和div等具备高宽属性的DOM容器配合使用,具体教程可查看官网https://echarts.baidu.com/index.html
-
<%--echarts的使用需要配合div标签--%> <div id="box" style="width:800px;height:600px;"></div> <script type="application/javascript"> var mychart=echarts.init($("#box")[0]);//初始化我们要使用echarts的div标签 var option={ title:{ text:'营业额分析图' }, legend:{//图例 data:['营业额'] }, xAxis:{ data:[] }, yAxis:{ type:'value', axisLabel:{ formatter:'{value}(亿)',//{value}表示下面要放入的数据 }, }, series:[{ name:'营业额', type:'bar', data:[] }], }; mychart.setOption(option); //1、显示数据加载提示动画 mychart.showLoading(); //准备存储x轴数据，时间 var names=[]; //销售额 var scores=[]; //2、启动ajax，请求数据 $.ajax({ type:'post', url:'index/showlist', dataType:'json', success:function(response){ //判断返回值是否存在 if(response){ //json，遍历 for(var i=0;i<response.length;i++){ var date = new Date(response[i].datime); names.push(date.getFullYear()+"年");//把数据放入x轴 scores.push(response[i].daturnover);//把数据放入y轴 } //隐藏加载动画 mychart.hideLoading(); //设置图表属性，把相关数据设置进去 mychart.setOption({ xAxis:{ data:names }, series:[{ name:'营业额', type:'bar', data:scores }] }); } } }); </script>
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
