jeesite（一）

首先刚进公司项目框架是jeesite，而且还是前后都是我一个人搞这可我把我这个JS菜鸟逼疯了，并且这个框架封装了太多文档和资料却很少，所以为了造福大家和我自己（更重要是我自己）我将记录我在jeesite里遇到的一些问题和解决办法，此文会持续更新，如果你正在使用jeesite开发，能对你有所帮助我将十分高兴
第一取radio选择的值

var ids = $("input[type='radio']:checked").val();//取上面<#form:radio的值
$('input:radio:last').attr('checked', 'checked'); //设置默认最后一个选中，第一个就换last改为第一

其实也就是普通的jquery取值只是这个jeesite生成页面并没有name啊或者id什么的，需要我们自己定义去取值（

对不起这里我说错了Jeesite会生成ID，ID就是你的Path）

2.从数据库查询数据动态生成前端页面的元素比如checkBox，Input等等

<div class="box2">
<div class="title" style="width: 100%; height: 48px; background-color: #333;">
<h3 style="text-align: left;margin-top: 10px;color: white;">请选择评分标准</h3>
</div>
<div class="checbox-list"
style="width: 100%; min-height: 200px; background-color: #fff;background-color: #888888">
<ol id="ols" >
我将要在这里生成动态的li 以及checkBoxx
</ol>

</div>
<div class="btn-list" style="width: 100%; height: 70px; background-color: #666;">
<button type="button" id="ok" οnclick="olc()">确认</button>
<button type="reset" href="javascript:history.go(-1);location.reload()" id="nook">返回</button>
</div>
</div>
这里给他个默认gradeType为1 就查出为1的数据

有时候我们会遇到做了一个选项卡但是要去获取每点击一个选项卡就获取到这选项卡的ID值用于查询，但是这个又怎么实现呢？且看下方代码.
<div class="box">
<ul class="nav" id="demo">
<li id="1" class="current" value="1">演讲</li>
<li id="2" value="2">朗读</li>
<li id="3" value="3">征文</li>
<li id="4" value="4">书法</li>
<li id="5" value="4">绘画</li>
<li id="6" value="4">摄影</li>
<li id="7" value="4">其它</li>
</ul>
</div>

//在这里我们设定了一个<ul><li>的选项卡，这只是HTML并没有js 所以是不可以实现选项卡的，下面是js代码

/**
* 选项卡切换
*/
$(function () {

$(".nav>li").click(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current")
})
})

好了效果有了如何获取ID值呢？且看下面代码

var v;
var oll = $('#demo li');
$('#demo li').click( function () {
v = $(this).attr("id");
console.log(v);
})
v:就是存放我点击选择的值然后就可以通过这个值进行一些查询数据了，具体的查询可以看我这篇文章上面的操作，通过这v去查询数据库动态生成checkBox的值。
值，获取到了怎么查询？怎么生成checkBox选项？如何获取checkBox选中的值？

//这就是获取到单击选项卡的值后进行查询数据，动态生成checkbox
$(".nav li").click(function () {
console.log("我是选项阿卡"+v);
$.ajax({
type:'post',
url:'${ctx}/yinyue/gradeStandard/querystandard',
data:{
gradeType: v
},
success :function (data) {
console.log(data);
$.each(data,function (k,v) {
$("#olss").html("");
var p ;
p='<li>'+'<input type="checkbox" name="test" value="'+v.id+'">'+v.gradeTitle+':'+','+v.gradeStandard + '</li>'
$("#olss").append(p);
});
}
});
})

//接着我们获取选中的checkBox的值
//得到选中的值，在把值通过ajax传到数据库，这里页面上得到值是个数组因为是多选，而我数据库是String 因此采用了.push方法以 , 分割。
obj = document.getElementsByName("test");
checkVal = [];
for(k in obj){
if(obj[k].checked)
checkVal.push(obj[k].value);
};
console.log(checkVal);
var check = checkVal.push(",");
$.ajax({
type:'post',
url:'${ctx}/yinyue/activity/addGrand',
data:{
id : id,
gradeStandardIds:check
},
success :function (data) {
window.location.reload();
}
});
};

接着我们会经常使用jeesite里的多选列表那么怎么对其进行操作呢？且看下图

我们可能会遇到这种的比如选取人啊，公司啊，地址啊啥的，那么怎么获取其选中的值呢？其实很简单

我们按F12,找到这个选择后的框框，

注意看这里这是啥？？好了吧能获取了吧哈哈，然后就可以存其你需要的ID了，

var id = $("#userIdCode").val(); 这就获取到了
接着可以AJAX发过去存起来了

下面是图片上传，jeesite的上传是上传到本地的，就算项目部署到服务器他能传到本地，可是有很多不用他这个该怎么办呢？比如上传到阿里，青牛等等，接下来我便把我的图片上传开发布置以及遇到的坑给大家说说！

首先，我自己没有写图片上传的接口，我是去调别人的接口进行图片上传，所以只需要一个ajax上传就是了，可是，我使用了五无数办法都不能成功，比如各种插件,form表单等等，可能由于个人能力不足无法完成，所以我就找了专业的前端人士好了人家搞定了，我就不要的脸抄下来记录了。。。希望可以帮到你们。

第一插件：dropzone.js
第二在需要的页面导入js

<style>
   #advancedDropzone { width: 100px; height: 100px; background-color: #eee; border-radius: 5px; text-align: center; cursor: pointer; position: relative; }
   #advancedDropzone span { font-size: 12px; }
   #advancedDropzone span i { display: block; font-size: 36px; line-height: 45px; }
   #advancedDropzone img { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 5px; }

</style>

<div id="advancedDropzone" class="btn btn-app">
   <span><i class="fa fa-inbox"></i> 上传文件</span>

//这里呢因为我要得到接口返回的上传地址用于存到数据库，所以弄个隐藏域
<#form:hidden path="" id="" name="" maxlength="200" class="form-control" required="required" />
</div>

//引入js
<script src="../../../static/common/js/dropzone.js"></script>

<script>

   $('#advancedDropzone, #advancedDropzone *').dropzone({
       url: '你的接口地址',
       maxFiles: 1, // 最多上传1个文件
       maxFilesize: 2, // MB, 上传文件大小不能超过2MB
       acceptedFiles: 'image/*', // 上传文件类型
       addRemoveLinks: true, // 是否创建删除
       dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
       dictFallbackMessage:"浏览器不受支持",
       dictFileTooBig:"文件过大上传文件最大支持.",
       dictRemoveLinks: "删除",
       dictCancelUpload: "取消",
       addedfile: function(file) {

       },
       thumbnail: function(file, dataUrl) {
           var _this = this;
           $('#advancedDropzone span').hide();
           $('#advancedDropzone').append('<img src="' + dataUrl + '" /><span class="badge bg-red dz-remove">X</span>');

           // 文件删除
           $('#advancedDropzone').find('.dz-remove').on('click', function(e){
               e.preventDefault();
               e.stopPropagation();
               $(this).remove();
               $('#advancedDropzone').find('img').remove();
               $('#advancedDropzone').find('span').show();
               _this.removeFile(file);
               $("#activityImageSrc").html("");
           });
       },

       success: function(file) {
           var downuploadUrl = JSON.parse(file.xhr.response);
           var downloadUrl2 = downuploadUrl.data.downloadUrl;
           console.log(downloadUrl2);
           $("#activityImageSrc").val(downloadUrl2);
       },
       error: function(file) {

           console.log(file);
       }
   });
</script>
这就是图片上传的前端全部了，在这里再大家说几个jeesite的坑处，当我们使用jeesite自动生成的form页面的时候，提交的js在我们用图片上传的时候需要两个分开写在一个<script>标签里的不然会报validate is not function的！还有就是你们在使用各种插件的时候上传图片都可能会报这个插件的某个方法是not function，这个原因折腾了我很久各种js都导入了啊咋不行。。（现在我也没解决，好像是把引入的js放到你的上传方法上面还有就是注意引用的顺序）

将持续更新

jeesite里弹窗Layer的使用；
这个呢因为已经封装好了，只需要通过js.layer.xxx就可以使用了，其实这个很简单，大家看看layer文档就知道了。

最后
因为目前已经换了工作没用jeesite了，所以很久没更新啦，不过呢用了这么久了，说点心得吧，其实呢jeesite这个框架还是挺不错的，开发快捷，页面听好看，傻瓜式的操作吧，权限什么的也都已经弄好了，对了大家如果不会jeesite的权限处理的话可以看我的另一篇博客，我写的都很详细吧，一步步操作都有截图的。其实很多东西都在jeesite的文档里了，要么是因为我们没有细心观察，要么就是文档写的太烂看不懂。我大多数是处于那种看不懂，不知道文档上的代码写在哪的状态。
---------------------
作者：public_pig
来源：CSDN
原文：https://blog.csdn.net/public_pig/article/details/87778966
版权声明：本文为博主原创文章，转载请附上博文链接！

jeesite（一）相关推荐

jeesite如何已生成数据的数据源_使用Jeesite进行二次开发
一:简介二:导入运行 1:环境准备 JDK1.8+Eclipse+Maven +MYSQL 注意: 1)Eclipse修改默认编码格式 Window--Preference--General--Wo ...
企业信息化快速开发平台JeeSite
为什么80%的码农都做不了架构师?>>> 平台简介 JeeSite是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的开源Java EE快速开发平台. JeeS ...
jeesite如何已生成数据的数据源_jeesite1.X 集成多数据源
jeesite.properties配置多数数据源地址,这里以mysql5.7和sqlserver2008版本为例子 #mysql database settingjdbc.type=mysql#jd ...
java 控制台刷屏 dll_控制台被警告刷屏 · Issue #IXD8V · 卓源软件/JeeSite 4.2 - Gitee.com...
### 该问题是怎么引起的? debug日志不在控制台打印后,有两个问题: 1.浏览器登录后,长时间没有操作,掉出登录后,浏览器没关,控制台一直被没有权限的警告刷屏 2.前台页面跳转过程中,一直在控制 ...
在Myeclipse中没有部署jeesite项目，但是每次运行其他项目时，还是会加载jeesite项目...
解决办法: 一.在以下路径中找到jeesite文件,并删除 1.Tomcat 7.0\conf\Catalina\localhost 2.Tomcat 7.0\webapps 3.Tomcat 7.0 ...
Jeesite信息化快速开发平台
平台简介 JeeSite是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的开源Java EE快速开发平台. JeeSite是您快速完成项目的最佳基础平台解决方案,JeeSite是您想 ...
【JeeSite】用户管理
组织机构使用ztree插件,加载数据时使用数据权限过滤(只能访问登录用户的单位及其下属单位), 点击部门加载相应用户.  BaseService.data ...
JeeSite 4.0 说说前端的那些事
2019独角兽企业重金招聘Python工程师标准>>> 引言一个不得不说的话题,经过近几年的发展,Web前端开发已经不是一个新有的岗位了,前端技术发展非常迅速,技术更新换代也很快, ...
jeesite缓存问题
jeesite,其框架主要为: 后端核心框架:Spring Framework 4.0 安全框架:Apache Shiro 1.2 视图框架:Spring MVC 4.0 服务端验证:Hiberna ...
jeesite的junit,数据没有插入?
jeesite框架自带的test方法在common/test/SpringTransactionalContextTests.class 说一下遇到的问题. sql执行成功了,但是数据库没有数据.w ...

jeesite（一）

jeesite（一）相关推荐

最新文章

热门文章